تنبيهات Bootstrap 4
Bootstrap 4 تنبيهات
يوفر Bootstrap 4 طريقة سهلة لإنشاء رسائل تنبيه محددة مسبقًا:
يتم إنشاء التنبيهات مع .alertالفصل الدراسي ، متبوعًا بأحد الفئات السياقية .alert-success، .alert-infoأو .alert-warning،
أو .alert-danger، أو :.alert-primary.alert-secondary.alert-light.alert-dark
مثال
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
روابط التنبيه
أضف alert-linkالفصل إلى أي روابط داخل مربع التنبيه لإنشاء "روابط ملونة متطابقة":
مثال
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
تنبيهات الإغلاق
لإغلاق رسالة التنبيه ، أضف .alert-dismissible
فئة إلى حاوية التنبيه. ثم قم بإضافة class="close"وإلى data-dismiss="alert"
رابط أو عنصر زر (عند النقر فوق هذا ، سيختفي مربع التنبيه).
مثال
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
نصيحة: مرات؛ (×) هو كيان HTML وهو الرمز المفضل لأزرار الإغلاق ، بدلاً من الحرف "x".
للحصول على قائمة بجميع كيانات HTML ، تفضل بزيارة مرجع كيانات HTML الخاص بنا .
تنبيهات متحركة
تضيف الفئات .fadeو .showتأثير التلاشي عند إغلاق رسالة التنبيه:
مثال
<div class="alert alert-danger
alert-dismissible fade show">
إكمال مرجع تنبيه Bootstrap 4
للحصول على مرجع كامل لجميع خيارات التنبيه وطرقه وأحداثه ، انتقل إلى مرجع تنبيه Bootstrap 4 JS .