تحديد موضع وتكديس الإشعارات | الإشعارات العائمة Toasts في بوتستراب 5

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

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

لتثبيت الإشعارات فوق محتوى الصفحة في زاوية محددة أو في أعلى المنتصف، نغلّفها داخل حاوية .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 يدوية لكل إشعار جديد!

الصف 2 صورة توضيحية

مخطط تكديس الإشعارات داخل toast-container والأنماط المدمجة الملونة ومؤقت الاختفاء

الصف 3 كود برمجي

HTML

<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>

جرّب بنفسك

الصف 4 ملاحظة هامة

Toast Placement Stacking تحديد موضع وتكديس الإشعارات

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

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