Insígnies

Documentació i exemples per a insígnies, el nostre petit recompte i component d'etiquetatge.

Exemple

Les insígnies s'escalen per coincidir amb la mida de l'element principal immediat mitjançant l'ús de la mida i emles unitats de tipus de lletra relatives.

Exemple d'encapçalamentNou

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

Les insígnies es poden utilitzar com a part d'enllaços o botons per proporcionar un comptador.

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

Tingueu en compte que, depenent de com s'utilitzin, les insígnies poden ser confuses per als usuaris de lectors de pantalla i tecnologies d'assistència similars. Tot i que l'estil de les insígnies proporciona una indicació visual sobre el seu propòsit, aquests usuaris simplement se'ls presentarà el contingut de la insígnia. Depenent de la situació específica, aquestes insígnies poden semblar paraules o números addicionals aleatoris al final d'una frase, un enllaç o un botó.

A menys que el context sigui clar (com passa amb l'exemple "Notificacions", on s'entén que el "4" és el nombre de notificacions), penseu a incloure context addicional amb un fragment de text addicional visualment amagat.

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

Variacions contextuals

Afegiu qualsevol de les classes modificadores esmentades a continuació per canviar l'aparença d'una insígnia.

primària Secundària Èxit Perill Avís Informació Llum Fosc

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

Transmetre significat a les tecnologies d'assistència

L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .sr-onlyclasse.

Insígnies de pastilles

Utilitzeu la .badge-pillclasse modificadora per fer que les insígnies siguin més arrodonides (amb una border-radiushoritzontal més gran i addicional padding). Útil si us perdeu les insígnies de la v3.

primària Secundària Èxit Perill Avís Informació Llum Fosc

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

Enllaços

.badge-*L'ús de les classes contextuals d'un <a>element proporciona ràpidament insígnies accionables amb estats de desplaçament i focus.

primària Secundària Èxit Perill Avís Informació Llum Fosc

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