Insignias
Documentación e exemplos de distintivos, o noso pequeno reconto e compoñente de etiquetado.
Exemplos
As insignias escalan para que coincidan co tamaño do elemento pai inmediato utilizando em
unidades 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
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 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 .badge
e 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 .badge
clase 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-dark
para un estilo axeitado. Isto débese a que as utilidades en segundo plano non configuran nada máis que background-color
.
<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-hidden
clase.
Insignias de pílulas
Usa a .rounded-pill
clase de utilidade para facer que as insignias sexan máis redondeadas cun máis grande border-radius
.
<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;