Culori
Transmiteți sens prin intermediul colorunor clase de utilitate de culoare. Include și suport pentru link-uri de stil cu stări de hover.
Culori
Colorați textul cu utilitare de culoare. Dacă doriți să colorați legăturile, puteți utiliza .link-*clasele de ajutor care au :hoverși :focusstate.
.text-primar
.text-secundar
.text-succes
.text-pericol
.text-avertisment
.text-info
.text-lumină
.text-întuneric
.text-corp
.text dezactivat
.text-alb
.text-negru-50
.text-alb-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-*utilități și variabile CSS pentru utilitare de text
.text-black-50și
.text-white-50sunt depreciate începând cu v5.1.0. Vor fi eliminate în v6.0.0.
Transmiterea sensului tehnologiilor de asistență
Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .visually-hiddenclasa.
Opacitate
Adăugat în v5.1.0
Începând cu v5.1.0, utilitarele pentru culoarea textului sunt generate cu Sass folosind variabile CSS. Acest lucru permite schimbări de culoare în timp real fără compilare și modificări dinamice ale transparenței alfa.
Cum functioneaza
.text-primaryLuați în considerare utilitarul nostru implicit .
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Folosim o versiune RGB a variabilei noastre CSS --bs-primary(cu valoarea 13, 110, 253) și atașăm o a doua variabilă CSS, --bs-text-opacity, pentru transparența alfa (cu o valoare implicită 1datorită unei variabile CSS locale). Aceasta înseamnă că, oricând folosiți .text-primaryacum, valoarea dvs. calculată coloreste rgba(13, 110, 253, 1). Variabila CSS locală din interiorul fiecărei .text-*clase evită problemele de moștenire, astfel încât instanțe imbricate ale utilităților nu au automat o transparență alfa modificată.
Exemplu
Pentru a schimba opacitatea respectivă, înlocuiți --bs-text-opacityprin stiluri personalizate sau stiluri inline.
<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>Sau alegeți din oricare dintre .text-opacityutilități:
<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>Specificitate
Uneori, clasele contextuale nu pot fi aplicate din cauza specificului altui selector. În unele cazuri, o soluție suficientă este să împachetați conținutul elementului într-un <div>sau mai multe elemente semantice cu clasa dorită.
Sass
Pe lângă următoarea funcționalitate Sass, luați în considerare să citiți despre proprietățile noastre personalizate CSS incluse (alias variabilele CSS) pentru culori și multe altele.
Variabile
Cele mai multe colorutilități sunt generate de culorile temei noastre, reatribuite din variabilele noastre generice ale paletei de culori.
$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;
Culorile în tonuri de gri sunt, de asemenea, disponibile, dar numai un subset este folosit pentru a genera orice utilități.
$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;
Hartă
Culorile temei sunt apoi puse într-o hartă Sass, astfel încât să putem trece peste ele pentru a ne genera utilitățile, modificatorii de componente și multe altele.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Culorile în tonuri de gri sunt disponibile și ca hartă Sass. Această hartă nu este folosită pentru a genera utilitare.
$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
);
Culorile RGB sunt generate dintr-o hartă Sass separată:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Și opacitățile de culoare se bazează pe asta cu propria lor hartă care este consumată de API-ul utilitare:
$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");
Utilities API
Utilitățile de culoare sunt declarate în API-ul nostru de utilitare în scss/_utilities.scss. Aflați cum să utilizați API-ul utilitare.
"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
)
),