شرح صفوف ومحتوى الفقرة
تختفي الإشعارات تلقائياً افتراضياً (data-bs-autohide="true") بعد مرور 5000 ملي ثانية (data-bs-delay="5000"). وفي أنظمة التصميم المتقنة نجعل إشعارات النجاح العابرة تختفي تلقائياً بعد 4 إلى 5 ثوانٍ، بينما نضبط data-bs-autohide="false" على إشعارات الأخطاء حتى لا تضيع رسالة الخطأ قبل أن يقرأها المستخدم!
ومن منظور الإتاحة الرقمية ARIA، يجب أن توجد حاوية المناطق الحية في DOM مع ضبط aria-atomic="true"؛ استخدم role="status" aria-live="polite" للتأكيدات الهادئة لكي تنتظر قارئات الشاشة انتهاء الجملة الحالية، واستخدم role="alert" aria-live="assertive" للتنبيهات الحرجة العاجلة، مع عدم سحب تركيز لوحة المفاتيح قسراً نحو الإشعار.
جدول مرجعي لكلاسات وخيارات الإشعارات العائمة (Toasts Reference)
| الكلاس / السمة | الوظيفة المعمارية | ملاحظة الاستخدام والإتاحة |
|---|---|---|
.toast-container | حاوية تموضع وتكديس الإشعارات | تُدمج مع position-fixed bottom-0 end-0 p-3 |
bootstrap.Toast | واجهة التحكم البرمجية Vanilla JS | تُستدعى عبر getOrCreateInstance(el).show() |
data-bs-delay | مهلة البقاء بالملي ثانية | الافتراضي 5000 ملي ثانية قبل الإخفاء |
data-bs-autohide="false" | إلغاء الإخفاء الزمني التلقائي | ضروري لرسائل الأخطاء أو الإشعارات ذات الروابط |
aria-live="polite / assertive" | تحديد أولوية نطق قارئ الشاشة | لا تسحب تركيز لوحة المفاتيح بعيداً عن عمل المستخدم |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت بنية الإشعارات العائمة Toasts في Bootstrap 5.3، وتشغيلها برمجياً عبر bootstrap.Toast، وتثبيتها وتكديسها داخل toast-container، وتصميم الإشعارات الملونة المدمجة، وضبط مهلة الاختفاء وسمات الإتاحة الصوتية. الخطوة التالية: انتقل الآن إلى الدرس الثامن والأربعين لبدء وحدة التنقل عبر إتقان مسار التصفح الدلالي Breadcrumbs وتخصيص فواصله ودعمه الكامل للعربية RTL.