Түстөр
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>.text-opacity-* Тексттик утилиталар үчүн утилиталардын жана CSS өзгөрмөлөрүнүн
кошулушу менен
.text-black-50,
.text-white-50алар v5.1.0 боюнча эскирди. Алар v6.0.0 версиясында өчүрүлөт.
Көмөкчү технологияларга маани берүү
Маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга жеткирилбейт. Түс менен белгиленген маалымат мазмундун өзүнөн (мисалы, көрүнүүчү текст) ачык-айкын болушун же .visually-hiddenкласс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылганын текшериңиз.
Тунук эмес
v5.1.0 кошулган
v5.1.0 боюнча, текст түсүнүн утилиталары CSS өзгөрмөлөрүнүн жардамы менен Sass менен түзүлөт. Бул компиляциясыз жана динамикалык альфа тунуктугун өзгөртүүсүз реалдуу убакыт режиминде түстөрдү өзгөртүүгө мүмкүндүк берет.
Бул кантип иштейт
Биздин демейки .text-primaryутилитаны карап көрөлү.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Биз --bs-primary(маани менен 13, 110, 253) CSS өзгөрүлмөбүздүн RGB версиясын колдонобуз жана --bs-text-opacityальфа ачыктыгы үчүн ( 1жергиликтүү CSS өзгөрмөсүнөн улам демейки мааниге ээ) экинчи CSS өзгөрмөсүн тиркебиз. Бул сиз .text-primaryазыр колдонгонуңузда, эсептелген маанисиңизди colorбилдирет rgba(13, 110, 253, 1). Ар бир .text-*класстын ичиндеги локалдык CSS өзгөрмөлөрү мурастоо маселелеринен качат, андыктан утилиталардын уяланган инстанциялары автоматтык түрдө альфа тунуктугун өзгөртпөйт.
Мисал
--bs-text-opacityБул тунуктукту өзгөртүү үчүн, ыңгайлаштырылган стилдер же саптык стилдер аркылуу жокко чыгарыңыз.
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>Же болбосо, кандайдыр бир утилитадан тандаңыз .text-opacity:
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>Өзгөчөлүк
Кээде контексттик класстар башка селектордун өзгөчөлүгүнөн улам колдонулушу мүмкүн эмес. <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
);
RGB түстөрү өзүнчө Sass картасынан түзүлөт:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Жана түстүү тунук эместиктер API утилиталары тарабынан колдонулган өздөрүнүн картасы менен түзүлөт:
$utilities-text: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");
Utilities API
Түстүү утилиталар биздин API-де жарыяланган scss/_utilities.scss. API утилиталарын кантип колдонууну үйрөнүңүз.
"color": (
property: color,
class: text,
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
(
"muted": $text-muted,
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"reset": inherit,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),