في هذا الدرس 4تصفّح المواضيع
- يوفر bootstrap تنسيقات معدة مسبقة للرسائل التحذيرية ورسائل الخطر والنجاح وغيرها.
- لاستخدام اي كلاس خاص بالتحذيرات يجب اولا اضافة كلاس alert الى العنصر حيث يقوم وحده باضافة padding:16px و margin-left:16px.
- يمكن استخدام هذه التنسيقات باضافة كلاس alert وبجانبه كلاس *-alert حيث * هي (primary - secondary - info - success - danger - warning - dark - light) مثل, alert alert-danger.
BootStrap Alerts
استخدام كلاس alert مع الكلاسات السياقية.
HTML
<div class="container mt-3">
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
</div>التحذيرات هي عناصر غير اساسية في الصفحة, وتظهر فقط عند حدوث action حدث معين داخل الموقع ويجب ان يتم وضع زر لاخفائها.
يوفر bootstrap اماكانية اخفاء التحذيرات على خطوتين:
- اولا: اضافة كلاس alert-dismissible الى العنصر الذي قمت باعطائه كلاس alert.
- ثانيا: انشاء عنصر button او link داخل عنصر التحذير ونقوم باضافة كلاس btn-close و attribute اخر هو "data-bs-dismiss = "alert الى هذا الزر.
Alert Closing
عمل زر لاغلاق التحذير بساتخدام كلاس alert-dismissible.
HTML
<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Light!</strong> Light grey alert.
</div>لجعل اي alert يبدو افضل يمكن دائما اضافة animation تحريك يجعل التحذير يظهر ويختفي ببطئ قليلا من خلال اضافة كلاس show وكلاس fade الى parent element.
Animated Alerts
عمل animation عند اخفاء alert.
HTML
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>كلاس alert-link هو من utility classes الكلاسات المساعدة في bootstrap يتم وضعه داخل اي عنصر link موجود داخل alert لاعطاءه لونا مطابقا لخلفية هذا التحذير.
Alert LInks
مثال على استخدام كلاس alert-link.
HTML
<div class="alert alert-primary">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.