Badges
Documentation et exemples pour les badges, notre composant petit comptage et étiquetage.
Exaemples
Les badges sont mis à l'échelle pour correspondre à la taille de l'élément parent immédiat en utilisant une taille de police et em des unités relatives. À partir de la v5, les badges n'ont plus de styles de focus ou de survol pour les liens.
Headings
Exemple de titre Nouveau
Exemple de titre Nouveau
Exemple de titre Nouveau
Exemple de titre Nouveau
Exemple de titre Nouveau
Exemple de titre Nouveau
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>Boutons
Les badges peuvent être utilisés dans le cadre de liens ou de boutons pour fournir un compteur.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>Notez que selon la façon dont ils sont utilisés, les badges peuvent prêter à confusion pour les utilisateurs de lecteurs d'écran et de technologies d'assistance similaires. Alors que le style des badges fournit une indication visuelle de leur objectif, ces utilisateurs verront simplement le contenu du badge. Selon la situation spécifique, ces badges peuvent ressembler à des mots ou des chiffres supplémentaires aléatoires à la fin d'une phrase, d'un lien ou d'un bouton.
À moins que le contexte ne soit clair (comme dans l'exemple "Notifications", où il est entendu que le "4" est le nombre de notifications), envisagez d'inclure un contexte supplémentaire avec un morceau de texte supplémentaire masqué visuellement.
Positionné
Utilisez des utilitaires pour modifier un .badge et le positionner dans le coin d'un lien ou d'un bouton.
<button type="button" class="btn btn-primary position-relative">
boîte de réception
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>Vous pouvez également remplacer la .badge classe par quelques utilitaires supplémentaires sans compter pour un indicateur plus générique.
<button type="button" class="btn btn-primary position-relative">
Profil
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>Couleurs de fond
Utilisez nos classes utilitaires d'arrière-plan pour modifier rapidement l'apparence d'un badge. Veuillez noter que lorsque vous utilisez la valeur par défaut de Bootstrap .bg-light, vous aurez probablement besoin d'un utilitaire de couleur de texte, comme .text-dark pour un style approprié. En effet, les utilitaires d'arrière-plan ne définissent rien d'autre que background-color.
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>Donner du sens aux technologies d'assistance
L'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations indiquées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par des moyens alternatifs, tels que du texte supplémentaire masqué avec la .visually-hidden classe.
Badges de pilule
Utilisez la .rounded-pill classe utilitaire pour rendre les badges plus arrondis avec un plus grand border-radius.
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>Sass
Variables
$badge-font-size: .75em;
$badge-font-weight: $font-weight-bold;
$badge-color: $white;
$badge-padding-y: .35em;
$badge-padding-x: .65em;
$badge-border-radius: $border-radius;