Farger
Formidle mening colormed en håndfull fargebruksklasser. Inkluderer støtte for styling av lenker med svevetilstander også.
Farger
Fargelegg tekst med fargeverktøy. Hvis du vil fargelegge lenker, kan du bruke .link-*hjelpeklassene som har :hoverog :focusstater.
.tekst-primær
.tekst-sekundær
.tekst-suksess
.tekstfare
.tekst-advarsel
.tekst-info
.tekst-lys
.tekst-mørk
.tekst-tekst
.tekst-dempet
.tekst-hvit
.text-black-50
.tekst-hvit-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 hjelpeteknologier
Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .visually-hiddenklassen.
Spesifisitet
Noen ganger kan ikke kontekstuelle klasser brukes på grunn av spesifisiteten til en annen velger. I noen tilfeller er en tilstrekkelig løsning å pakke elementets innhold inn i et <div>eller flere semantiske element med ønsket klasse.
Sass
I tillegg til følgende Sass-funksjonalitet, bør du vurdere å lese om våre inkluderte egendefinerte CSS-egenskaper (aka CSS-variabler) for farger og mer.
Variabler
De fleste colorverktøyene er generert av temafargene våre, omtilordnet fra våre generiske fargepalettvariabler.
$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åtonefarger er også tilgjengelige, men bare et delsett brukes til å generere verktøy.
$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;
Kart
Temafarger legges deretter inn i et Sass-kart, slik at vi kan sløyfe dem for å generere våre verktøy, komponentmodifikatorer og mer.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Gråtonefarger er også tilgjengelige som et Sass-kart. Dette kartet brukes ikke til å generere verktøy.
$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
);
Utilities API
Fargeverktøy er deklarert i vår utilities API i scss/_utilities.scss. Lær hvordan du bruker 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,
)
)
),