Documentación y ejemplos para insignias, nuestro componente de etiquetado y recuento.
Ejemplos del componente Insignia
Las insignias se escalan para que coincidan con el tamaño del elemento padre inmediato usando el tamaño de fuente relativo y las unidades em. A partir de la versión 5, las insignias ya no tienen estilos focus o hover para los enlaces.
Títulos
Botones
Las insignias se pueden usar como parte de enlaces o botones para proporcionar un contador.
Ten en cuenta que, dependiendo de 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 sobre 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), considera incluir contexto adicional con una pieza de información adicional visualmente oculta.
Posicionado
Usa utilidades para modificar un .badge y posicionarlo en la esquina de un enlace o botón.
También puedes reemplazar la clase .badge con algunas utilidades más sin contar para un indicador más genérico.
Colores de fondo del componente
Agregado en v5.2.0
Establece un background-color con un color de primer plano contrastante con nuestros .text-bg-{color} ayudantes. Anteriormente era necesario emparejar manualmente tu elección de utilidades para diseñar .text-{color} y .bg-{color}, que aún puedes usar si lo prefieres.
Insignias de pastillas
Utiliza la clase de utilidad .rounded-pill para hacer insignias más redondeadas con un border-radius más grande.
Personalización del CSS del componente
Variables Sass del componente
Agregado en v5.2.0
Como parte del enfoque de variables CSS en evolución de Bootstrap, las insignias ahora usan variables CSS locales en .badge para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.
Indica la ubicación de la página actual dentro de una jerarquía de navegación que agrega automáticamente separadores mediante CSS.
Ejemplo del componente Breadcrumb
Usa una lista ordenada o desordenada con elementos de lista vinculados para crear una ruta de navegación con un estilo mínimo. Utiliza nuestras utilidades para agregar estilos adicionales según lo desees.
Divisores entre elementos del Breadcrumb
Los divisores se agregan automáticamente en CSS a través de ::before y content. Se pueden cambiar modificando una propiedad personalizada CSS local --bs-breadcrumb-divider, o mediante la variable Sass $breadcrumb-divider y $breadcrumb-divider-flipped para su contraparte RTL, si es necesario. Utilizamos de forma predeterminada nuestra variable Sass, que se establece como alternativa a la propiedad personalizada. De esta manera, obtienes un divisor global que puedes sobrescribir sin tener que volver a compilar CSS en ningún momento.
Al modificar a través de Sass, se requiere la función quote para generar las comillas alrededor de una cadena. Por ejemplo, usando > como divisor, puedes usar esto:
También es posible usar un icono SVG incrustado. Aplícalo a través de nuestra propiedad personalizada CSS o usa la variable Sass.
También puedes eliminar la configuración del divisor --bs-breadcrumb-divider: ''; (las cadenas vacías en las propiedades personalizadas de CSS cuentan como un valor), o estableciendo la variable Sass en $breadcrumb-divider: none;.
Accesibilidad del componente Breadcrumb
Dado que las breadcrumbs proporcionan navegación, es una buena idea agregar una etiqueta significativa como aria-label="breadcrumb" para describir el tipo de navegación proporcionada en el elemento <nav>, además de aplicar un aria-current="page" al último elemento del conjunto para indicar que representa la página actual.
Como parte del enfoque de variables CSS en evolución de Bootstrap, las rutas de navegación ahora usan variables CSS locales en .breadcrumb para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.