Bootstrap 4 Toast
ال Bootstrap Toast هو صندوق تنبيه يظهر فقط لبضع ثوانٍ عند حدوث شيء ما (أي عندما ينقر المستخدم على زر ، أو يرسل طلباً، وما إلى ذلك).
التاريخ
07 ديسمبر 2021
الدروس
34
المستوى
العامة
اللغة
انجليزي
المشاهدات
1000
المواضيع
6
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>