Cores
Transmite significado a través colordun puñado de clases de utilidade de cores. Tamén inclúe compatibilidade con ligazóns de estilo con estados de paso.
Cores
Colorea o texto con utilidades de cor. Se queres colorear as ligazóns, podes usar as .link-*clases auxiliares que teñen :hovere :focusindica.
.texto-primario
.texto-secundaria
.texto-éxito
.texto-perigo
.texto-aviso
.text-info
.texto-luz
.texto-escuro
.texto-corpo
.texto silenciado
.texto-branco
.texto-negro-50
.texto-branco-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 e variables CSS para as utilidades de texto,
.text-black-50quedan
.text-white-50obsoletos a partir da versión 5.1.0. Eliminaranse na versión 6.0.0.
Transmitir significado ás tecnoloxías de asistencia
Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .visually-hiddenclase.
Opacidade
Engadido na v5.1.0
A partir da versión 5.1.0, as utilidades de cor de texto xéranse con Sass mediante variables CSS. Isto permite cambios de cor en tempo real sen compilación e cambios dinámicos de transparencia alfa.
Cómo funciona
Considere a nosa .text-primaryutilidade predeterminada.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Usamos unha versión RGB da nosa --bs-primary(co valor de 13, 110, 253) variable CSS e adxuntamos unha segunda variable CSS, --bs-text-opacity, para a transparencia alfa (cun valor predeterminado 1grazas a unha variable CSS local). Isto significa que sempre que uses agora, o teu valor .text-primarycalculado é . A variable CSS local dentro de cada clase evita problemas de herdanza polo que as instancias aniñadas das utilidades non teñen automaticamente unha transparencia alfa modificada.colorrgba(13, 110, 253, 1).text-*
Exemplo
Para cambiar esa opacidade, anula --bs-text-opacitymediante estilos personalizados ou estilos en liña.
<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>Ou escolle entre calquera das .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>Especificidade
Ás veces non se poden aplicar clases contextuais debido á especificidade doutro selector. Nalgúns casos, unha solución alternativa é envolver o contido do elemento nun <div>ou máis elementos semánticos coa clase desexada.
Sass
Ademais da seguinte funcionalidade de Sass, considera ler sobre as nosas propiedades personalizadas CSS incluídas (tamén coñecidas como variables CSS) para cores e moito máis.
Variables
A maioría das colorutilidades son xeradas polas cores dos nosos temas, reasignadas a partir das variables xenéricas da nosa paleta de cores.
$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;
Tamén están dispoñibles cores en escala de grises, pero só se usa un subconxunto para xerar 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
A continuación, as cores dos temas colócanse nun mapa Sass para que poidamos pasar sobre elas para xerar as nosas utilidades, modificadores de compoñentes e moito máis.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
As cores en escala de grises tamén están dispoñibles como mapa Sass. Este mapa non se usa para xerar ningunha utilidade.
$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
);
As cores RGB xéranse a partir dun mapa Sass separado:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
E as opacidades de cores constrúense co seu propio mapa que consume a 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
As utilidades de cores decláranse na nosa API de utilidades en scss/_utilities.scss. Aprende a usar a 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
)
),