الإشعارات (Toasts) | مرجع Bootstrap

1. الشكل الأساسي (Basic)

يتكون من هيدر (Header) وجسم (Body). أضف show لجعله ظاهراً دائماً.

المعاينة

مرحباً أيها العالم! هذا إشعار بسيط.

toast: الكلاس الأساسي لحاوية الإشعار. بشكل افتراضي يكون الإشعار مخفياً. وضعنا show هنا لغرض المعاينة فقط.
toast-header و toast-body: لتقسيم الإشعار إلى قسمين. الهيدر عادة يحتوي على العنوان وزر الإغلاق.
data-bs-dismiss="toast": يقوم بإخفاء الإشعار عند الضغط على زر X.
me-auto: تعني (Margin End Auto)، وتقوم بدفع زر الإغلاق والوقت إلى أقصى اليسار ليبقى العنوان على اليمين.

لإظهار الإشعار برمجياً (عند الضغط)، يجب تهيئته أولاً باستخدام JavaScript.

المعاينة

لقد قمت للتو بالضغط على الزر، فظهر هذا الإشعار! سيختفي تلقائياً.

toast-container position-fixed bottom-0 end-0 p-3: هذه الحاوية توضع في أي مكان في الصفحة (يفضل قبل إغلاق </body>)، وهي تقوم بتثبيت الإشعار في أسفل يمين (end-0) الشاشة.
على عكس (Alert)، الإشعارات (Toasts) مخفية بطبيعتها، ولإظهارها نحتاج لسطرين من الجافاسكربت: تعريف الكائن const t = new bootstrap.Toast(element) ثم طلب العرض t.show(). (هذا الكود متضمن في زر التجربة).

يمكنك التخلص من الهيدر ووضع رسالة بخلفية ملونة (مثل تنبيهات الأخطاء أو النجاح).

المعاينة

مرحباً أيها العالم! هذه رسالة إشعار زرقاء.

تم حفظ التعديلات بنجاح.

لا نستخدم toast-header هنا. نكتفي بـ toast-body وزر إغلاق فقط بجانبه.
d-flex align-items-center: وضعناها لجعل النص وزر الإغلاق في نفس السطر وبتوسيط عمودي.
text-bg-success: لتلوين الإشعار. border-0: لإزالة الإطار الافتراضي لجعله يبدو مسطحاً (Flat).
btn-close-white: لجعل زر الإغلاق أبيض وواضح فوق الخلفية الملونة.

إذا كان هناك أكثر من إشعار في نفس الوقت، يتم رصها فوق بعضها باستخدام toast-container.

المعاينة

انظر، لقد تم ترتيب الإشعارين فوق بعضهما.

المسافة بينهما محددة تلقائياً بفضل الـ Container.

toast-container: هو الحاوية السحرية. أي إشعارات توضع داخله سيتم ترتيبها ورصها (Stacking) فوق بعضها مع ترك مسافة (gap) بسيطة بينها دون الحاجة لبرمجتها.