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