Source

Insignias

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

Exemplo

As insignias escalan para que coincidan co tamaño do elemento pai inmediato utilizando emunidades e tamaños de fonte relativos.

Exemplo de título Novo
Exemplo de título Novo
Exemplo de título Novo
Exemplo de título Novo
Exemplo de título Novo
Exemplo de título Novo
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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 badge-light">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.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Variacións contextuais

Engade calquera das clases de modificadores mencionadas a continuación para cambiar a aparencia dunha insignia.

Primaria Secundaria Éxito Perigo Aviso Información Luz Escuro
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-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 .sr-onlyclase.

Insignias de pílulas

Usa a .badge-pillclase modificadora para facer que as insignias sexan máis redondeadas (cunha border-radiushorizontal máis grande e adicional padding). Útil se perdes as insignias da v3.

Primaria Secundaria Éxito Perigo Aviso Información Luz Escuro
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

O uso das clases contextuais .badge-*nun <a>elemento proporciona rapidamente distintivos actuables con estados de paso e foco.

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