Colores
Transmite significado a través del color con un puñado de clases de utilidad de color. También incluye soporte para diseñar enlaces con estado hover.
Colores
Colorea el texto con utilidades de color. Si deseas colorear los enlaces, puedes usar las clases auxiliares .link-* que tienen estados :hover y :focus .
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-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-* y las variables CSS para las utilidades de texto, .text-black-50 y .text-white-50 quedan en desuso a partir de la 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úrate de que la información denotada 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 clase .visually-hidden.
Opacidad
Añadido 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.
Tal vez te interese
¿Cómo funcionan los colores?
Analicemos nuestra utilidad predeterminada .text-primary.
.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 1 gracias a una variable CSS local). Esto significa que cada vez que usas .text-primary ahora, tu valor de color calculado es rgba(13, 110, 253, 1). La variable CSS local dentro de cada clase .text-* evita problemas de herencia, por lo que las instancias anidadas de las utilidades no tienen automáticamente una transparencia alfa modificada.
Ejemplo
Para cambiar la opacidad, sobrescribe --bs-text-opacity a través de estilos personalizados o estilos en línea.
<div class="text-primary">Este es el texto primary predeterminado</div>
<div class="text-primary" style="--bs-text-opacity: .5;">Este es un texto primary con una opacidad del 50%</div>O bien, elije cualquiera de las utilidades .text-opacity:
<div class="text-primary">Este es el texto primary predeterminado</div>
<div class="text-primary text-opacity-75">Este es un texto primary con una opacidad del 75%</div>
<div class="text-primary text-opacity-50">Este es un texto primary con una opacidad del 50%</div>
<div class="text-primary text-opacity-25">Este es un texto primary con una opacidad del 25%</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 tu elemento en un <div> con la clase deseada.
Sass
Además de la siguiente funcionalidad de Sass, considera leer sobre nuestras propiedades personalizadas CSS (también conocidas como variables CSS) para colores y más.
Variables
La mayoría de las utilidades de color son generadas por nuestros colores de tema, reasignados desde nuestras variables genéricas de paleta de colores.
$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 usa para generar utilidades.
$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 esto 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");
Tal vez te interese
API de utilidades
Las utilidades de color se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende 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
)
),