Цвета. Утилиты · Bootstrap. Версия v4.3.1
Передача значения через цвет с помощью нескольких полезных классов. Включает поддержку ссылок на стиль в hover-состоянии.
Цвет
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
<p>.text-primary</p> <p>.text-secondary</p> <p>.text-success</p> <p>.text-danger</p> <p>.text-warning</p> <p>.text-info</p> <p>.text-light</p> <p>.text-dark</p> <p>.text-body</p> <p>.text-muted</p> <p>.text-white</p> <p>.text-black-50</p> <p>.text-white-50</p>
Классы контекстуального текста также работают хорошо на ссылках, где заданы hover и focus.
.text-white and .text-muted не имеют ссылочной стилизации.
Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Light link
Dark link
Muted link
White link
<p><a href="#">Primary link</a></p> <p><a href="#">Secondary link</a></p> <p><a href="#">Success link</a></p> <p><a href="#">Danger link</a></p> <p><a href="#">Warning link</a></p> <p><a href="#">Info link</a></p> <p><a href="#">Light link</a></p> <p><a href="#">Dark link</a></p> <p><a href="#">Muted link</a></p> <p><a href="#">White link</a></p>
Цвет фона
Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу.
Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут color, так что в некоторых случаях вам понадобится утилиты .text-*.
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
<div>.bg-primary</div> <div>.bg-secondary</div> <div>.bg-success</div> <div>.bg-danger</div> <div>.bg-warning</div> <div>.bg-info</div> <div>.bg-light</div> <div>.bg-dark</div> <div>.bg-white</div> <div>.bg-transparent</div>
Градиентный фон
Когда карта $enable-gradients задана как true, вы сможете использовать классы .bg-gradient-. По умолчанию карта $enable-gradients деактивирована, а код примера ниже специально «сломан».
Это сделано для более легкой настройки с самого начала пользования Bootstrap. Узнайте о параметрах Sass, об активации этих классов и т.д.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе . текст.
sr-only
Цвета · Bootstrap 4 на русском
Передача значения через цвет с помощью нескольких полезных классов. Включает поддержку ссылок на стиль в hover-состоянии.
Цвет
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
<p>.text-primary</p> <p>.text-secondary</p> <p>.text-success</p> <p>.text-danger</p> <p>.text-warning</p> <p>.text-info</p> <p>.text-light</p> <p>.text-dark</p> <p>.text-body</p> <p>.text-muted</p> <p>.text-white</p> <p>.text-black-50</p> <p>.text-white-50</p>
Классы контекстуального текста также работают хорошо на ссылках, где заданы hover и focus.
Заметьте, что классы .text-white and .text-muted не имеют ссылочной стилизации.
Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Light link
Dark link
Muted link
White link
<p><a href="#">Primary link</a></p> <p><a href="#">Secondary link</a></p> <p><a href="#">Success link</a></p> <p><a href="#">Danger link</a></p> <p><a href="#">Warning link</a></p> <p><a href="#">Info link</a></p> <p><a href="#">Light link</a></p> <p><a href="#">Dark link</a></p> <p><a href="#">Muted link</a></p> <p><a href="#">White link</a></p>
Цвет фона
Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу.
Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут
color, так что в некоторых случаях вам понадобится утилиты .text-*..bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
<div>.bg-primary</div> <div>.bg-secondary</div> <div>.bg-success</div> <div>.bg-danger</div> <div>.bg-warning</div> <div>.bg-info</div> <div>.bg-light</div> <div>.bg-dark</div> <div>.bg-white</div> <div>.bg-transparent</div>
Градиентный фон
Когда карта $enable-gradients задана как true, вы сможете использовать классы .bg-gradient-. По умолчанию карта $enable-gradients деактивирована, а код примера ниже специально сломан.
Это сделано для более легкой настройки с самого начала пользования Bootstrap. Узнайте о параметрах Sass, об активации этих классов и т.д.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
цветов · Bootstrap v4.
5Посмотреть на GitHub
Передайте смысл через цвет с помощью нескольких служебных классов цвета. Также включает поддержку стилей ссылок с состояниями наведения.
Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью .ср-только класс.
Цвет
.Text-Primary
. Текст-секунда
.Text-Success
. Текст-Danger
.Text-Warning
.Text-Info
. Текст-ламп
.Text-Dark
. text-body
.text-muted
.text-white
.text-black-50
.
text-white-50
.text-primary
.text-вторичный
.text-успех
.text-опасность
.text-предупреждение
.текстовая информация
.светлый текст
.текст-темный
.text-body
.text-muted
.текст-белый
.текст-черный-50
.text-white-50
Контекстные текстовые классы также хорошо работают с якорями с предоставленными состояниями наведения и фокуса. Обратите внимание, что классы .text-white и .text-muted не имеют дополнительных стилей ссылок, кроме подчеркивания.
Первичная ссылка
Вторичная ссылка
Ссылка успеха
Ссылка опасности
Ссылка предупреждения
Информационная ссылка
Светлая ссылка
Темная ссылка
00 02 Белая ссылкаЦвет фона
Подобно контекстным классам цвета текста, легко установить фон элемента в любой контекстный класс.
Якорные компоненты будут темнеть при наведении, как и текстовые классы. Фоновые утилиты не устанавливают цвет , поэтому в некоторых случаях вам может понадобиться использовать утилиты .text-* .
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-светлый
.bg-темный
.bg-белый
.bg-прозрачный
.bg-основной.bg-вторичный.bg-успех.bg-опасность.bg-предупреждение.bg-информация.bg-свет.bg-темный.bg-белый.bg-transparent
Градиент фона
Когда $enable-gradients имеет значение true (по умолчанию false ), вы можете использовать служебные классы .bg-gradient-. Узнайте о наших возможностях Sass, чтобы включить эти и другие классы.
-
.bg-градиент-первичный -
.bg-градиент-вторичный -
.bg-градиент-успех -
.bg-градиент-опасность -
.bg-предупреждение о градиенте -
.bg-градиент-информация -
.bg-градиентный свет -
.bg-градиент-темный
Bootstrap 4 цвета
❮ Предыдущая Далее ❯
Цвета текста
В Bootstrap 4 есть несколько контекстных классов, которые можно использовать для придания «значения через цвета».
Классы для цветов текста: .text-muted , .text-primary , .text-success , .text-info , .текстовое предупреждение , .text-danger , .text-secondary , .text-white , .text-dark , .text-body (цвет тела по умолчанию/часто черный) и . :
text-light
Пример
Этот текст отключен.
Этот текст важен.
Этот текст указывает на успех.
Этот текст содержит некоторую информацию.
Этот текст представляет собой предупреждение.
Этот текст представляет опасность.
Вторичный текст.
Темно-серый текст.
Основной текст.
Светло-серый текст.
Попробуйте сами »
Классы контекстного текста также можно использовать для ссылок, которые добавят более темный цвет при наведении:
Пример
Ссылка без звука. Основная ссылка. Ссылка на успех. Информационная ссылка. Предупреждающая ссылка. Ссылка на опасность. Вторичная ссылка. Темно-серая ссылка. Тело/черная ссылка. Светло-серая ссылка.
Попробуйте сами »
Вы также можете добавить 50% непрозрачности для черного или белого текста с помощью .text-black-50 или .text-white-50 классы:
Пример
Черный текст с непрозрачностью 50% на белом фоне
Белый текст с непрозрачностью 50% на черном фоне
Попробуйте сами »
Цвета фона
Классы для цветов фона: . , 
bg-primary , 0010 и .bg-light .
Обратите внимание, что цвета фона не задают цвет текста, поэтому в некоторых случаях вы захотите использовать их вместе с классом .text-* .
Пример
Этот текст важен.
Этот текст указывает на успех.
Этот текст содержит некоторую информацию.
Этот текст представляет собой предупреждение.
Этот текст представляет опасность.
Дополнительный цвет фона.
Темно-серый цвет фона.
Светло-серый цвет фона.
Попробуйте сами »
❮ Предыдущая Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник по HTMLУчебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
3 900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.
Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут 
Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут
Это сделано для более легкой настройки с самого начала пользования Bootstrap. Узнайте о параметрах Sass, об активации этих классов и т.д.
5
text-white-50
Якорные компоненты будут темнеть при наведении, как и текстовые классы. Фоновые утилиты не устанавливают 
Все они объединены в доступные разделы, что поможет вам создать привлекательный дизайн с согласованным цветом.
#1a237e темный индиго-4