Sommaire

Les badges COMPOSANTS D’INTERFACE D’ADMINISTRATION:Badges

1. L’objectif

Les badges de Bootstrap permettent usuellement de mettre en évidence un compteur. Cela peut être un compteur d’articles, de mails, de fichiers... dans une interface d’administration d’un CMS par exemple.

Il suffit d’utiliser la classe .badge dans un <span>, avec la valeur numérique dans l’élément.

Utilisez le fichier Bootstrap-07-COMP-Admin/01-interface.html pour visualiser l’exemple.

2. Un simple badge

Voici un exemple simple :

<p>Nombre d’articles : <span class="badge">12</span></p>

Voilà l’affichage résultant :

images/C13-005.png

Voici la classe utilisée :

.badge { 
   display: inline-block; 
   min-width: 10px; 
   padding: 3px 7px; 
   font-size: 12px; 
   font-weight: bold; 
   line-height: 1; 
   color: #fff; 
   text-align: center; 
   white-space: nowrap; 
   vertical-align: baseline; 
   background-color: #999; 
   border-radius: 10px; 
}

3. Une mise en forme évoluée

Vous pouvez aussi appliquer une mise en forme plus évoluée dans un contexte plus général.

Dans cet exemple, nous plaçons nos badges dans une barre de navigation verticale et nous alignons à droite les badges.

Voici le code HTML utilisé pour cet exemple :

<ul class="nav nav-pills nav-stacked" style="max-width: ...