Цвета

Передайте смысл через цвет с помощью нескольких служебных классов цвета. Также включает поддержку стилей ссылок с состояниями наведения.

Цвет

.text-основной

.text-вторичный

.text-успех

.text-опасность

.text-предупреждение

.text-информация

.text-свет

.text-темный

.текстовое тело

.text-приглушенный

.text-белый

.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">.text-warning</p>
<p class="text-info">.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-whiteand .text-mutedне имеет дополнительных стилей ссылок, кроме подчеркивания.

Основная ссылка

Дополнительная ссылка

Ссылка успеха

Опасная ссылка

Предупреждающая ссылка

Информационная ссылка

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

Фоновый цвет

Подобно контекстным классам цвета текста, легко установить фон элемента в любой контекстный класс. Якорные компоненты будут темнеть при наведении, как и текстовые классы. Фоновые утилиты не устанавливаютсяcolor , поэтому в некоторых случаях вы захотите использовать .text-*утилиты.

.bg-основной

.bg-вторичный

.bg-успех

.bg-опасность

.bg-предупреждение

.bg-информация

.bg-свет

.bg-темный

.bg-белый

.bg-прозрачный

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Градиент фона

Когда $enable-gradientsустановлено значение true, вы сможете использовать .bg-gradient-служебные классы. По умолчанию $enable-gradientsотключено, а приведенный ниже пример намеренно нарушен. Это сделано для упрощения настройки с момента начала использования Bootstrap. Узнайте о наших возможностях Sass, чтобы включить эти и другие классы.

.bg-градиент-первичный

.bg-градиент-вторичный

.bg-градиент-успех

.bg-градиент-опасность

.bg-градиент-предупреждение

.bg-градиент-информация

.bg-градиент-свет

.bg-градиент-темный

<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

Работа со спецификой

Иногда контекстные классы нельзя применить из-за специфики другого селектора. В некоторых случаях достаточный обходной путь — обернуть содержимое вашего элемента в файл <div>с классом.

Передача смысла вспомогательным технологиям

Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый вместе с .sr-onlyклассом.