تنبيهات التمهيد
تنبيهات
يوفر Bootstrap طريقة سهلة لإنشاء رسائل تنبيه محددة مسبقًا:
يتم إنشاء التنبيهات مع .alertالفصل ، متبوعًا بأحد الفئات السياقية الأربعة
.alert-success، .alert-infoأو :.alert-warning.alert-danger
مثال
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative 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">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
السمة aria- * و & مرات؛ شرح
للمساعدة في تحسين إمكانية الوصول للأشخاص الذين يستخدمون برامج قراءة الشاشة ، يجب عليك تضمين سمة aria-label = "close" عند إنشاء زر الإغلاق.
& مرات ؛ (×) هو كيان HTML وهو الرمز المفضل لأزرار الإغلاق ، بدلاً من الحرف "x".
للحصول على قائمة بجميع كيانات HTML ، تفضل بزيارة مرجع كيانات HTML الخاص بنا .
تنبيهات متحركة
تضيف الفئات .fadeو .inتأثير التلاشي عند إغلاق رسالة التنبيه:
مثال
<div class="alert alert-danger fade in">
استكمال مرجع تنبيه التمهيد
للحصول على مرجع كامل لجميع خيارات التنبيه وطرقه وأحداثه ، انتقل إلى مرجع تنبيه Bootstrap JS .