Sommaire

Les badges

Les badges vont être utiles dans les interfaces des sites web pour mettre en évidence une numérotation avec des chiffres, avec des lettres ou avec des icônes.

Dans le contexte que vous souhaitez, utilisez simplement la classe .badge.

Voici des exemples tout simples :

<p>Le premier : <span class="badge">1</span>.</p> 
<p>Le deuxième : <span class="badge">2</span>.</p> 
<p>Le troisième : <span class="badge">C</span>.</p> 
<p>Le quatrième : <span class="badge">D</span>.</p>

Le fichier de cet exemple à télécharger est Chapitre 11 / 11-medias-b.html.

Voici l’affichage obtenu :

images/C11-001.png

Voici le style CSS utilisé :

.badge { 
  display: inline-block; 
  padding: 0.3em; 
  min-width: 2.1em; 
  font-size: 0.6rem; 
  text-align: center; 
  border-radius: 50%; 
  background: #2199e8; 
  color: #fefefe; 
}

Vous pouvez choisir la couleur de remplissage du badge en plaçant les classes suivantes dans l’élément <span> :

  • .secondary : gris,

  • .success : vert,

  • .alert : rouge,

  • .warning : orange.

Exemple avec la couleur rouge :

<p>Le premier : <span class="badge alert">1</span>.</p>

Voici les propriétés utilisées par la classe .alert :

.badge.alert { 
  background: #ec5840; 
  color: #fefefe;  ...