UN griller est comme une notification push ou une sorte de boîte d'alerte qui apparaît sur un écran pendant quelques secondes lorsque une action est effectuée et disparaît automatiquement après 5 secondes. Les toasts sont construits à l'aide de Flexbox, ce qui signifie que vous pouvez les aligner et les positionner facilement comme exigence.

Cet article est conçu pour vous donner les connaissances sur

• Création de toast
• Positionnement du toast
• Toast empilé
• Attributs de données pour le toast

Création de toast

Pour créer un toast, prenez deux divs avec la classe .toast-toast, .Toast-corps et envelopper eux à l'intérieur d'un avec la classe .griller, Donnez également un identifiant à cette div. Puis utilisez-le identifiant Pour connecter un bouton avec un pain grillé qui déclenchera le pain grillé.

Code

Toast de base

<Griller

Toast

Cet article concerne les toasts Bootstrap 5.

C'est ainsi qu'un toast de base est créé.

Positionner le toast

Pour positionner un toast n'importe où sur un écran, vous pouvez simplement utiliser les propriétés de positionnement CSS pour afficher votre toast n'importe où sur un écran.

Code

Toast

Cet article concerne les toasts Bootstrap 5.

Comme vous le voyez dans l'exemple ci-dessus, j'ai placé mon toast dans le coin inférieur droit en utilisant CSS en ligne.

Toasts empilés

Dans Bootstrap 5, vous pouvez également empiler les toasts s'il y a plus d'un toast. Pour empiler un toast simplement

Ajouter plusieurs toasts en un seul Et donnez la position en fonction de votre choix.

Code

Toast

Cet article concerne les toasts Bootstrap 5.

Toast

Cet article concerne les toasts Bootstrap 5.

C'est ainsi que vous empilez les toasts.

Attributs de données pour le toast

Si vous ne souhaitez pas cacher automatiquement votre toast, utilisez Data-AutoHide = "False" Attribut avec .classe de toast et si vous voulez que votre toast reste plus longtemps, utilisez Data-Delay = "Value in milliseconds" Attribut comme 3000 = 3sec. Par défaut, la valeur du retard est de 1000 millisecondes, mais vous pouvez modifier en utilisant l'attribut Data-Delay.

Code

Toast

Cet article concerne les toasts Bootstrap 5.

Toast

Cet article concerne les toasts Bootstrap 5.

Comme vous le voyez clairement la différence dans l'exemple ci-dessus, le premier toast se cache automatiquement après 3.5 secondes, tandis que le deuxième toast reste dû à Data-AutoHide = ”False” Attribut.

Conclusion

Les toasts sont créés en utilisant un avec .classe de toast, Puis envelopper .Toast-Header Div et .Toast-Body Div à l'intérieur .Toast Div. Pour ouvrir un toast, vous pouvez utiliser .montrer classe avec .classe de toast ou vous pouvez écrire un code JavaScript pour l'ouvrir en donnant identifiant au .classe de toast.Toasts sont cachés par défaut, c'est pourquoi nous utilisons .classe de spectacle.