Bootstrap - Toasts: Un Guide Amical pour les Débutants

Salut là, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde merveilleux des Toasts de Bootstrap. Ne vous inquiétez pas si vous n'en avez jamais entendu parler auparavant - d'ici la fin de ce tutoriel, vous serez un pro du toasting ! ?

Qu'est-ce que les Toasts Bootstrap ?

Avant de rentrer dans le vif du sujet, parlons de ce que sont les Toasts. Imaginez que vous utilisez une application mobile, et soudain une petite notification apparaît en bas de votre écran. C'est essentiellement ce qu'est un Toast dans le développement web ! Il s'agit d'une notification légère conçue pour imiter les notifications push que nous voyons sur les appareils mobiles.

Toast de Base

Commençons par un Toast de base. Voici à quoi il ressemble en code :

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>Il y a 11 minutes</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
</div>
<div class="toast-body">
Bonjour, monde ! Voici un message Toast.
</div>
</div>

Reprenons cela :

• Le div externe avec la classe toast est notre conteneur principal.
• À l'intérieur, nous avons un toast-header et un toast-body.
• L'en-tête contient généralement une image, un titre, un horodatage et un bouton de fermeture.
• Le corps est où va notre message principal.

Toast Dynamique

Maintenant, faisons vivre notre Toast ! Pour cela, nous avons besoin un peu de JavaScript :

<button type="button" class="btn btn-primary" id="liveToastBtn">Afficher le toast dynamique</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>Il y a 11 minutes</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
</div>
<div class="toast-body">
Bonjour, monde ! Voici un message de toast dynamique.
</div>
</div>
</div>

<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
</script>

Ici, nous avons ajouté un bouton qui, lorsque vous cliquez dessus, affichera notre Toast. Le JavaScript en bas écoute le clic et puis affiche le Toast.

Toast Translucide

Vous voulez rendre votre Toast un peu transparent ? Ajoutez simplement la classe bg-light :

<div class="toast bg-light" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>Il y a 11 minutes</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
</div>
<div class="toast-body">
Bonjour, monde ! Voici un toast translucide.
</div>
</div>

Empilage de Toasts

Que faire si vous souhaitez afficher plusieurs Toasts ? Pas de problème ! Bootstrap les empile proprement :

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>À l'instant</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
</div>
<div class="toast-body">
Voyez ? Juste comme ça.
</div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small  Il y a 2 secondes</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
</div>
<div class="toast-body">
Attention, les toasts s'empilent automatiquement
</div>
</div>
</div>

Contenu Personnalisé

Les Toasts ne se limitent pas sadece au texte. Vous pouvez ajouter n'importe quel contenu HTML que vous aimez :

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Bonjour, monde ! Voici un message de toast.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Prendre une action</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Fermer</button>
</div>
</div>
</div>

Ici, nous avons ajouté des boutons à notre corps de Toast. Soyez créatif !

Thèmes de Couleur

Les Toasts peuvent venir en différentes couleurs pour correspondre au thème de votre site ou pour indiquer différents types de messages :

<div class="toast bg-primary text-white" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>Il y a 11 minutes</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
</div>
<div class="toast-body">
Bonjour, monde ! Voici un toast primaire.
</div>
</div>

Vous pouvez remplacer bg-primary par bg-success, bg-danger, bg-warning, etc.

Placement des Toasts

Les Toasts peuvent être placés n'importe où sur votre page. Voici comment les placer dans le coin supérieur droit :

<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Votre toast ici -->
</div>
</div>

Accessibilité

L'accessibilité est cruciale ! Incluez toujours les attributs role="alert" et aria-live="assertive" pour vous assurer que les lecteurs d'écran peuvent annoncer vos Toasts correctement.

Voici un tableau résumant les méthodes clés des Toasts :

Méthode	Description
show()	Affiche le Toast
hide()	Cache le Toast
dispose()	Cache le Toast et le retire du DOM

Et c'est tout ! Vous êtes maintenant un maître du Toast. Souvenez-vous, la pratique rend parfait, donc essayez d'intégrer ces fonctionnalités dans votre prochain projet. Bon codage ! ?

Credits: Image by storyset