Colores
Transmita significado colorcon un puñado de clases de utilidad de color. También incluye soporte para diseñar enlaces con estados de desplazamiento.
Colores
Colorea el texto con utilidades de color. Si desea colorear los enlaces, puede usar las .link-*clases auxiliares que tienen :hovery :focusestados.
.texto-primario
.texto-secundario
.texto-éxito
.text-peligro
.text-advertencia
.text-info
.texto-luz
.text-oscuro
.texto-cuerpo
.texto-silenciado
.texto-blanco
.texto-negro-50
.texto-blanco-50
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>.text-opacity-*utilidades y variables CSS para utilidades de texto,
.text-black-50y
.text-white-50están obsoletas a partir de v5.1.0. Se eliminarán en v6.0.0.
Transmitir significado a las tecnologías de asistencia
El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrese de que la información indicada por el color sea obvia a partir del contenido mismo (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la .visually-hiddenclase.
Opacidad
Agregado en v5.1.0
A partir de v5.1.0, las utilidades de color de texto se generan con Sass usando variables CSS. Esto permite cambios de color en tiempo real sin compilación y cambios dinámicos de transparencia alfa.
Cómo funciona
Considere nuestra .text-primaryutilidad predeterminada.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Usamos una versión RGB de nuestra variable CSS --bs-primary(con el valor de 13, 110, 253) y adjuntamos una segunda variable CSS, --bs-text-opacity, para la transparencia alfa (con un valor predeterminado 1gracias a una variable CSS local). Eso significa que cada vez que usa .text-primaryahora, su colorvalor calculado es rgba(13, 110, 253, 1). La variable CSS local dentro de cada .text-*clase evita problemas de herencia, por lo que las instancias anidadas de las utilidades no tienen automáticamente una transparencia alfa modificada.
Ejemplo
Para cambiar esa opacidad, anule --bs-text-opacitya través de estilos personalizados o estilos en línea.
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>O bien, elija entre cualquiera de las .text-opacityutilidades:
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>especificidad
A veces, las clases contextuales no se pueden aplicar debido a la especificidad de otro selector. En algunos casos, una solución alternativa suficiente es envolver el contenido de su elemento en uno <div>o más elementos semánticos con la clase deseada.
Hablar con descaro a
Además de la siguiente funcionalidad de Sass, considere leer sobre nuestras propiedades personalizadas CSS incluidas (también conocidas como variables CSS) para colores y más.
Variables
La mayoría colorde las utilidades son generadas por nuestros colores de tema, reasignados desde nuestras variables de paleta de colores genéricas.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
Los colores en escala de grises también están disponibles, pero solo se usa un subconjunto para generar utilidades.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Mapa
Luego, los colores del tema se colocan en un mapa de Sass para que podamos recorrerlos para generar nuestras utilidades, modificadores de componentes y más.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Los colores en escala de grises también están disponibles como mapa Sass. Este mapa no se utiliza para generar ninguna utilidad.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
Los colores RGB se generan a partir de un mapa Sass separado:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Y las opacidades de color se basan en eso con su propio mapa que consume la API de utilidades:
$utilities-text: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");
API de utilidades
Las utilidades de color se declaran en nuestra API de utilidades en formato scss/_utilities.scss. Aprenda a usar la API de utilidades.
"color": (
property: color,
class: text,
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
(
"muted": $text-muted,
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"reset": inherit,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),