Sommaire

Les étiquettes

Les étiquettes vont nous permettre de mettre en évidence des éléments d’une interface dans des cadres colorés.

Il suffit tout simplement d’utiliser la classe .label dans l’élément de votre choix.

<p><span class="label">Premier</span></p>

Voici l’affichage obtenu :

images/C11-003.png

Par défaut la couleur du fond de l’étiquette est bleue. Voici les classes à utiliser pour changer cette couleur :

  • .secondary : gris,

  • .success : vert,

  • .alert : rouge,

  • .warning : orange.

Les exemples :

<p><span class="secondary label">Couleur grise</span>&nbsp; 
<span class="success label">Couleur verte</span>&nbsp; 
<span class="alert label">Couleur rouge</span>&nbsp; 
<span class="warning label">Couleur orange</span></p>

Vous pouvez aussi utiliser les icônes de la fonte Foundation Icon Font 3 :

<p> 
  <span class="alert label"><i class="fi-x-circle"></i> Attention</span>&nbsp; 
  <span class="warning label"><i class="fi-x"></i> Suppression</span>&nbsp; 
  <span class="label"><i class="fi-widget"></i> Information</span>&nbsp; 
  <span class="success label"><i class="fi-like"></i> Confirmation</span>  ...