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.