Цвета
Передайте смысл через цвет с помощью нескольких полезных классов. Также включает поддержку стилизации ссылок с помощью состояний наведения.
Цвета
Раскрашивайте текст с помощью цветных утилит. Если вы хотите раскрасить ссылки, вы можете использовать вспомогательные классы .link-* helper classes, которые имеют состояния :hover и :focus.
.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
<pclass="text-primary">.text-primary</p><pclass="text-secondary">.text-secondary</p><pclass="text-success">.text-success</p><pclass="text-danger">.text-danger</p><pclass="text-warning bg-dark">.text-warning</p><pclass="text-info bg-dark">.text-info</p><pclass="text-light bg-dark">.text-light</p><pclass="text-dark">.text-dark</p><pclass="text-body">.text-body</p><pclass="text-muted">.text-muted</p><pclass="text-white bg-dark">.text-white</p><pclass="text-black-50">.text-black-50</p><pclass="text-white-50 bg-dark">.text-white-50</p>Предание выразительности при помощи вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, выделенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый класс .visually-hidden.
Специфика
Иногда контекстные классы нельзя применять из-за специфики другого селектора. В некоторых случаях достаточным обходным путем является обертывание содержимого вашего элемента в <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);Утилиты API
Утилиты цвета объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.
"color":(property:color,class:text,values:map-merge($theme-colors,("white":$white,"body":$body-color,"muted":$text-muted,"black-50":rgba($black,.5),"white-50":rgba($white,.5),"reset":inherit,))),