Alertes, boites modales et notifications toast Bootstrap

Dans cette nouvelle leçon, nous allons voir comment créer et mettre en forme avec Bootstrap 3 composants informatifs incontournables que sont les boites d’alertes, boites modales et les notifications toast.

 

Les boites d’alertes Bootstrap

Les alertes Bootstrap sont des boites qui permettent d’afficher des informations contextualisées relatives à certaines actions de la part d’utilisateurs, comme par exemple lors du remplissage d’un formulaire.

Pour définir une alerte Bootstrap, on va ajouter une classe .alert à un conteneur générique comme un élément div. On va ensuite pouvoir changer la couleur des boites et des textes grâce aux classes .alert-{couleur-contextuelle}.

Si nos boites d’alerte contiennent des liens, il faudra ajouter une classe .alert-link à ceux-ci pour qu’ils soient de couleur similaire au reste de la boite.

See the Pen
Bootstrap 5.1.1
by Pierre (@pierregiraud)
on CodePen.

On va également pouvoir laisser la possibilité à nos utilisateurs de fermer une alerte pour la faire disparaitre en ajoutant un bouton avec une classe .close et un attribut data-dismiss="alert".

On ajoutera aussi des classes .alert-dismissible, .fade et .show pour positionner notre bouton et ajouter des effets lors de la disparition de l’alerte.

See the Pen
Bootstrap 5.1.2
by Pierre (@pierregiraud)
on CodePen.

 

Les boites modales

Les boites modales sont des boites de dialogue qui vont apparaitre devant le reste du contenu de la page et qui vont toujours rester visible même lors d’un défilement dans la page grâce à leur position : fixed.

Pour créer un modal, on va déjà devoir définir 3 conteneurs génériques imbriqués les uns dans les autres auxquels on va ajouter des classes .modal, .modal-dialog et .modal-content.

On va ensuite pouvoir découper notre fenêtre modale en trois parties avec .modal-header, .modal-body et .modal-footer.

See the Pen
Bootstrap 5.1.3
by Pierre (@pierregiraud)
on CodePen.

Dans le code ci-dessus, vous pouvez noter la présence d’un attribut tabindex. Cet attribut permet de définir si un élément peut capturer le focus et avec quelle priorité il doit le capturer dans le cas d’une navigation au clavier. Une valeur négative indique justement que l’élément peut capturer le focus mais ne peut pas être atteint via une navigation au clavier.

Vous pouvez noter également que lorsqu’un modal est très long (dans le cas par exemple d’une notice explicative ou de conditions générales d’utilisation), on peut rajouter une classe .modal-dialog-scrollable à l’élément portant la classe .modal-dialog afin d’ajouter une barre de défilement pour le corps de notre fenêtre modale.

 

Les notifications toast

Les notifications toast sont des notifications créées pour imiter le comportement des notifications push popularisées notamment par les OS mobile et les applications.

Pour créer une notification toast, on va utiliser une classe .toast pour définir le toast en soi et des classes .toast-header et .toast-body pour définir l’en tête et le corps de notre notification.

Par défaut, les notifications toast seront cachées. On va devoir les initialiser en utilisant jQuery. Pour cela, il va nous suffire de sélectionner notre élément toast et d’appeler la méthode toast().

Dans des conditions réelles, on voudra afficher ces notifications lors de certains évènements précis. Pour le moment, nous allons nous contenter d’afficher une notification lors du clic sur un bouton grâce au code suivant :

See the Pen
Bootstrap 5.1.4
by Pierre (@pierregiraud)
on CodePen.

Laisser un commentaire