Show and Hide a Toast

ال Bootstrap Toast هو صندوق تنبيه يظهر فقط لبضع ثوانٍ عند حدوث شيء ما (أي عندما ينقر المستخدم على زر ، أو يرسل طلباً، وما إلى ذلك).

1 صفوف تعليمية

Bootstrap

1,986 مشاهدة

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

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

ال Toast في الوضع الافتراضي يختفي بعد بضع ثوان استخدم ال data-autohide attribute لاظهارة لاغلاقه استخدم button مع data-dismiss attribute

HTML

<div class="toast" data-autohide="false">
  <div class="toast-header">
    <strong class="mr-auto text-primary">Toast Header</strong>
    <small class="text-muted">5 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

جرّب بنفسك

Show and Hide a Toast

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

جميع فقرات هذا الدرس (Bootstrap 4 Toast)