Mga kulay
Ihatid ang kahulugan sa pamamagitan colorng ilang mga klase ng utility ng kulay. Kasama rin ang suporta para sa pag-istilo ng mga link na may mga estado ng hover.
Mga kulay
Kulayan ang teksto gamit ang mga utility na may kulay. Kung gusto mong kulayan ang mga link, maaari mong gamitin ang mga .link-*klase ng helper na mayroon :hoverat :focusnakasaad.
.teksto-pangunahin
.teksto-pangalawang
.text-tagumpay
.text-panganib
.text-warning
.text-info
.text-light
.text-madilim
.text-body
.text-muted
.text-white
.text-black-50
.text-white-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>Naghahatid ng kahulugan sa mga pantulong na teknolohiya
Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .visually-hiddenklase.
Pagtitiyak
Minsan hindi mailalapat ang mga klase sa konteksto dahil sa pagiging tiyak ng isa pang tagapili. Sa ilang mga kaso, ang isang sapat na solusyon ay ang pagbalot ng nilalaman ng iyong elemento sa isang <div>o higit pang elemento ng semantiko na may nais na klase.
Sass
Bilang karagdagan sa sumusunod na functionality ng Sass, isaalang-alang ang pagbabasa tungkol sa aming kasamang CSS custom na mga katangian (aka CSS variable) para sa mga kulay at higit pa.
Mga variable
Karamihan colorsa mga utility ay nabuo ng aming mga kulay ng tema, na muling itinalaga mula sa aming mga generic na color palette variable.
$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;
Available din ang mga grayscale na kulay, ngunit isang subset lang ang ginagamit upang bumuo ng anumang mga utility.
$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;
Mapa
Pagkatapos ay inilalagay ang mga kulay ng tema sa isang mapa ng Sass upang mabuo namin ang mga ito upang mabuo ang aming mga utility, mga component modifier, at higit pa.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Available din ang mga grayscale na kulay bilang isang mapa ng Sass. Ang mapa na ito ay hindi ginagamit upang bumuo ng anumang mga kagamitan.
$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
Ang mga color utilities ay ipinahayag sa aming mga utility API sa scss/_utilities.scss. Matutunan kung paano gamitin ang utility 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,
)
)
),