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>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.
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
);
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,
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,
)
)
),