Цветове
Предайте смисъла чрез colorшепа цветни полезни класове. Включва и поддръжка за стилизиране на връзки със състояния на задържане.
Цветове
Оцветете текст с цветни помощни програми. Ако искате да оцветите връзките, можете да използвате .link-*помощните класове , които имат :hoverи :focusсъстояния.
.текст-основен
.текст-вторичен
.текст-успех
.текст-опасност
.текстово предупреждение
.text-info
.текстова светлина
.текст-тъмен
.text-body
.text-muted
.текст-бял
.text-black-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 помощните програми за цвят на текста се генерират със 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");
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
)
),