انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: الإشعارات العائمة Toasts في بوتستراب 5

Colored Compact Toasts الإشعارات الملونة المدمجة

أنشئ إشعارات عائمة غير حاجبة Toasts في Bootstrap 5.3 عبر واجهة جافاسكريبت البرمجية وحاويات التموضع والتكديس والألوان المدمجة ومهلة الاختفاء التلقائي وسمات ARIA القياسية.
3 صفوف تعليمية
بوتستراب 5
1 مشاهدة

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

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

للرسائل السريعة الواضحة (مثل «تم نسخ الرابط بنجاح» أو «تعذّر الاتصال بالشبكة»)، يمكنك الاستغناء عن شريط .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 لضمان وضوح أيقونة الإغلاق فوق الخلفيات الداكنة والملونة.

الصف 2 كود برمجي
HTML 
<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>
جرّب بنفسك
الصف 3 معاينة حية

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