Kleure
Dra betekenis deur colormet 'n handvol kleurnutsklasse. Sluit ook ondersteuning vir stileringskakels met sweeftoestande in.
Kleure
Kleur teks in met kleurhulpmiddels. As jy skakels wil inkleur, kan jy die .link-*helperklasse gebruik wat :hoveren :focusstate het.
.teks-primêr
.teks-sekondêr
.teks-sukses
.teks-gevaar
.teks-waarskuwing
.teks-inligting
.teks-lig
.teks-donker
.teks-liggaam
.teks gedemp
.teks-wit
.teks-swart-50
.teks-wit-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>Betekenis oordra aan ondersteunende tegnologieë
Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .visually-hiddenklas versteek is.
Spesifisiteit
Soms kan kontekstuele klasse nie toegepas word nie as gevolg van die spesifisiteit van 'n ander keurder. In sommige gevalle is 'n voldoende oplossing om jou element se inhoud in 'n <div>of meer semantiese element met die verlangde klas toe te draai.
Sass
Benewens die volgende Sass-funksionaliteit, oorweeg dit om te lees oor ons ingesluit CSS-pasgemaakte eienskappe (ook bekend as CSS-veranderlikes) vir kleure en meer.
Veranderlikes
Die meeste colornutsprogramme word gegenereer deur ons temakleure, hertoegewys vanaf ons generiese kleurpaletveranderlikes.
$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;
Grysskaalkleure is ook beskikbaar, maar slegs 'n subset word gebruik om enige nutsprogramme te genereer.
$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;
Kaart
Temakleure word dan in 'n Sass-kaart geplaas sodat ons daaroor kan loop om ons nutsprogramme, komponent-wysigers en meer te genereer.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Grysskaalkleure is ook beskikbaar as 'n Sass-kaart. Hierdie kaart word nie gebruik om enige hulpprogramme te genereer nie.
$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
Kleur nutsprogramme word verklaar in ons nutsprogramme API in scss/_utilities.scss. Leer hoe om die utilities API te gebruik.
"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,
)
)
),