Insígnies
Documentació i exemples per a insígnies, el nostre petit recompte i component d'etiquetatge.
Exemples
Les insígnies s'escalen per coincidir amb la mida de l'element principal immediat mitjançant l'ús de la mida i em
les 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
Exemple d'encapçalamentNou
Exemple d'encapçalamentNou
Exemple d'encapçalamentNou
Exemple d'encapçalamentNou
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 .badge
i 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 .badge
classe 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-dark
per a un estil adequat. Això es deu al fet que les utilitats de fons no configuren res més que background-color
.
<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-hidden
classe.
Insígnies de pastilles
Utilitzeu la .rounded-pill
classe d'utilitat per fer que les insígnies siguin més arrodonides amb una més gran border-radius
.
<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;