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

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

<button type="button" class="btn btn-primary">
  Notifications <span class="badge 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.

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

<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

Usa as nosas clases de utilidade en segundo plano para cambiar rapidamente a aparencia dunha insignia. Teña en conta que ao usar o valor predeterminado de Bootstrap .bg-light, é probable que necesite unha utilidade de cor de texto, como .text-darkpara un estilo axeitado. Isto débese a que as utilidades en segundo plano non configuran nada máis que background-color.

Primaria Secundaria Éxito Perigo Aviso Información Luz Escuro

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

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

<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

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;