La classe well et la classe d’alerte de Bootstrap

Placer le contenu à l'intérieur d’un well

Le composant well Bootstrap fournit un moyen rapide pour appliquer un effet d'incrustation simple à un élément.

Il sera très utile si vous voulez juste  placer certains contenus à l'intérieur d'une boîte pour le faire paraître comme différent du reste du contenu.

La classe .well ajoute une bordure arrondie autour d'un élément avec une couleur de fond gris et un rembourrage

Pour l'utiliser il suffit de placer le contenu dans un élément <div> et lui appliquez la classe .well , comme ceci :

<div class="well">Contenu dans un Well</div>

Contrôle de la taille du well

La taille du well peut être contrôlée grasse aux deux classes,  pour modifier la taille du well en ajoutant la classe .well-sm pour petites tailles ou classe .well-lg pour les grandes tailles,  par défaut, les wells sont de taille moyenne.

📋 Copier le code

<div class="well well-sm">petit Well</div>
<div class="well well-lg">grand Well</div>

Les alertes de Bootstrap

Bootstrap fournit un moyen facile de créer des messages d'alerte prédéfinis :

Les alertes sont créées avec la classe .alert , accompagné d'une des quatre classes contextuelle .alert-success, .alert-info, .alert-warning ou .alert-danger:

Exemple :     📋 Copier le code

<div class="alert alert-success">
  <strong> Succès! </strong> Ce message d'alerte indique une action réussie ou positive.
</div>
<div class="alert alert-info">
  <strong>Info!</strong> Ce message d'alerte indique un changement informatif neutre ou une action.
</div>
<div class="alert alert-warning">
  <strong> Avertissement!</strong> Ce message d'alerte indique un avertissement qui peut-être avoir besoin d'attention.
</div>
<div class="alert alert-danger">
  <strong>Danger!</strong> Ce message d'alerte indique une action dangereuse ou potentiellement négative.
</div>

Fermeture des alertes

Pour fermer le message d'alerte, ajoutez class="close" et data-dismiss="alert" à un lien ou un élément button :

Exemple :     📋 Copier le code

<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong> Succès! </strong> Ce message d'alerte indique une action réussie ou positive.
</div>

Afin d'améliorer l'accessibilité pour les personnes utilisant des lecteurs d'écran, vous devez inclure l’aria-label avec l’attribut «close» lors de la création d'un bouton de fermeture.

&times; (pour afficher x) est une entité HTML qui est l'icône préférée pour la fermer, plutôt que la lettre « x ».

chapitre précédent     chapitre suivant