Түстер
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>.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). Әр сыныптағы жергілікті CSS айнымалысы .text-*мұрагерлік мәселелерден аулақ болады, сондықтан утилиталардың кірістірілген даналарында автоматты түрде өзгертілген альфа мөлдірлігі болмайды.
Мысал
Бұл мөлдірлікті өзгерту үшін --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 функциясына қосымша, түстер және т.б. үшін енгізілген 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
);
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
)
),