توصيات الدورات

تحذير Bootstrap 5

تحذير

Bootstrap 5 توفر طريقة بسيطة لإنشاء رسائل تحذير مسبقة التحضير:

  • نافذة التحذير مصنوعة باستخدام فئة .alert، متبوعة بأحد الفئات التالية:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

مثال

<div class="alert alert-success">
  <strong>نجاح!</strong> هذه نافذة التحذير تعبر عن نجاح أو عمل إيجابي.
</div>

جربها بنفسك

.alert-dark

رابط التحذير .alert-link أضف فئة إلى أي رابط داخل نافذة التحذير لإنشاء رابط "مطابق باللون":

مثال

<div class="alert alert-success">
  <strong>نجاح!</strong> يجب عليك <a href="#" class="alert-link">قراءة هذه الرسالة</a>.
</div>

جربها بنفسك

إغلاق التحذير

لإغلاق رسالة التحذير، أضف .alert-dismissible أضف فئة إلى حاوية التحذير. ثم class="btn-close" و data-bs-dismiss="alert" أضف إلى عنصر رابط أو زر (عند النقر عليه، ستختفي نافذة التحذير).

مثال

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>نجاح!</strong> هذه نافذة التحذير تعبر عن نجاح أو عمل إيجابي.
</div>

جربها بنفسك

رسوم متحركة نافذة التحذير

.fade و .show أضف تأثير التدرج إلى إغلاق رسالة التحذير:

مثال

<div class="alert alert-danger alert-dismissible fade show">

جربها بنفسك