انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 31
دورة Bootstrap

Bootstrap 4 Toast

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
2
الأمثلة
2
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
1,986
محتوى الدرس
في هذا الدرس 2تصفّح المواضيع

Bootstrap 4 Toast

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

طريقة انشاء ال Toast

  • قم بانشاء div وبداخلة class attribute متبوعاً ب قيمة toast 
  • قم بانشاء div اخر بداخل ال toast ثم قم باضافة له class attribute متبوعاً ب  toast-header
  • قم بانشاء div اخر بداخل ال toast ثم قم باضافة له class attribute متبوعاً ب  toast-body
  • قم باستدعاء ال jquery method الخاصة ب toast
HTML 
<script>
$(document).ready(function(){
  $('.toast').toast('show');
});
</script>
جرّب بنفسك

Show and Hide a Toast

ال 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>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…