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ítuloNovo
Exemplo de títuloNovo
Exemplo de títuloNovo
Exemplo de títuloNovo
Exemplo de títuloNovo
Exemplo de títuloNovo
<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.
<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.
<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>Ligazóns
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>