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.

search |

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

Trafic Booster
hebergement web


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 :

La fonction chr, chr()

Retourne un caractère partir de son code ASCII

Crée une variable PHP à partir d'une valeur linéarisée">unserialize

 Crée une variable PHP à partir d'une valeur linéarisée

fonction print, print

Affiche une chaîne de caractères



Rentabilisez efficacement votre site

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