Bootstrap 4 Toast
Bootstrap 4 Toast
Komponen toast seperti kotak peringatan yang hanya ditampilkan selama beberapa detik ketika sesuatu terjadi (yaitu ketika pengguna mengklik tombol, mengirimkan formulir, dll.).
Cara Membuat Roti Panggang
Untuk membuat toast, gunakan .toastkelas, dan tambahkan a .toast-headerdan
.toast-bodydi dalamnya:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Catatan: Toast harus diinisialisasi dengan jQuery: pilih elemen yang ditentukan dan panggil toast()metodenya.
Kode berikut akan menampilkan semua "roti panggang" dalam dokumen:
Contoh
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Tampilkan dan Sembunyikan Toast
Roti panggang disembunyikan secara default. Gunakan data-autohide="false"
atribut untuk menampilkannya secara default. Untuk menutupnya, gunakan elemen <button> dan tambahkan data-dismiss="toast":
Contoh
<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>
Perhatikan mr-auto, ml-2dan mb-1kelas? Mereka digunakan untuk menambahkan margin tertentu. Anda akan mempelajari lebih lanjut tentang mereka di Bab Bootstrap 4 Utilitas .
Referensi Bootstrap Toast Lengkap
Untuk referensi lengkap tentang semua opsi, metode, dan acara roti panggang, buka Referensi Toast Bootstrap JS kami .