Bootstrap

Bootstrap 4 Toast

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

التاريخ

07 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

865

المواضيع

6
الشروحات chevron_left Bootstrap 4 Toast chevron_left Bootstrap

Bootstrap 4 Toast

</> Bootstrap 4 Toast

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

Toast Header
Some text inside the toast body

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

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

</> Show and Hide a Toast

ال Toast في الوضع الافتراضي يختفي بعد بضع ثوان استخدم ال data-autohide attribute لاظهارة لاغلاقه استخدم button مع data-dismiss attribute 
<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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.