oujood.com

La classe well et la classe d’alerte de Bootstrap

Le composant well Bootstrap fournit un moyen rapide pour appliquer un effet d'incrustation simple à un élément...Bootstrap fournit un moyen facile de créer des messages d'alerte prédéfinis
Dans ce tutoriel, vous apprendrez comment utiliser composant well 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.

Sélectionner 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:

Sélectionner 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 :

Sélectionner 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

Par carabde 25 decembre 2015

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

fonction date_sunrise

Retourne l'heure de levé du soleil pour un jour et un endroit donnés

traitement des espaces de noms

Traitement des espaces de noms

Balise étiquette label

Définit une étiquette pour un élément


Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer