Colores
Transmite significado a través del color con un puñado de
clases utilitarias de color. Incluye soporte para estilizar enlaces con estados hover, también.
Colores
Colorea el texto con utilidades de color. Si quieres colorear enlaces, puedes usar las clases helper .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>Transmisión de significado a tecnologías asistivas
Usar color para añadir significado solo proporciona una indicación visual, que no será
transmitida a los usuarios de tecnologías asistivas – como los lectores de pantalla. Asegúrate de que la
información denotada por el color sea evidente desde el contenido mismo (ej. el texto visible), o se incluya
mediante medios alternativos, como texto adicional oculto con la clase .visually-hidden.
Especificidad
A veces las clases contextuales no se pueden aplicar debido a la especificidad de otro
selector. En algunos casos, una solución suficiente es envolver el contenido de tu elemento en un
<div> o un elemento más semántico 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 se generan a partir de nuestros colores
del tema, reasignados desde nuestras variables de paleta de colores genérica.
$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 un subconjunto se usa 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;
Map
Los colores del tema se colocan luego en un mapa de Sass para que podamos iterar sobre ellos y 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 un mapa de Sass. Este mapa no se usa 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
);
Utilities API
Las utilidades de color se declaran en nuestra utilities API en
scss/_utilities.scss. Aprende a usar la
utilities API.
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),