انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: رسائل التنبيه في بوتستراب 5

Dismissible Animated Alerts إغلاق وحركة رسائل التنبيه

تعلّم بناء رسائل التنبيه في بوتستراب 5.3، وتنسيق روابط alert-link والعناوين الداخلية، ودمج الأيقونات المتجهية بمرونة، وتفعيل الإغلاق المتلاشي وتوليد التنبيهات بجافاسكريبت.
3 صفوف تعليمية
بوتستراب 5
2 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لتمكين المستخدم من إغلاق التنبيه وإزالته من الشاشة بنقرة واحدة، نجمع ثلاثة عناصر متكاملة: الكلاس .alert-dismissible الذي يضيف حشواً جانبياً لحجز مكان الزر، والكلاسين .fade .show لتفعيل حركة التلاشي البصري الناعم، وزر الإغلاق <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> داخل الصندوق.

الصف 2 كود برمجي
HTML 
<div class="alert alert-warning alert-dismissible fade show"
  role="alert">
  <strong>Storage 85% full!</strong> Archive old snapshots.
  <button type="button" class="btn-close"
    data-bs-dismiss="alert" aria-label="Close"></button>
</div>
جرّب بنفسك
الصف 3 ملاحظة هامة

جميع فقرات هذا الدرس (رسائل التنبيه في بوتستراب 5)