Цвета
Передайте смысл через цвет с помощью нескольких полезных классов. Также включает поддержку стилизации ссылок с помощью состояний наведения.
Цвета
Раскрашивайте текст с помощью цветных утилит. Если Вы хотите раскрасить ссылки, Вы можете использовать вспомогательные классы .link-*, которые имеют состояния :hover и :focus.
.text-primary
.text-primary-emphasis
.text-secondary
.text-secondary-emphasis
.text-success
.text-success-emphasis
.text-danger
.text-danger-emphasis
.text-warning
.text-warning-emphasis
.text-info
.text-info-emphasis
.text-light
.text-light-emphasis
.text-dark
.text-dark-emphasis
.text-body
.text-muted
.text-body-emphasis
.text-body-secondary
.text-body-tertiary
.text-black
.text-white
.text-black-50
.text-white-50
<p class="text-primary">.text-primary</p>
<p class="text-primary-emphasis">.text-primary-emphasis</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-secondary-emphasis">.text-secondary-emphasis</p>
<p class="text-success">.text-success</p>
<p class="text-success-emphasis">.text-success-emphasis</p>
<p class="text-danger">.text-danger</p>
<p class="text-danger-emphasis">.text-danger-emphasis</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-warning-emphasis">.text-warning-emphasis</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-info-emphasis">.text-info-emphasis</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-light-emphasis">.text-light-emphasis</p>
<p class="text-dark bg-white">.text-dark</p>
<p class="text-dark-emphasis">.text-dark-emphasis</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>
<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>.text-opacity-* и переменных CSS для текстовых утилит: .text-black-50 и .text-white-50 устарели с версии 5.1.0. Они будут удалены в версии 6.0.0.
.text-muted utility has been deprecated as of v5.3.0. Its default value has also has been reassigned to the new --bs-secondary-color CSS variable to better support color modes. It will be removed in 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-версию нашей переменной CSS --bs-primary (со значением 13, 110, 253) и прикрепляем вторую переменную CSS, --bs-text-opacity, для альфа-прозрачности. (со значением по умолчанию 1 благодаря локальной переменной CSS). Это означает, что каждый раз, когда вы сейчас используете .text-primary, ваше вычисленное значение color будет rgba(13, 110, 253, 1). Локальная переменная CSS внутри каждого класса .text-* позволяет избежать проблем наследования, поэтому вложенные экземпляры утилит не имеют автоматически измененной альфа-прозрачности.
Пример
Чтобы изменить эту непрозрачность, переопределите --bs-text-opacity с помощью пользовательских стилей или встроенных стилей.
<div class="text-primary">Это основной текст по умолчанию</div>
<div class="text-primary" style="--bs-text-opacity: .5;">Это основной текст с непрозрачностью 50%</div>Или выберите любую из утилит .text-opacity:
<div class="text-primary">Это основной текст по умолчанию</div>
<div class="text-primary text-opacity-75">Это основной текст с непрозрачностью 75%</div>
<div class="text-primary text-opacity-50">Это основной текст с непрозрачностью 50%</div>
<div class="text-primary text-opacity-25">Это основной текст с непрозрачностью 25%</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-text-emphasis-colors: (
"primary-emphasis": var(--#{$prefix}primary-text),
"secondary-emphasis": var(--#{$prefix}secondary-text),
"success-emphasis": var(--#{$prefix}success-text),
"info-emphasis": var(--#{$prefix}info-text),
"warning-emphasis": var(--#{$prefix}warning-text),
"danger-emphasis": var(--#{$prefix}danger-text),
"light-emphasis": var(--#{$prefix}light-text),
"dark-emphasis": var(--#{$prefix}dark-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, // deprecated
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color),
"reset": inherit,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
"text-color": (
property: color,
class: text,
values: $utilities-text-emphasis-colors
),