Бои
Пренесете го значењето преку colorнеколку класи за употреба во боја. Вклучува и поддршка за стилски врски со состојби на лебдење.
Бои
Обојувајте го текстот со помошни алатки за боја. Ако сакате да ги обоите врските, можете да ги користите .link-*помошните класи кои имаат :hoverи :focusсостојби.
.текст-основно
.текст-секундарна
.текст-успех
.текст-опасност
.текст-предупредување
.текст-информации
.текст-светло
.текст-темно
.текст-тело
.текст-исклучен
.текст-бело
.текст-црно-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
Почнувајќи од верзијата 5.1.0, алатките за боја на текстот се генерираат со Sass користејќи CSS променливи. Ова овозможува промена на бојата во реално време без компилација и динамични промени на алфа-проѕирноста.
Како работи
Размислете за нашата стандардна .text-primaryалатка.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Ние користиме RGB верзија на нашата --bs-primary(со вредност на 13, 110, 253) CSS променлива и прикачивме втора CSS променлива, --bs-text-opacity, за алфа транспарентност (со стандардна вредност 1благодарение на локалната 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 својства (наречени 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
Услугите за боја се декларирани во нашите Utilities API во scss/_utilities.scss. Научете како да ги користите Utilities 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
)
),