Цвета
Передайте смысл через цвет с помощью нескольких полезных классов. Также включает поддержку стилизации ссылок с помощью состояний наведения.
Цвета
Раскрашивайте текст с помощью цветных утилит. Если Вы хотите раскрасить ссылки, Вы можете использовать вспомогательные классы .link-*, которые имеют состояния :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>.text-opacity-* и переменных CSS для текстовых утилит: .text-black-50 и .text-white-50 устарели с версии 5.1.1. Они будут удалены в версии 6.0.0.
Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden.
Непрозрачность
Добавлено в версии 5.1.1
Начиная с версии 5.1.1, утилиты цвета текста создаются с помощью 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 с помощью пользовательских стилей или встроенных стилей.
<divclass="text-primary">Это основной текст по умолчанию</div><divclass="text-primary"style="--bs-text-opacity: .5;">Это основной текст с непрозрачностью 50%</div>Или выберите любую из утилит .text-opacity:
<divclass="text-primary">Это основной текст по умолчанию</div><divclass="text-primary text-opacity-75">Это основной текст с непрозрачностью 75%</div><divclass="text-primary text-opacity-50">Это основной текст с непрозрачностью 50%</div><divclass="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-colors:map-loop($utilities-colors,rgba-css-var,"$key","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,"black-50":rgba($black,.5),//deprecated"white-50":rgba($white,.5),//deprecated"reset":inherit,))),"text-opacity":(css-var:true,class:text-opacity,values:(25:.25,50:.5,75:.75,100:1)),