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

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

Estableix un background-colorprimer pla contrastant coloramb els nostres .text-bg-{color}ajudants . Anteriorment, calia emparellar manualment la vostra elecció .text-{color}i les .bg-{color}utilitats per a l'estil, que encara podeu utilitzar si ho preferiu.

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

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.

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Les variables

Com a part de l'enfocament de variables CSS en evolució de Bootstrap, les insígnies ara utilitzen variables CSS locals activades per .badgea una personalització millorada en temps real. Els valors de les variables CSS s'estableixen mitjançant Sass, de manera que la personalització de Sass encara és compatible.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};
  

Variables Sass

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