في هذا الدرس 6تصفّح المواضيع
تحتاج كل واجهة تفاعلية إلى وسيلة واضحة لإبلاغ المستخدم بنجاح حفظ بياناته، أو تحذيره من قرب انتهاء جلسته، أو تنبيهه لخطأ في الاتصال. يوفر Bootstrap 5.3 مكوّن .alert مع ثمانية أنماط دلالية تمتد من .alert-primary و.alert-success إلى .alert-warning و.alert-danger، مع ضرورة إضافة السمة role="alert" حتى تعلن قارئات الشاشة الرسالة فور ظهورها.
<div class="alert alert-success" role="alert">
Backup completed successfully in 1.4 seconds.
</div>
<div class="alert alert-danger mb-0" role="alert">
Connection lost. Retrying gateway handshake.
</div>إذا وضعت رابطاً عادياً <a> داخل تنبيه أحمر أو أصفر، سيظهر باللون الأزرق الافتراضي فيبدو نشازاً وضعيـف التباين! يعالج الكلاس المساعد .alert-link هذه المشكلة فوراً بمنح الرابط خطاً عريضاً ولوناً مشتقاً من نفس فصيلة التنبيه المحيط به.
<div class="alert alert-warning mb-0" role="alert">
SSL certificate expires in 3 days.
<a href="#renew" class="alert-link">Renew certificate</a>
before traffic is interrupted.
</div>لا تقتصر التنبيهات على سطر نصي واحد؛ إذ يمكنك بناء رسالة إرشادية مفصلة تضم عنواناً داخلياً بكلاس .alert-heading يرث لون التنبيه تلقائياً، وفقرة شرح واضحة، وخطاً فاصلاً <hr> متبوعاً بفقرة ختامية تحمل .mb-0 للحفاظ على توازن الحشو السفلي.
يساعد دمج أيقونة متجهية مع نص التنبيه — مثل علامة الصح للنجاح أو المثلث التحذيري للتنبيه — على إيصال معنى الرسالة في جزء من الثانية حتى لمصابي عمى الألوان! نطبّق ذلك بتحويل التنبيه إلى صف مرن عبر .d-flex .align-items-center، مع منح الأيقونة .flex-shrink-0 .me-2 حتى لا تنضغط الأيقونة أبداً عند التفاف النص الطويل على شاشة الهاتف.
<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>لتمكين المستخدم من إغلاق التنبيه وإزالته من الشاشة بنقرة واحدة، نجمع ثلاثة عناصر متكاملة: الكلاس .alert-dismissible الذي يضيف حشواً جانبياً لحجز مكان الزر، والكلاسين .fade .show لتفعيل حركة التلاشي البصري الناعم، وزر الإغلاق <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> داخل الصندوق.
<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>في التطبيقات الحديثة كثيراً ما تتولد التنبيهات ديناميكياً استجابةً لزر «حفظ الإعدادات» أو استجابة طلب شبكة عبر Vanilla JavaScript بدون أي مكتبة خارجية؛ حيث ننشئ عنصر <div> ونلحقه بحاوية مخصصة، كما يوفر الكائن البرمجي bootstrap.Alert.getOrCreateInstance(el) دالة .close() لإغلاق التنبيه برمجياً بعد مرور ثوانٍ محددة.
| الميزة في التنبيه | الكلاس أو الواجهة البرمجية | الوظيفة الدقيقة |
|---|---|---|
| الروابط المتناغمة | .alert-link | يطابق لون الرابط وسماكته مع فصيلة التنبيه المحيطة |
| العنوان الداخلي | .alert-heading | يورّث لون التنبيه الدلالي لعناوين <h4>–<h6> |
| التنبيه القابل للإغلاق | .alert-dismissible .fade .show | يحجز مسافة زر .btn-close ويفعّل التلاشي |
| التحكم البرمجي JS | bootstrap.Alert.getOrCreateInstance | يغلق التنبيه برمجياً ويطلق أحداث الإغلاق القياسية |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تصميم صناديق التنبيه الثمانية في بوتستراب 5.3، وتنسيق الروابط والعناوين الداخلية، ومحاذاة الأيقونات المتجهية، وتفعيل الإغلاق المتلاشي، والتعامل مع الواجهة البرمجية وأحداث جافاسكريبت. الخطوة التالية: انتقل الآن إلى الدرس السادس والعشرين لدراسة المكوّن الأكثر مرونة في واجهات الويب الحديثة وهو حاوية البطاقات Cards بتشريحها الكامل وشبكاتها المتساوية.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Alert Component مكوّن صندوق التنبيه
- حاوية رسائل تفاعلية ملونة تعلن حالات النجاح أو التحذير أو الخطأ للمستخدم وقارئات الشاشة.
- للمراجعة
- 02 Harmonized Alert Link رابط التنبيه المتناغم
- كلاس يمنح الروابط الواقعة داخل التنبيه وزناً عريضاً ولوناً منسجماً مع خلفية الصندوق.
- للمراجعة
- 03 Dismissible Alert التنبيه القابل للإغلاق
- تنبيه مزود بزر إغلاق قياسي وحركة تلاشي ناعمة تحذف الصندوق عند النقر.
- للمراجعة
- 04 Alert Heading عنوان التنبيه الداخلي
- كلاس يجعل عناوين الفقرات داخل التنبيه ترث اللون الدلالي للصندوق تلقائياً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ARIA ARIA
- Accessible Rich Internet Applications
- توفر الدور role="alert" الذي يوجه قارئ الشاشة لنطق التنبيه فور ظهوره.
- للمراجعة
- 02 XSS XSS
- Cross-Site Scripting
- ثغرة أمنية نتجنبها عند توليد التنبيهات ديناميكياً بإسناد النصوص عبر textContent الآمن.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- شجرة عناصر الصفحة التي يُحذف منها عنصر التنبيه نهائياً عقب اكتمال حركة الإغلاق.
- للمراجعة
- 04 SVG SVG
- Scalable Vector Graphics
- الأيقونات المتجهية الحادة التي تدمج داخل التنبيه لتوضيح دلالته البصرية فوراً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ صندوق alert-warning مرناً يضم أيقونة تحذير محمية بكلاس flex-shrink-0 مع رابط داخلي يحمل alert-link.
-
صمّم تنبيه نجاح يضم عنواناً بكلاس alert-heading وخطاً فاصلاً وزر إغلاق يفعل التلاشي عبر data-bs-dismiss="alert".
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
أي كلاس يمنح الروابط الموضوعة داخل صندوق .alert لوناً ووزناً متناغمين مع خلفية التنبيه؟
صُمم الكلاس .alert-link خصيصاً لتلوين الروابط بدرجة متباينة مشتقة من لون التنبيه المحيط.
ما السمة القياسية في Bootstrap 5 لربط زر .btn-close بإغلاق صندوق التنبيه دون كود جافاسكريبت يدوي؟
تعتمد كل إضافات Bootstrap 5 على بادئة data-bs-*، وتُغلق التنبيهات عبر data-bs-dismiss="alert".
يُحذف عنصر التنبيه نهائياً من شجرة DOM عقب إغلاقه بزر .btn-close وليس مجرد إخفائه مؤقتاً.
نعم، بعد انتهاء انتقال التلاشي يزيل مكوّن Alert العنصر كلياً من شجرة DOM.
لماذا نضيف الكلاس .alert-dismissible إلى حاوية التنبيه عند وضع زر .btn-close بداخلها؟
يحجز .alert-dismissible حشواً جانبياً قدره 3rem ويضبط تموضع زر .btn-close في الطرف الصحيح.
أي زوج كلاسات يُضاف إلى التنبيه القابل للإغلاق لتفعيل حركة التلاشي التدريجي عند الإغلاق؟
يفعّل .fade انتقال الشفافية بينما يبقي .show التنبيه ظاهراً إلى أن يُنقر زر الإغلاق.
ما فائدة إضافة .flex-shrink-0 على الأيقونة الموضوعة داخل تنبيه مرن .d-flex؟
يحافظ .flex-shrink-0 على العرض الأصلي للأيقونة ثابتاً مهما طال النص المجاور داخل حاوية Flexbox.
ينطلق الحدث closed.bs.alert قبل بدء حركة التلاشي البصري للتنبيه مباشرة.
خطأ؛ الحدث close.bs.alert هو الذي ينطلق فوراً عند طلب الإغلاق، أما closed.bs.alert فينطلق بعد اكتمال التلاشي وإزالة العنصر.
أي ممارسة أمنية يجب اتباعها عند توليد تنبيه جافاسكريبت يعرض نصاً قادماً من مدخلات المستخدم؟
يمنع استخدام textContent تفسير أي وسوم خبيثة ككود قابل للتنفيذ، مما يحمي الواجهة من ثغرات XSS.