التنبيهات (Alerts) | مرجع Bootstrap

1. الألوان الأساسية

8 ألوان جاهزة: alert alert-{color}

المعاينة

هذا تنبيه primary

تمت العملية بنجاح! ✅

حدث خطأ ما ❌

تحذير! الرجاء الانتباه ⚠️

ملاحظة: هذه معلومة إضافية ℹ️

alert: الكلاس الأساسي، يعطي الحواف الدائرية والمساحة الداخلية للتنبيه.
alert-success و أخواتها: تقوم بتلوين خلفية ونص وحدود التنبيه ليناسب معناه.
role="alert": من أجل دعم الـ Accessibility، ليقوم قارئ الشاشة بتنبيه المستخدم الكفيف بوجود رسالة مهمة فور ظهورها.

استخدم alert-link على الرابط لتتناسق ألوانه مع لون التنبيه.

المعاينة

تحذير! يرجى مراجعة سياسة الخصوصية قبل المتابعة.

تم إرسال بريدك. إعادة الإرسال

alert-link: عندما تضيف هذا الكلاس إلى رابط `<a>` موجود داخل التنبيه، سيأخذ الرابط لوناً أغمق بقليل من لون نص التنبيه نفسه ليظهر بشكل جميل ومتناسق دون أن تحتاج لتلوينه يدوياً.

يمكن وضع أي HTML داخل التنبيه: عناوين، فقرات، فواصل...

المعاينة

تم إنشاء حسابك وإرسال رسالة تأكيد على بريدك الإلكتروني.

تحقق من صندوق البريد الوارد أو مجلد الرسائل غير المرغوب فيها.

alert-heading: تُستخدم لعنوان داخل التنبيه، تقوم بتعديل لون العنوان ليتماشى مع لون التنبيه بدلاً من اللون الافتراضي (الأسود أو الأبيض).
الـ <hr> سيأخذ لوناً باهتاً من نفس درجة لون التنبيه تلقائياً لعمل فاصل جميل.
mb-0: إزالة المسافة السفلية للفقرة الأخيرة لكي لا يبدو التنبيه كبيراً جداً من الأسفل.

أضف alert-dismissible وfade show ثم زر الإغلاق مع data-bs-dismiss="alert".

المعاينة (اضغط X لإغلاق التنبيه)

ملاحظة: هذا التنبيه يمكن إغلاقه بالضغط على X

خطأ: لم يتم حفظ التغييرات، يرجى المحاولة مجدداً.

alert-dismissible: يضيف مساحة فارغة في الجانب الأيسر (أو الأيمن في اللغة العربية) ليسمح بوجود زر الـ X بدون أن يتداخل مع النص.
fade show: الـ fade يضيف أنيميشن نعومة للإغلاق، والـ show يخبر المتصفح أن يعرضه في البداية. بدونها قد يظهر التنبيه ويختفي بشكل مفاجئ وبدون تأثير.
data-bs-dismiss="alert": السحر كله هنا. هذا الكود يخبر الجافاسكربت الخاص بالبوتستراب بأن هذا الزر وظيفته إغلاق/إخفاء العنصر الأب الذي يملك كلاس alert.

إظهار تنبيه ديناميكياً عبر JavaScript عند ضغط زر.

المعاينة

هذا المثال يعتمد على الجافاسكربت. قمنا بتعريف <div id="liveAlertPlaceholder"></div> ليكون المكان الذي سيظهر فيه التنبيه.
عندما يضغط المستخدم على الزر، نقوم بإنشاء عنصر div جديد في الجافاسكربت، نضع بداخله كود الـ Alert، ثم نلصقه داخل الـ Placeholder.
هذه الطريقة مفيدة جداً عند عرض رسالة للمستخدم بعد نجاح إرسال نموذج (Form) أو بعد حفظ بيانات في قاعدة البيانات بدون إعادة تحميل الصفحة.