BS4 toast xabarlar
Bootstrap 4 toast xabarlari
Toast komponenti ogohlantirish oynasiga o‘xshaydi, lekin u biror hodisa yuz berganda (masalan, foydalanuvchi tugmani bosganda, formani yuborganda va h.k.) atigi bir necha soniya ko‘rsatiladi.
Toast qanday yaratiladi
Toast yaratish uchun .toast klassidan foydalaning va uning ichiga .toast-header hamda .toast-body qo‘shing:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Eslatma: Toastlarni jQuery yordamida ishga tushirish (initsializatsiya qilish) kerak: kerakli elementni tanlang va toast() metodini chaqiring.
Quyidagi kod hujjatdagi barcha "toast"larni ko‘rsatadi:
Misol
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
O‘zingiz sinab ko‘ring »
Toastni ko‘rsatish va yashirish
Toastlar standart holatda yashirin bo‘ladi. Uni standart holatda ko‘rsatish uchun data-autohide="false" atributidan foydalaning. Uni yopish uchun <button> elementidan foydalaning va unga data-dismiss="toast" ni qo‘shing:
Misol
<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>
O‘zingiz sinab ko‘ring »
mr-auto, ml-2 va mb-1 klasslariga e’tibor berdingizmi? Ular muayyan tashqi chekinishlarni (margin) qo‘shish uchun ishlatiladi. Ular haqida Bootstrap 4 yordamchi klasslar bobida batafsil bilib olasiz.
Bootstrap Toast bo‘yicha to‘liq ma’lumotnoma
Barcha toast parametrlari, metodlari va hodisalari bo‘yicha to‘liq ma’lumotnoma uchun Bootstrap JS Toast ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!