Insignias

Documentación e exemplos de distintivos, o noso pequeno reconto e compoñente de etiquetado.

Nesta páxina

Exemplos

As insignias escalan para que coincidan co tamaño do elemento principal inmediato utilizando emunidades e tamaños de fonte relativos. A partir da versión 5, as insignias xa non teñen estilos de foco nin de paso para as ligazóns.

Títulos

Exemplo de títuloNovo

html

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

Botóns

As insignias pódense usar como parte de ligazóns ou botóns para proporcionar un contador.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

Teña en conta que, dependendo de como se utilicen, as insignias poden resultar confusas para os usuarios de lectores de pantalla e tecnoloxías auxiliares similares. Aínda que o estilo das insignias proporciona unha indicación visual sobre o seu propósito, a estes usuarios simplemente se lles presentará o contido da insignia. Dependendo da situación específica, estas insignias poden parecer palabras ou números adicionais aleatorios ao final dunha frase, ligazón ou botón.

A menos que o contexto estea claro (como no exemplo de "Notificacións", onde se entende que o "4" é o número de notificacións), considere incluír contexto adicional cunha peza de texto adicional visualmente oculta.

Posicionado

Use utilidades para modificar un .badgee colócao na esquina dunha ligazón ou botón.

html

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

Tamén pode substituír a .badgeclase por algunhas utilidades máis sen contar cun indicador máis xenérico.

html

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

Cores de fondo

Engadido na v5.2.0

Establece un background-colorprimeiro plano contrastante colorcos nosos .text-bg-{color}axudantes . Anteriormente, era necesario emparellar manualmente as utilidades que prefires .text-{color}e .bg-{color}para o estilo, que aínda podes usar se o prefires.

Primaria Secundaria Éxito Perigo Aviso Información Luz Escuro

html

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

Transmitir significado ás tecnoloxías de asistencia

Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .visually-hiddenclase.

Insignias de pílulas

Usa a .rounded-pillclase de utilidade para facer que as insignias sexan máis redondeadas cun máis grande border-radius.

Primaria Secundaria Éxito Perigo Aviso Información Luz Escuro

html

<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

Variables

Engadido na v5.2.0

Como parte do enfoque de variables CSS en evolución de Bootstrap, as insignias agora usan variables CSS locais activadas .badgepara mellorar a personalización en tempo real. Os valores para as variables CSS establécense a través de Sass, polo que a personalización de Sass tamén se admite.

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