Bootstrap JS Tostları
Tost CSS Sınıfları
Tost bileşeni, bir şey olduğunda (yani kullanıcı bir düğmeye tıkladığında, bir form gönderdiğinde vb.) yalnızca birkaç saniyeliğine gösterilen bir uyarı kutusu gibidir.
Tostlar hakkında bir eğitim için Bootstrap Tost Eğitimimizi okuyun .
| Class | Description | Example |
|---|---|---|
.toast |
Creates the toast | |
.toast-header |
Creates the toast header | |
.toast-body |
Creates the toast body |
JavaScript ile Etkinleştir
Tostlar jQuery ile başlatılmalıdır: belirtilen öğeyi seçin ve toast()yöntemi çağırın.
Örnek
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Tost Seçenekleri
Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-animation="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when showing and hiding the toast.
|
|
| autohide | boolean | true | Specifies whether to hide the toast by default | |
| delay | number | 500 | Specifies the number of milliseconds it will take to hide the toast once it is shown. |
Tost Yöntemleri
Aşağıdaki tablo, mevcut tüm tost yöntemlerini listeler.
| Method | Description | Try it |
|---|---|---|
| .toast(options) | Activates the toast with an option. See options above for valid values | |
| .toast("show") | Shows the toast | |
| .toast("hide") | Hides the toast | |
| .toast("dispose") | Hides and destroys the toast |
Tost Etkinlikleri
Aşağıdaki tablo, mevcut tüm tost olaylarını listeler.
| Event | Description | Try it |
|---|---|---|
| show.bs.toast | Occurs when the toast is about to be shown | |
| shown.bs.toast | Occurs when the toast is fully shown (after CSS transitions have completed) | |
| hide.bs.toast | Occurs when the toast is about to be hidden | |
| hidden.bs.toast | Occurs when the toast is fully hidden (after CSS transitions have completed) |