Түстер
colorТүстердің бірнеше сыныптары арқылы мағынаны жеткізіңіз . Сондай-ақ меңзер күйлері бар стильдеу сілтемелерін қолдауды қамтиды.
Түстер
Түс утилиталары арқылы мәтінді бояңыз. Сілтемелерді бояғыңыз келсе, және күйлері бар .link-*көмекші сыныптарды пайдалануға болады.:hover:focus
.мәтін-бастапқы
.мәтін-екінші
.мәтін-сәттілік
.text-қауіпті
.мәтіндік ескерту
.мәтіндік ақпарат
.мәтін-жарық
.мәтін-қараңғы
.мәтін-дене
.мәтіннің дыбысы өшірілді
.мәтін-ақ
.мәтін-қара-50
.мәтін-ақ-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>Көмекші технологияларға мән беру
Түсті мағына қосу үшін пайдалану тек көрнекі нұсқауды қамтамасыз етеді, ол экраннан оқу құралдары сияқты көмекші технологияларды пайдаланушыларға берілмейді. Түспен белгіленген ақпарат мазмұнның өзінен анық (мысалы, көрінетін мәтін) немесе .visually-hiddenсыныппен жасырылған қосымша мәтін сияқты балама құралдар арқылы енгізілгеніне көз жеткізіңіз.
Ерекшелік
Кейде контекстік сыныптарды басқа селектордың ерекшелігіне байланысты қолдану мүмкін емес. Кейбір жағдайларда элементтің мазмұнын <div>қажетті сыныппен немесе одан да көп семантикалық элементке орау үшін жеткілікті уақытша шешім болып табылады.
Сасс
Келесі Sass функциясына қосымша, түстер және т.б. үшін енгізілген CSS теңшелетін сипаттарымыз (aka CSS айнымалылары) туралы оқуды қарастырыңыз.
Айнымалылар
Көптеген colorутилиталар біздің жалпы түстер палитрасының айнымалы мәндерінен қайта тағайындалған тақырып түстеріміз арқылы жасалады.
$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;
Сұр реңкті түстер де қол жетімді, бірақ кез келген утилиталарды жасау үшін тек ішкі жиын пайдаланылады.
$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;
Карта
Содан кейін тақырып түстері Sass картасына енгізіледі, осылайша біз утилиталарды, құрамдас модификаторларды және т.б. жасау үшін оларды айналдыра аламыз.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Сұр реңктері Sass картасы ретінде де қол жетімді. Бұл карта ешқандай утилиталарды жасау үшін пайдаланылмайды.
$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
Түс утилиталары біздің API утилиталарында жарияланған scss/_utilities.scss. 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,
)
)
),