Guia de Componentes de Bootstrap

...

Badges

Documentación y ejemplos de insignias, nuestro componente de etiquetado y recuento pequeño.
Ejemplo
Las insignias se escalan para coincidir con el tamaño del elemento principal inmediato mediante el uso de emunidades y tamaños de fuente relativos .

Encabezado de ejemploNuevo

Encabezado de ejemploNuevo

Encabezado de ejemploNuevo

Encabezado de ejemploNuevo

Encabezado de ejemploNuevo
Encabezado de ejemploNuevo


Las insignias se pueden usar como parte de enlaces o botones para proporcionar un contador.

tenga en cuenta que, según cómo se utilicen, las insignias pueden resultar confusas para los usuarios de lectores de pantalla y tecnologías de asistencia similares. Si bien el estilo de las insignias proporciona una pista visual de su propósito, a estos usuarios simplemente se les presentará el contenido de la insignia. Dependiendo de la situación específica, estas insignias pueden parecer palabras o números adicionales aleatorios al final de una oración, enlace o botón.
A menos que el contexto sea claro (como en el ejemplo de “Notificaciones”, donde se entiende que el “4” es el número de notificaciones), considere incluir contexto adicional con un fragmento de texto adicional visualmente oculto.

Variaciones contextuales
Agregue cualquiera de las clases de modificadores mencionadas a continuación para cambiar la apariencia de una insignia.

Primary Secondary Success Danger Warning Info Light Dark

Insignias de pastillas
Utilice la .badge-pillclase de modificador para hacer que las insignias sean más redondeadas (con una border-radiushorizontal más grande y adicional padding). Útil si echas de menos las insignias de la v3. Primary Secondary Success Danger Warning Info Light Dark

Enlaces
El uso de las .badge-*clases contextuales en un elemento proporciona rápidamente insignias procesables con estados de desplazamiento y enfoque. Primero Segundo Sucesor peligro Warning Informacion Luz Dark