Les messages d’information dans Bootstrap 3

Les classes d’emphase

Bootstrap 3 met à votre disposition plusieurs classes d’emphase pour générer des messages d’information basiques. Le tableau ci-dessous décrit les différentes classes d’emphase :

Classe Couleur
.text-muted Gris
.text-primary Bleu pâle
.text-success Vert
.text-info Bleu
.text-warning Orange
.text-danger Rouge

Créons à présent nos premiers messages d’information « basiques » :

Les messages d’information ont l’aspect (simple coloration du message) suivant :

Exemple des classes d’emphase - Bootstrap 3

Exemple des classes d’emphase – Bootstrap 3

Les bandeaux d’alerte contextuels

Pour donner un aspect professionnel et beaucoup plus ergonomique aux messages d’information, Bootstrap 3 met à votre disposition les bandeaux d’alerte contextuels.

a – Les bandeaux d’alerte simples

Pour créer d’alerte, il convent de faire appel à la classe .alert.Puis nous ajouterons à cette classe la sous classe désignant le contexte du message (information, danger,…). Bootstrap 3 mis à votre disposition quarte sous-classes :

Sous classe Couleur
.alert-success Vert
.alert-info Bleu
.alert-warning Orange
.alert-danger Rouge

Créons à présent nos premiers bandeaux d’alerte simples :

Les bandeaux d’alerte simple ont l’aspect suivant :

Exemple de bandeaux d’alerte simples - Bootstrap 3

Exemple de bandeaux d’alerte simples – Bootstrap 3

b – Les bandeaux d’alerte complexes

Nous avons vu dans l’exemple précédent que les bandeaux d’alerte simples ne contiennent que du texte. Mais il est parfois nécessaire d’ajouter du contenu HTML plus complexe. En plus, avec l’API JavaScript de Bootstrap 3, vous avez la possibilité de faire disparaitre un bandeau d’alerte en utilisant soit la fonction fadeOut() de jQuery. Celle-ci, peut être appelée de deux façons : en ajoutant un bouton en forme de croix en haut à droite du bandeau ou en utilisant la fonction ad hoc JavaScript alert().

Explication du code :

<div class="alert alert-dismissable alert-success"> : cette ligne permet de créer un bandeau d’alerte (classe .alert), que l’utilisateur peut faire disparaitre (classe .alert-dismissable), et que nous utiliserons la sous classe .alert-success pour définir l’aspect du message d’alerte.

<button type="button" data-dismiss="alert" aria-hidden="true">&times;</button> : création d’un bouton en forme de croix (&times;) en haut à droite du bandeau.

<p><button id="myButton" type="button">Fermer</button></p> : L’ajout du bouton, qui permet de fermer le bandeau.

Exemple de bandeau d'alerte complexe - Bootstrap 3

Exemple de bandeau d’alerte complexe – Bootstrap 3

Pour faire disparaire le bandeau d’alrte, cliquez soit en cliquant sur le bouton « Fermer », soit en cliquant sur la croix en haut à droite.

Laisser un commentaire