Передайте смысл через цвет с помощью нескольких служебных классов цвета. Также включает поддержку стилей ссылок с состояниями наведения.
Цвет
.text-основной
.text-вторичный
.text-успех
.text-опасность
.text-предупреждение
.text-информация
.text-свет
.text-темный
.текстовое тело
.text-приглушенный
.text-белый
.text-черный-50
.текст-белый-50
Контекстные текстовые классы также хорошо работают с привязками с предоставленными состояниями наведения и фокуса. Обратите внимание, что класс .text-whiteand .text-mutedне имеет дополнительных стилей ссылок, кроме подчеркивания.
Подобно контекстным классам цвета текста, легко установить фон элемента в любой контекстный класс. Якорные компоненты будут темнеть при наведении, как и текстовые классы. Фоновые утилиты не устанавливаютсяcolor , поэтому в некоторых случаях вы захотите использовать .text-*утилиты.
.bg-основной
.bg-вторичный
.bg-успех
.bg-опасность
.bg-предупреждение
.bg-информация
.bg-свет
.bg-темный
.bg-белый
.bg-прозрачный
Градиент фона
Когда $enable-gradientsустановлено значение true, вы сможете использовать .bg-gradient-служебные классы. По умолчанию $enable-gradientsотключено, а приведенный ниже пример намеренно нарушен. Это сделано для упрощения настройки с момента начала использования Bootstrap. Узнайте о наших возможностях Sass, чтобы включить эти и другие классы.
.bg-градиент-первичный
.bg-градиент-вторичный
.bg-градиент-успех
.bg-градиент-опасность
.bg-градиент-предупреждение
.bg-градиент-информация
.bg-градиент-свет
.bg-градиент-темный
Работа со спецификой
Иногда контекстные классы нельзя применить из-за специфики другого селектора. В некоторых случаях достаточный обходной путь — обернуть содержимое вашего элемента в файл <div>с классом.
Передача смысла вспомогательным технологиям
Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый вместе с .sr-onlyклассом.