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 :

  • .badge-primary : bleu.

  • .badge-secondary : gris.

  • .badge-success : vert.

  • .badge-danger : rouge.

  • .badge-warning : orangé.

  • .badge-info : bleu-vert.

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

  • .badge-dark : noir.

Voici le code utilisé :

<p>  
        Nibh Ornare <span class="badge badge-primary">Primary 
</span><br /> 
        Fusce Ridiculus <span class="badge badge-secondary"> 
Secondary</span><br /> 
        Fringilla Amet <span class="badge badge-success">Success 
</span><br /> 
        Vehicula Ipsum <span class="badge badge-danger">Danger 
</span><br /> 
        Vestibulum Sem <span class="badge badge-warning">Warning...
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
L'objectif
Suivant
Les alertes