Colors
Transmet el significat coloramb un grapat de classes d'utilitat de color. També inclou suport per als enllaços d'estil amb els estats de flotació.
Colors
Acoloreix el text amb utilitats de color. Si voleu pintar els enllaços, podeu utilitzar les .link-*classes d'ajuda que tenen :hoveri :focus.
.text-primària
.text-secundària
.text-èxit
.text-perill
.text-advertència
.text-info
.text-llum
.text-fosc
.text-cos
.text silenciat
.text-blanc
.text-negre-50
.text-blanc-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-*utilitats i variables CSS per a utilitats de text,
.text-black-50i
.text-white-50queden obsolets a partir de la v5.1.0. S'eliminaran a la v6.0.0.
Transmetre significat a les tecnologies d'assistència
L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .visually-hiddenclasse.
Opacitat
Afegit a la v5.1.0
A partir de la v5.1.0, les utilitats de color de text es generen amb Sass mitjançant variables CSS. Això permet canvis de color en temps real sense compilació i canvis dinàmics de transparència alfa.
Com funciona
.text-primaryConsidereu la nostra utilitat predeterminada .
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Utilitzem una versió RGB de la nostra --bs-primary(amb el valor de 13, 110, 253) variable CSS i adjuntem una segona variable CSS, --bs-text-opacity, per a la transparència alfa (amb un valor predeterminat 1gràcies a una variable CSS local). Això vol dir que sempre que utilitzeu .text-primaryara, el vostre valor calculat colorés rgba(13, 110, 253, 1). La variable CSS local dins de cada .text-*classe evita problemes d'herència, de manera que les instàncies imbricades de les utilitats no tinguin automàticament una transparència alfa modificada.
Exemple
Per canviar aquesta opacitat, substituïu -lo --bs-text-opacitymitjançant estils personalitzats o estils en línia.
<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 trieu entre qualsevol de les .text-opacityutilitats:
<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>Especificitat
De vegades no es poden aplicar classes contextuals a causa de l'especificitat d'un altre selector. En alguns casos, una solució alternativa és embolicar el contingut del vostre element en un <div>element semàntic o més amb la classe desitjada.
Sass
A més de la següent funcionalitat de Sass, penseu a llegir sobre les nostres propietats personalitzades CSS incloses (també conegudes com variables CSS) per als colors i molt més.
Les variables
La majoria colorde les utilitats les generen els nostres colors del tema, reassignats a partir de les variables genèriques de la paleta de colors.
$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;
Els colors en escala de grisos també estan disponibles, però només s'utilitza un subconjunt per generar qualsevol utilitat.
$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ó, els colors del tema es posen en un mapa de Sass perquè puguem passar-hi per generar les nostres utilitats, modificadors de components i molt més.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Els colors en escala de grisos també estan disponibles com a mapa Sass. Aquest mapa no s'utilitza per generar cap utilitat.
$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
);
Els colors RGB es generen a partir d'un mapa Sass independent:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
I les opacitats de color es basen en això amb el seu propi mapa que consumeix l'API d'utilitats:
$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");
Utilitats API
Les utilitats de color es declaren a la nostra API d'utilitats en scss/_utilities.scss. Apreneu a utilitzar l'API d'utilitats.
"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
)
),