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

Alerts with Vector Icons دمج الأيقونات مع التنبيهات

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

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

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

يساعد دمج أيقونة متجهية مع نص التنبيه — مثل علامة الصح للنجاح أو المثلث التحذيري للتنبيه — على إيصال معنى الرسالة في جزء من الثانية حتى لمصابي عمى الألوان! نطبّق ذلك بتحويل التنبيه إلى صف مرن عبر .d-flex .align-items-center، مع منح الأيقونة .flex-shrink-0 .me-2 حتى لا تنضغط الأيقونة أبداً عند التفاف النص الطويل على شاشة الهاتف.

الصف 2 كود برمجي
HTML 
<div class="alert alert-primary d-flex align-items-center"
  role="alert">
  <i class="bi bi-info-circle-fill flex-shrink-0 me-2"
    aria-hidden="true"></i>
  <div>New regional edge node is now active.</div>
</div>
جرّب بنفسك

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