Distintivi

Documentazione ed esempi per badge, il nostro piccolo conteggio e componente di etichettatura.

Esempio

I badge vengono ridimensionati in base alle dimensioni dell'elemento padre immediato utilizzando le dimensioni e emle unità del carattere relative.

Esempio di intestazioneNuovo

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

I badge possono essere utilizzati come parte di collegamenti o pulsanti per fornire un contatore.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Tieni presente che, a seconda di come vengono utilizzati, i badge possono creare confusione per gli utenti di lettori di schermo e tecnologie assistive simili. Mentre lo stile dei badge fornisce un indizio visivo del loro scopo, a questi utenti verrà semplicemente presentato il contenuto del badge. A seconda della situazione specifica, questi badge possono sembrare parole o numeri aggiuntivi casuali alla fine di una frase, un collegamento o un pulsante.

A meno che il contesto non sia chiaro (come con l'esempio "Notifiche", in cui si comprende che il "4" è il numero di notifiche), considerare di includere un contesto aggiuntivo con un pezzo di testo aggiuntivo visivamente nascosto.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Variazioni contestuali

Aggiungi una delle classi di modificatori menzionate di seguito per modificare l'aspetto di un badge.

Primario Secondario Successo Pericolo Avvertimento Informazioni Luce Scuro

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Trasmettere significato alle tecnologie assistive

L'uso del colore per aggiungere significato fornisce solo un'indicazione visiva, che non verrà trasmessa agli utenti di tecnologie assistive, come i lettori di schermo. Assicurati che le informazioni denotate dal colore siano ovvie dal contenuto stesso (ad esempio il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .sr-onlyclasse.

Distintivi per pillole

Usa la .badge-pillclasse del modificatore per rendere i badge più arrotondati (con un border-radiusorizzontale più grande e aggiuntivo padding). Utile se ti mancano i badge della v3.

Primario Secondario Successo Pericolo Avvertimento Informazioni Luce Scuro

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Collegamenti

.badge-*L'utilizzo delle classi contestuali su un <a>elemento fornisce rapidamente badge utilizzabili con stati di passaggio del mouse e focus.

Primario Secondario Successo Pericolo Avvertimento Informazioni Luce Scuro

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>