Bootstrap JS Brindisi
Toast CSS Classi
Il componente Toast è come una finestra di avviso che viene mostrata solo per un paio di secondi quando accade qualcosa (cioè quando l'utente fa clic su un pulsante, invia un modulo, ecc.).
Per un tutorial sui brindisi, leggi il nostro tutorial sui brindisi di Bootstrap .
| Class | Description | Example |
|---|---|---|
.toast |
Creates the toast | |
.toast-header |
Creates the toast header | |
.toast-body |
Creates the toast body |
Attiva tramite JavaScript
I brindisi devono essere inizializzati con jQuery: seleziona l'elemento specificato e chiama il toast()metodo.
Esempio
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Opzioni per il brindisi
Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in 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. |
Metodi per il pane tostato
La tabella seguente elenca tutti i metodi di brindisi disponibili.
| 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 |
Eventi di brindisi
La tabella seguente elenca tutti gli eventi brindisi disponibili.
| 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) |