Bootstrap 4 توست
Bootstrap 4 توست
يشبه مكون التوست صندوق تنبيه يظهر فقط لبضع ثوانٍ عند حدوث شيء ما (على سبيل المثال ، عندما ينقر المستخدم على زر ، أو يرسل نموذجًا ، وما إلى ذلك).
رأس نخب
منذ 5 دقائق
بعض النصوص داخل جسم الخبز المحمص
كيف تصنع نخب
لإنشاء نخب ، استخدم .toastالفصل ، وأضف .toast-headera
.toast-bodyوداخله:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
ملاحظة: يجب أن تتم تهيئة الخبز المحمص باستخدام jQuery: حدد العنصر المحدد واستدعاء toast()الطريقة.
سيُظهر الرمز التالي جميع "الخبز المحمص" في المستند:
مثال
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
إظهار وإخفاء الخبز المحمص
يتم إخفاء الخبز المحمص افتراضيًا. استخدم data-autohide="false"
السمة لإظهارها بشكل افتراضي. لإغلاقه ، استخدم عنصر <button> وأضف data-dismiss="toast":
مثال
<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>
لاحظ mr-autoو ml-2الطبقات mb-1؟ يتم استخدامها لإضافة هوامش محددة. سوف تتعلم المزيد عنها في Bootstrap 4 Utilities Chapter .
إكمال مرجع Bootstrap Toast
للحصول على مرجع كامل لجميع خيارات التوست والأساليب والأحداث ، انتقل إلى مرجع Bootstrap JS Toast .