Bootstrap 4 Brindisi
Bootstrap 4 Brindisi
Il componente brindisi è 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.).
Come creare un brindisi
Per creare un brindisi, usa la .toastclasse e aggiungi a .toast-headere a
al suo .toast-bodyinterno:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Nota: i brindisi devono essere inizializzati con jQuery: seleziona l'elemento specificato e chiama il toast()metodo.
Il codice seguente mostrerà tutti i "brindisi" nel documento:
Esempio
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Mostra e nascondi un brindisi
I brindisi sono nascosti per impostazione predefinita. Usa l' data-autohide="false"
attributo per mostrarlo per impostazione predefinita. Per chiuderlo, usa un elemento <button> e aggiungi data-dismiss="toast":
Esempio
<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>
Notare il mr-auto, ml-2e le mb-1classi? Sono usati per aggiungere margini specifici. Imparerai di più su di loro nel capitolo Utilità di Bootstrap 4 .
Riferimento completo di Bootstrap Toast
Per un riferimento completo di tutte le opzioni, i metodi e gli eventi del brindisi, vai al nostro Bootstrap JS Toast Reference .