UN pane abbrustolito è come una notifica push o una specie di scatola di allerta che appare su uno schermo per alcuni secondi quando viene eseguita qualche azione e scompare automaticamente dopo 5 secondi. I toast sono costruiti utilizzando Flexbox, il che significa che puoi allinearli e posizionarli facilmente come requisito.

Questo articolo è progettato per darti la conoscenza di

• Creare toast
• Posizionamento del toast
• Toast impilato
• Attributi di dati per il toast

Creare toast

Per creare un brindisi, prendi due div con la classe .toast-header, .Trima-corpo e avvolgere loro dentro a con la classe .pane abbrustolito, Dai anche un unico id a questo div. Quindi usa questo id per collegare un pulsante con toast che attiverà il brindisi.

Codice

Toast di base

<Pane abbrustolito

Tostate di toast

Questo articolo parla di bootstrap 5 brindisi.

Ecco come viene creato un toast di base.

Posizionando il toast

Per posizionare un toast ovunque su uno schermo, puoi semplicemente utilizzare le proprietà di posizionamento CSS per mostrare il brindisi ovunque su uno schermo.

Codice

Tostate di toast

Questo articolo parla di bootstrap 5 brindisi.

Come vedi nell'esempio sopra ho messo il mio toast nell'angolo in basso a destra usando CSS in linea.

Toast impilati

In Bootstrap 5, puoi anche impilare i brindisi se ci sono più di un toast. Per impilare un brindisi semplicemente

Aggiungi più brindisi in un singolo e dai posizione secondo la tua scelta.

Codice

Tostate di toast

Questo articolo parla di bootstrap 5 brindisi.

Tostate di toast

Questo articolo parla di bootstrap 5 brindisi.

Ecco come impilare i toast.

Attributi di dati per toast

Se non vuoi nascondere automaticamente il toast, usa Attributo Data-Autohide = "FALSE" con .brindisi della classe e se vuoi che il tuo tosino rimanga più a lungo, usa Data-Delay = "Valore in Miliseconds" Attributo come 3000 = 3 secondi. Per impostazione predefinita, il valore del ritardo è di 1000 millisecondi ma è possibile modificare utilizzando l'attributo di dati dati.

Codice

Tostate di toast

Questo articolo parla di bootstrap 5 brindisi.

Tostate di toast

Questo articolo parla di bootstrap 5 brindisi.

Come vedi chiaramente la differenza nell'esempio sopra, il primo toast si nasconde automaticamente dopo 3.5 secondi, mentre il secondo toast rimane dovuto a Data-Autohide = "false".

Conclusione

I brindisi vengono creati usando un file con .classe toast, Quindi avvolgere .brindisi di div E .brindisi del corpo all'interno .Toast Div. Per aprire un brindisi che puoi usare .spettacolo classe con .classe toast Oppure puoi scrivere un codice JavaScript per aprirlo dando id al .classe toast.Toast sono nascosti per impostazione predefinita ecco perché usiamo .Mostra classe.