Les badges COMPOSANTS D’INTERFACE:Badges

1. L’objectif BADGES:Insérer

Les badges de Bootstrap permettent de mettre en évidence des mots importants, les liens notables, des compteurs divers. Il suffit d’utiliser la classe .badge dans un élément <span> ou <a> par exemple. Une deuxième classe dédiée va permettre de colorer ce badge.

Le dossier à télécharger pour cet exemple est nommé 08-Interface-01.

2. Les badges colorés BADGES:Colorés

Dans ce premier exemple, nous allons placer des mots dans des badges colorés. Les classes qui permettent de colorer les badges et les textes sont les suivantes :

  • .bg-primary : bleu.

  • .bg-secondary : gris.

  • .bg-success : vert.

  • .bg-danger : rouge.

  • .bg-warning : orangé.

  • .bg-info : bleu-vert.

  • .bg-light: gris très clair.

  • .bg-dark : noir.

Voici le code utilisé :

<p>  
    Nibh Ornare <span class="badge bg-primary">Primary</span><br /> 
    Fusce Ridiculus <span class="badge bg-secondary">Secondary</span><br /> 
    Fringilla Amet <span class="badge bg-success">Success</span><br /> 
    Vehicula Ipsum <span class="badge bg-danger">Danger</span><br /> 
    Vestibulum Sem <span class="badge bg-warning">Warning</span><br /> 
    Mollis...
couv_OW5BOO.png

Découvrez 

le livre :

Aussi inclus dans nos :

Précédent
L'objectif
Suivant
Les alertes