Kleuren
Bring betsjutting troch colormei in hantsjefol kleurnutsklassen. Omfettet ek stipe foar stylingkeppelings mei hoverstaten.
Kleuren
Kleurje tekst mei kleurhelpprogramma's. As jo keppelings wolle kleurje, kinne jo de .link-*helperklassen brûke dy't hawwe :hoveren :focussteaten.
.text-primary
.tekst-sekundêr
.tekst-sukses
.tekst-gefaar
.tekst-warskôging
.tekst-ynfo
.tekst-ljocht
.text-donker
.text-body
.tekst-muted
.tekst-wyt
.text-swart-50
.tekst-wyt-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>Betsjutting oerbringe oan assistinte technologyen
It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .visually-hiddenklasse.
Spesifisiteit
Soms kinne kontekstuele klassen net tapast wurde fanwege de spesifisiteit fan in oare selector. Yn guon gefallen is in foldwaande oplossing om de ynhâld fan jo elemint yn in <div>of mear semantysk elemint te wikkeljen mei de winske klasse.
Sass
Njonken de folgjende Sass-funksjonaliteit, beskôgje it lêzen oer ús opnommen CSS-oanpaste eigenskippen (aka CSS-fariabelen) foar kleuren en mear.
Fariabelen
De measte colornutsfoarsjenningen wurde generearre troch ús temakleuren, opnij tawiisd fan ús generyske fariabelen fan kleurenpalet.
$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;
Griisskaalkleuren binne ek beskikber, mar allinich in subset wurdt brûkt om alle nutsbedriuwen te generearjen.
$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;
Map
Temakleuren wurde dan yn in Sass-kaart pleatst, sadat wy der oerhinne kinne om ús nutsbedriuwen, komponintmodifiers en mear te generearjen.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Griisskaalkleuren binne ek beskikber as in Sass-kaart. Dizze kaart wurdt net brûkt om nutsbedriuwen te generearjen.
$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 nutsbedriuwen wurde ferklearre yn ús nutsbedriuwen API yn scss/_utilities.scss. Learje hoe't jo de utilities API brûke.
"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,
)
)
),