في هذا الدرس 5تصفّح المواضيع
تحاكي الإشعارات العائمة Toasts في Bootstrap 5.3 تنبيهات أنظمة التشغيل الحديثة وتطبيقات الهواتف؛ فهي رسائل خفيفة غير حاجبة Non-blocking تظهر في زاوية الشاشة لتأكيد حفظ مسودة أو وصول رسالة جديدة دون مقاطعة عمل المستخدم أو إعتام الصفحة كما تفعل النوافذ الحوارية Modals.
يتألف الإشعار القياسي من غلاف .toast يضم بالداخل شريط رأس اختياري .toast-header (يحوي عنوان المصدر بصيغة .me-auto، والطابع الزمني، وزر الإغلاق data-bs-dismiss="toast") متبوعاً بجسم الرسالة .toast-body.
تُعدّ الإشعارات العائمة ميزة اختيارية التهيئة Opt-in تُشغَّل عقب نجاح استجابة الخادم (مثل طلب fetch لحفظ الإعدادات)؛ فلا نربطها بسمة فتح HTML تلقائية، بل نستدعي الدالة الآمنة bootstrap.Toast.getOrCreateInstance(toastEl) في جافاسكريبت القياسية ثم ننفّذ .show().
توفر الإضافة أيضاً أحداث دورة حياة دقيقة تشمل show.bs.toast وshown.bs.toast وhide.bs.toast وhidden.bs.toast، ما يمكّنك من تنظيف عناصر الإشعار المولّدة ديناميكياً من DOM فور اكتمال تلاشيها.
<button id="saveBtn" class="btn btn-primary" type="button">
Save Profile</button>
<div id="saveToast" class="toast mt-3" role="status">
<div class="toast-header">
<strong class="me-auto">System</strong>
<button type="button" class="btn-close"
data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">Changes saved!</div>
</div>لتثبيت الإشعارات فوق محتوى الصفحة في زاوية محددة أو في أعلى المنتصف، نغلّفها داخل حاوية .toast-container مدمجة مع كلاسات التموضع المساعدة مثل .position-fixed.bottom-0.end-0.p-3 للزاوية السفلية، أو .top-0.start-50.translate-middle-x.p-3 لأعلى منتصف الشاشة.
عندما تضع عدة عناصر .toast داخل نفس .toast-container، يتكفّل Bootstrap 5 بتكديسها عمودياً فوق بعضها بمسافات فاصلة متناسقة تلقائياً دون الحاجة لحساب إحداثيات top يدوية لكل إشعار جديد!
<div class="toast-container position-static">
<div class="toast show" role="status">
<div class="toast-header">
<strong class="me-auto">Build #1</strong>
<button type="button" class="btn-close"
data-bs-dismiss="toast"></button></div>
<div class="toast-body">Assets compiled.</div>
</div>
</div>للرسائل السريعة الواضحة (مثل «تم نسخ الرابط بنجاح» أو «تعذّر الاتصال بالشبكة»)، يمكنك الاستغناء عن شريط .toast-header بالكامل وبناء إشعار مدمج ملون يجمع كلاس التلوين الذكي .text-bg-success أو .text-bg-danger مع .border-0.align-items-center.
بداخل هذا الإشعار المدمج نستخدم صفاً مرناً .d-flex يضع .toast-body بجانب زر إغلاق أبيض متباين .btn-close.btn-close-white.me-2.m-auto لضمان وضوح أيقونة الإغلاق فوق الخلفيات الداكنة والملونة.
<div class="toast show align-items-center
text-bg-success border-0" role="status">
<div class="d-flex">
<div class="toast-body">Link copied to clipboard!</div>
<button type="button" data-bs-dismiss="toast"
class="btn-close btn-close-white me-2 m-auto">
</button>
</div>
</div>تختفي الإشعارات تلقائياً افتراضياً (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.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Toast Notification الإشعار العائم (Toast)
- رسالة تنبيه خفيفة غير حاجبة تظهر في زاوية النافذة لإبلاغ المستخدم بنتيجة عملية دون إيقاف تفاعله مع الصفحة.
- للمراجعة
- 02 Toast Container حاوية تكديس الإشعارات
- الكلاس الحاوي (.toast-container) المسؤول عن تثبيت موقع الإشعارات وترتيب تكدسها العمودي بمسافات منتظمة.
- للمراجعة
- 03 Autohide Timer مؤقت الإخفاء التلقائي
- آلية العد التنازلي المدمجة عبر data-bs-autohide وdata-bs-delay (5000 ملي ثانية افتراضياً) لإخفاء الإشعارات العابرة.
- للمراجعة
- 04 ARIA Live Region المنطقة الحية لقارئ الشاشة
- سمات إتاحة تسمح لقارئات الشاشة بنطق محتوى الإشعار الجديد فور ظهوره دون سحب تركيز لوحة المفاتيح من المستخدم.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ARIA تطبيقات الإنترنت الغنية المتاحة
- Accessible Rich Internet Applications
- توفّر أدوار status وalert وسمتَي aria-live وaria-atomic لإعلان الإشعارات الفورية للمستخدمين المكفوفين.
- للمراجعة
- 02 API واجهة برمجة التطبيقات
- Application Programming Interface
- دوال جافاسكريبت البرمجية في كائن bootstrap.Toast مثل getOrCreateInstance() وshow() وhide().
- للمراجعة
- 03 DOM نموذج كائن المستند
- Document Object Model
- شجرة عناصر المستند التي تستضيف حاوية الإشعارات الحية وتستقبل رسائل الحالة الديناميكية.
- للمراجعة
- 04 UX تجربة المستخدم
- User Experience
- جودة التفاعل التي تتحسن بجعل رسائل النجاح تختفي تلقائياً وإبقاء رسائل الخطأ ظاهرة حتى يغلقها المستخدم.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
ضع عنصر .toast داخل حاوية .toast-container مثبتة في أسفل النهاية، وأظهره عند نقر زر عبر bootstrap.Toast.getOrCreateInstance(el).show().
-
صمّم إشعاراً بدون رأس بكلاسَي text-bg-danger وborder-0 مع زر btn-close-white وسمة data-bs-autohide="false" وسمات الإتاحة الحرجة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ما حالة الظهور الافتراضية لعنصر .toast في Bootstrap 5 قبل تشغيله بجافاسكريبت أو إضافة الكلاس .show؟
تبدأ عناصر .toast مخفية افتراضياً ولا تظهر إلا عند استدعاء دالة show() أو وضع كلاس .show.
أي كلاس حاوٍ يتكفل بتثبيت عدة إشعارات عائمة وتكديسها عمودياً بمسافات منتظمة؟
يدير الكلاس .toast-container تموضع الإشعارات والمسافات الفاصلة بينها عند تكدس أكثر من إشعار.
كم تبلغ مهلة الإخفاء التلقائي الافتراضية (delay) للإشعار العائم في Bootstrap 5 بالملي ثانية؟
يضبط Bootstrap 5 المهلة الافتراضية على 5000 ملي ثانية (5 ثوانٍ) مع تفعيل الإخفاء التلقائي.
ضبط السمة data-bs-autohide="false" يبقي إشعار الخطأ ظاهراً حتى يغلقه المستخدم بنفسه.
إيقاف الاختفاء التلقائي يمنع ضياع تفاصيل الخطأ المهمة قبل أن يتمكن المستخدم من قراءتها.
أي كلاس إضافي لزر الإغلاق يضمن وضوح أيقونة X فوق خلفية إشعار داكنة مثل .text-bg-primary؟
يحوّل الكلاس .btn-close-white لون أيقونة الإغلاق إلى الأبيض الواضح فوق الخلفيات الملونة الداكنة.
ما تركيبة سمات ARIA الموصى بها للإشعارات الروتينية الهادئة مثل «تم حفظ المسودة»؟
تنتظر المنطقة الحية الهادئة انتهاء القارئ الصوتي من جملته الحالية ثم تقرأ الإشعار كاملاً بفضل aria-atomic.
يجب نقل تركيز لوحة المفاتيح قسراً عبر .focus() إلى داخل كل إشعار عائم فور ظهوره.
سحب التركيز يقطع كتابة المستخدم وعمله الجاري؛ تتولى سمات aria-live إعلان الرسالة دون تحريك التركيز.
أي سمة على زر الإغلاق داخل الإشعار تتولى إخفاء الإشعار تلقائياً دون كتابة كود إغلاق يدوي؟
تأمر السمة الحديثة data-bs-dismiss="toast" بإغلاق الإشعار بسلاسة وإطلاق أحداث الإخفاء.