1111
Перейти к основному содержаниюПерейти к навигации по документам
Cмотреть на GitHub

Цвета

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

На этой странице
Совет по специальным возможностям. Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Пожалуйста, убедитесь, что значение очевидно из самого содержания (например, видимого текста) или включено с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden.

Цвета

Раскрашивайте текст с помощью цветных утилит. Если Вы хотите раскрасить ссылки, Вы можете использовать вспомогательные классы .link-*, которые имеют состояния :hover и :focus.

Цветовые утилиты, такие как .text-* , сгенерированные из нашей исходной карты Sass $theme-colors, еще не реагируют на цветовые режимы, однако любая утилита .text-*-emphasis будет. Это будет решено в 6 версии.

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

.text-black

.text-white

.text-black-50

.text-white-50

html
<pclass="text-primary">.text-primary</p><pclass="text-primary-emphasis">.text-primary-emphasis</p><pclass="text-secondary">.text-secondary</p><pclass="text-secondary-emphasis">.text-secondary-emphasis</p><pclass="text-success">.text-success</p><pclass="text-success-emphasis">.text-success-emphasis</p><pclass="text-danger">.text-danger</p><pclass="text-danger-emphasis">.text-danger-emphasis</p><pclass="text-warning bg-dark">.text-warning</p><pclass="text-warning-emphasis">.text-warning-emphasis</p><pclass="text-info bg-dark">.text-info</p><pclass="text-info-emphasis">.text-info-emphasis</p><pclass="text-light bg-dark">.text-light</p><pclass="text-light-emphasis">.text-light-emphasis</p><pclass="text-dark bg-white">.text-dark</p><pclass="text-dark-emphasis">.text-dark-emphasis</p><pclass="text-body">.text-body</p><pclass="text-body-emphasis">.text-body-emphasis</p><pclass="text-body-secondary">.text-body-secondary</p><pclass="text-body-tertiary">.text-body-tertiary</p><pclass="text-black bg-white">.text-black</p><pclass="text-white bg-dark">.text-white</p><pclass="text-black-50 bg-white">.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.0. Они будут удалены в версии 6.0.0.
Устарело: С добавлением расширенных цветов и переменных темы утилита .text-muted устарела, начиная с версии 5.3.0. Его значение по умолчанию также было переназначено новой переменной CSS --bs-secondary-color для лучшей поддержки цветовых режимов. Он будет удален в версии 6.0.0.

Непрозрачность

Добавлено в версии 5.1.0

Начиная с версии 5.1.0, утилиты цвета текста создаются с помощью 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 с помощью пользовательских стилей или встроенных стилей.

Это основной текст по умолчанию
Это основной текст с непрозрачностью 50%
html
<divclass="text-primary">Это основной текст по умолчанию</div><divclass="text-primary"style="--bs-text-opacity: .5;">Это основной текст с непрозрачностью 50%</div>

Или выберите любую из утилит .text-opacity:

Это основной текст по умолчанию
Это основной текст с непрозрачностью 75%
Это основной текст с непрозрачностью 50%
Это основной текст с непрозрачностью 25%
html
<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> или более семантический элемент с желаемым классом.

CSS

В дополнение к следующей функциональности Sass, рассмотрите возможность чтения о наших включенных настраиваемых свойствах CSS (также известных как переменные CSS) для цветов и многого другого.

Sass переменные

Большинство утилит color генерируются цветами нашей темы, переназначенными из переменных нашей общей цветовой палитры.

scss/_variables.scss
$blue:#0d6efd;$indigo:#6610f2;$purple:#6f42c1;$pink:#d63384;$red:#dc3545;$orange:#fd7e14;$yellow:#ffc107;$green:#198754;$teal:#20c997;$cyan:#0dcaf0;
scss/_variables.scss
$primary:$blue;$secondary:$gray-600;$success:$green;$info:$cyan;$warning:$yellow;$danger:$red;$light:$gray-100;$dark:$gray-900;

Также доступны оттенки серого, но для создания утилит используется только подмножество.

scss/_variables.scss
$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;
scss/_maps.scss
$theme-colors-text:("primary":$primary-text-emphasis,"secondary":$secondary-text-emphasis,"success":$success-text-emphasis,"info":$info-text-emphasis,"warning":$warning-text-emphasis,"danger":$danger-text-emphasis,"light":$light-text-emphasis,"dark":$dark-text-emphasis,);

Переменные для установки цветов в утилитах .text-*-emphasis в светлом и темном режимах:

scss/_variables.scss
$primary-text-emphasis:shade-color($primary,60%);$secondary-text-emphasis:shade-color($secondary,60%);$success-text-emphasis:shade-color($success,60%);$info-text-emphasis:shade-color($info,60%);$warning-text-emphasis:shade-color($warning,60%);$danger-text-emphasis:shade-color($danger,60%);$light-text-emphasis:$gray-700;$dark-text-emphasis:$gray-700;
scss/_variables-dark.scss
$primary-text-emphasis-dark:tint-color($primary,40%);$secondary-text-emphasis-dark:tint-color($secondary,40%);$success-text-emphasis-dark:tint-color($success,40%);$info-text-emphasis-dark:tint-color($info,40%);$warning-text-emphasis-dark:tint-color($warning,40%);$danger-text-emphasis-dark:tint-color($danger,40%);$light-text-emphasis-dark:$gray-100;$dark-text-emphasis-dark:$gray-300;

Sass карта

Затем цвета темы помещаются в карту Sass, чтобы мы могли перебирать их, чтобы сгенерировать наши утилиты, модификаторы компонентов и многое другое.

scss/_variables.scss
$theme-colors:("primary":$primary,"secondary":$secondary,"success":$success,"info":$info,"warning":$warning,"danger":$danger,"light":$light,"dark":$dark);

Цвета в градациях серого также доступны в виде карты Sass. Эта карта не используется для создания каких-либо утилит.

scss/_variables.scss
$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:

scss/_maps.scss
$theme-colors-rgb:map-loop($theme-colors,to-rgb,"$value");

Непрозрачность цвета основана на собственной карте, которая используется API-интерфейсом утилит:

scss/_maps.scss
$utilities-text:map-merge($utilities-colors,("black":to-rgb($black),"white":to-rgb($white),"body":to-rgb($body-color)));$utilities-text-colors:map-loop($utilities-text,rgba-css-var,"$key","text");$utilities-text-emphasis-colors:("primary-emphasis":var(--#{$prefix}primary-text-emphasis),"secondary-emphasis":var(--#{$prefix}secondary-text-emphasis),"success-emphasis":var(--#{$prefix}success-text-emphasis),"info-emphasis":var(--#{$prefix}info-text-emphasis),"warning-emphasis":var(--#{$prefix}warning-text-emphasis),"danger-emphasis":var(--#{$prefix}danger-text-emphasis),"light-emphasis":var(--#{$prefix}light-text-emphasis),"dark-emphasis":var(--#{$prefix}dark-text-emphasis));

Адаптивные цвета текста цветового режима также доступны в виде карты Sass:

scss/_maps.scss
$theme-colors-text:("primary":$primary-text-emphasis,"secondary":$secondary-text-emphasis,"success":$success-text-emphasis,"info":$info-text-emphasis,"warning":$warning-text-emphasis,"danger":$danger-text-emphasis,"light":$light-text-emphasis,"dark":$dark-text-emphasis,);
scss/_maps.scss
$theme-colors-text-dark:("primary":$primary-text-emphasis-dark,"secondary":$secondary-text-emphasis-dark,"success":$success-text-emphasis-dark,"info":$info-text-emphasis-dark,"warning":$warning-text-emphasis-dark,"danger":$danger-text-emphasis-dark,"light":$light-text-emphasis-dark,"dark":$dark-text-emphasis-dark,);

Sass API утилиты

Утилиты цвета объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

scss/_utilities.scss
"color":(property:color,class:text,local-vars:("text-opacity":1),values:map-merge($utilities-text-colors,("muted":var(--#{$prefix}secondary-color),//deprecated"black-50":rgba($black,.5),//deprecated"white-50":rgba($white,.5),//deprecated"body-secondary":var(--#{$prefix}secondary-color),"body-tertiary":var(--#{$prefix}tertiary-color),"body-emphasis":var(--#{$prefix}emphasis-color),"reset":inherit,))),"text-opacity":(css-var:true,class:text-opacity,values:(25:.25,50:.5,75:.75,100:1)),"text-color":(property:color,class:text,values:$utilities-text-emphasis-colors),