Koloroj
Transdonu signifon per colormanpleno da koloraj utilaj klasoj. Inkluzivas ankaŭ subtenon por stilaj ligiloj kun ŝvebŝtatoj.
Koloroj
Kolorigi tekston per koloraj utilecoj. Se vi volas kolorigi ligilojn, vi povas uzi la .link-*helpklasojn kiuj havas :hoverkaj :focusŝtatojn.
.text-primary
.teksto-sekundara
.teksto-sukceso
.teksto-danĝero
.teksto-averto
.text-info
.teksto-lumo
.teksto-malluma
.teksto-korpo
.text-mutita
.teksto-blanka
.teksto-nigra-50
.teksto-blanka-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>Transdonante signifon al helpaj teknologioj
Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidenta de la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .visually-hiddenklaso.
Specifeco
Foje kuntekstaj klasoj ne povas esti aplikataj pro la specifeco de alia elektilo. En iuj kazoj, sufiĉa solvo estas envolvi la enhavon de via elemento en <div>aŭ pli semantika elemento kun la dezirata klaso.
Sass
Aldone al la sekva Sass-funkcio, konsideru legi pri niaj inkluzivitaj CSS-propraj propraĵoj (alinome CSS-variabloj) por koloroj kaj pli.
Variabloj
Plej multaj colorutilecoj estas generitaj de niaj etkoloroj, reasignitaj de niaj ĝeneralaj koloraj variabloj.
$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;
Grizskalaj koloroj ankaŭ haveblas, sed nur subaro estas uzata por generi iujn ajn servaĵojn.
$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;
Mapo
Temkoloroj tiam estas metitaj en Sass-mapon por ke ni povu cirkuli super ili por generi niajn utilecojn, komponantajn modifaĵojn kaj pli.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Grizskalaj koloroj ankaŭ haveblas kiel Sass-mapo. Ĉi tiu mapo ne estas uzata por generi ajnajn ilojn.
$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
);
Utilaĵoj API
Koloraj utilecoj estas deklaritaj en nia utileco API en scss/_utilities.scss. Lernu kiel uzi la utilecojn 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,
)
)
),