Bootstrap 4 Toast
Bootstrap 4 Toast
Le composant toast est comme une boîte d'alerte qui ne s'affiche que pendant quelques secondes lorsque quelque chose se produit (c'est-à-dire lorsque l'utilisateur clique sur un bouton, soumet un formulaire, etc.).
Comment créer un toast
Pour créer un toast, utilisez la .toastclasse et ajoutez a .toast-headeret a
.toast-bodyà l'intérieur :
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Remarque : Les toasts doivent être initialisés avec jQuery : sélectionnez l'élément spécifié et appelez la toast()méthode.
Le code suivant affichera tous les "toasts" du document :
Exemple
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Afficher et masquer un toast
Les toasts sont masqués par défaut. Utilisez l' data-autohide="false"
attribut pour l'afficher par défaut. Pour le fermer, utilisez un élément <button> et ajoutez data-dismiss="toast":
Exemple
<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>
Remarquez les classes mr-auto, ml-2et ? mb-1Ils sont utilisés pour ajouter des marges spécifiques. Vous en apprendrez plus à leur sujet dans le chapitre Bootstrap 4 Utilities .
Référence complète de Bootstrap Toast
Pour une référence complète de toutes les options, méthodes et événements de toast, consultez notre Bootstrap JS Toast Reference .