Farver
Formidle mening colormed en håndfuld farvefunktionsklasser. Inkluderer også støtte til styling af links med svævetilstande.
Farver
Farvelæg tekst med farveværktøjer. Hvis du vil farvelægge links, kan du bruge .link-*hjælperklasserne, som har :hoverog :focusangiver.
.tekst-primær
.tekst-sekundær
.tekst-succes
.tekst-fare
.tekst-advarsel
.tekst-info
.tekst-lys
.tekst-mørk
.tekst-brødtekst
.tekst-dæmpet
.tekst-hvid
.tekst-sort-50
.tekst-hvid-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>Formidle mening til hjælpeteknologier
Brug af farve til at tilføje mening giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier – såsom skærmlæsere. Sørg for, at informationer, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom yderligere tekst skjult i .visually-hiddenklassen.
Specificitet
Nogle gange kan kontekstuelle klasser ikke anvendes på grund af en anden vælgers specificitet. I nogle tilfælde er en tilstrækkelig løsning at pakke dit elements indhold ind i et <div>eller flere semantiske element med den ønskede klasse.
Sass
Ud over følgende Sass-funktionalitet kan du overveje at læse om vores inkluderede CSS-tilpassede egenskaber (også kaldet CSS-variabler) for farver og mere.
Variabler
De fleste colorhjælpeprogrammer er genereret af vores temafarver, omtildelt fra vores generiske farvepaletvariabler.
$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;
Gråtonefarver er også tilgængelige, men kun en delmængde bruges til at generere hjælpeprogrammer.
$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;
Kort
Temafarver sættes derefter ind i et Sass-kort, så vi kan sløjfe over dem for at generere vores hjælpeprogrammer, komponentmodifikatorer og mere.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Gråtonefarver er også tilgængelige som et Sass-kort. Dette kort bruges ikke til at generere nogen hjælpeprogrammer.
$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
);
Hjælpeprogrammer API
Farveværktøjer er deklareret i vores hjælpeprogrammer API i scss/_utilities.scss. Lær, hvordan du bruger 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,
)
)
),