Түстөр
colorБир нече түстүү пайдалуу класстар аркылуу маанини жеткириңиз . Ошондой эле, чычкан абалдары менен стилдөө шилтемелерин колдоону камтыйт.
Түстөр
Түстүү утилиталар менен текстти түскө бөлүңүз. Шилтемелерди түскө боёгуңуз келсе, анда жана абалдары бар .link-*жардамчы класстарды колдонсоңуз болот.:hover:focus
.текст-негизги
.текст-экинчи
.текст-ийгилик
.текст-коркунуч
.текст-эскертүү
.text-info
.текст-жарык
.текст-караңгы
.text-body
.текст үнсүз
.текст-ак
.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>Көмөкчү технологияларга маани берүү
Маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга жеткирилбейт. Түс менен белгиленген маалымат мазмундун өзүнөн (мисалы, көрүнүүчү текст) ачык-айкын болушун же .visually-hiddenкласс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылганын текшериңиз.
Өзгөчөлүк
Кээде контексттик класстар башка селектордун өзгөчөлүгүнөн улам колдонулушу мүмкүн эмес. <div>Кээ бир учурларда, сиздин элементиңиздин мазмунун керектүү класс менен же андан көп семантикалык элементке ороп коюу жетиштүү .
Sass
Төмөнкү Sass функцияларынан тышкары, түстөр жана башкалар үчүн камтылган CSS ыңгайлаштырылган касиеттери (ака 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,
)
)
),