Боје
Пренесите значење помоћу 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-*услужних програма и ЦСС променљивих за текстуалне услужне програме,
.text-black-50и
.text-white-50застарели су од в5.1.0. Они ће бити уклоњени у в6.0.0.
Преношење значења помоћним технологијама
Коришћење боје за додавање значења пружа само визуелну индикацију, која се неће пренети корисницима помоћних технологија – као што су читачи екрана. Уверите се да су информације означене бојом или очигледне из самог садржаја (нпр. видљиви текст), или су укључене путем алтернативних средстава, као што је додатни текст скривен .visually-hiddenкласом.
Непрозирност
Додато у в5.1.0
Од верзије 5.1.0, услужни програми за боју текста се генеришу помоћу Сасс-а користећи ЦСС променљиве. Ово омогућава промене боја у реалном времену без компилације и динамичке промене алфа транспарентности.
Како то ради
Размотрите наш подразумевани .text-primaryуслужни програм.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Користимо РГБ верзију наше --bs-primary(са вредношћу 13, 110, 253) ЦСС променљиве и прилажемо другу ЦСС променљиву, --bs-text-opacity, за алфа транспарентност (са подразумеваном вредношћу 1захваљујући локалној ЦСС променљивој). То значи да кад год .text-primaryсада користите, ваша израчуната colorвредност је rgba(13, 110, 253, 1). Локална ЦСС променљива унутар сваке .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>или више семантичких елемената са жељеном класом.
Сасс
Поред следеће Сасс функционалности, размислите о читању о нашим укљученим ЦСС прилагођеним својствима (ака ЦСС променљиве) за боје и још много тога.
Променљиве
Већина 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;
Мапа
Боје теме се затим стављају у Сасс мапу тако да можемо да их пређемо у петљу да генеришемо наше услужне програме, модификаторе компоненти и још много тога.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Боје у нијансама сиве су такође доступне као Сасс мапа. Ова мапа се не користи за генерисање било каквих услужних програма.
$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
);
РГБ боје се генеришу из засебне Сасс мапе:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
А непрозирност боја се надовезује на то помоћу сопствене мапе коју користи АПИ за услужне програме:
$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");
Утилитиес АПИ
Услужни програми за боје су декларисани у нашем АПИ-ју услужних програма у scss/_utilities.scss. Научите како да користите АПИ за услужне програме.
"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
)
),