Badges
Documentazione è esempi per i badge, u nostru picculu conte è cumpunente di etichettatura.
I badges scalanu per currisponde à a dimensione di l'elementu primariu immediatu utilizendu dimensioni relative di fonti è emunità.
<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>Aghjunghjite qualcunu di e classi di modificatori quì sottu per cambià l'apparenza di un badge.
<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.
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.
<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>Utilizà e .badge-*classi contextuale nantu à un <a>elementu furnisce rapidamente badge azzione cù stati di hover è focus.
<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>