Insígnies

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

En aquesta pàgina

Exemples

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. A partir de la v5, les insígnies ja no tenen estils d'enfocament o de desplaçament per als enllaços.

Encapçalaments

Exemple d'encapçalamentNou

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

Botons

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 bg-secondary">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.

Posicionat

Utilitzeu les utilitats per modificar un .badgei col·loqueu-lo a la cantonada d'un enllaç o botó.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <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>

També podeu substituir la .badgeclasse per unes quantes utilitats més sense comptar per a un indicador més genèric.

<button type="button" class="btn btn-primary position-relative">
  Profile
  <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>

Colors de fons

Utilitzeu les nostres classes d'utilitat de fons per canviar ràpidament l'aspecte d'una insígnia. Tingueu en compte que quan feu servir el valor predeterminat de Bootstrap .bg-light, probablement necessitareu una utilitat de color de text com .text-darkper a un estil adequat. Això es deu al fet que les utilitats de fons no configuren res més que background-color.

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

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

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 del contingut en si (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .visually-hiddenclasse.

Insígnies de pastilles

Utilitzeu la .rounded-pillclasse d'utilitat per fer que les insígnies siguin més arrodonides amb una més gran border-radius.

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

<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

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