Badges

Documentazione è esempi per i badge, u nostru picculu conte è cumpunente di etichettatura.

Esempiu

I badges scalanu per currisponde à a dimensione di l'elementu primariu immediatu utilizendu dimensioni relative di fonti è emunità.

Titulu di esempiuNovu

<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 ponu esse aduprati cum'è parte di ligami o buttoni per furnisce un contatore.

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

Nota chì, secondu cumu si sò usati, i badge ponu esse cunfusi per l'utilizatori di lettori di schermu è tecnulugia d'assistenza simili. Mentre chì u stilu di badge furnisce una indicazione visuale in quantu à u so scopu, questi utilizatori seranu solu presentati cù u cuntenutu di u badge. Sicondu a situazione specifica, sti badges ponu parè parole o numeri supplementari casuali à a fine di una frase, ligame o buttone.

A menu chì u cuntestu hè chjaru (cum'è cù l'esempiu di "Notificazioni", induve hè capitu chì u "4" hè u numeru di notificazioni), cunsiderà cumprendi cuntestu supplementu cù un pezzu visualmente oculatu di testu supplementu.

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

Variazioni cuntestuali

Aghjunghjite qualcunu di e classi di modificatori quì sottu per cambià l'apparenza di un badge.

Primariu Sicundariu Successu Periculu Attenzione Info Luce Scuru

<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>

Trasmette u significatu à e tecnulugia assistive

Utilizà u culore per aghjunghje significatu solu furnisce una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore sia ovvia da u cuntenutu stessu (per esempiu, u testu visibile), o hè inclusa per mezu alternativu, cum'è testu addiziale oculatu cù a .sr-onlyclasse.

Badges di pillola

Aduprate a .badge-pillclassa di modificatore per fà badge più arrotondati (cù un border-radiushorizontale più grande è supplementu padding). Utile se vi mancate i badge da v3.

Primariu Sicundariu Successu Periculu Attenzione Info Luce Scuru

<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>

Ligami

Utilizà e .badge-*classi contextuale nantu à un <a>elementu furnisce rapidamente badge azzione cù stati di hover è focus.

Primariu Sicundariu Successu Periculu Attenzione Info Luce Scuru

<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>