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

Цвета

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

Цвета

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

.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-muted

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

.text-black

.text-white

.text-black-50

.text-white-50

html
<p class="text-primary">.text-primary</p>
<p class="text-primary-emphasis">.text-primary-emphasis</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-secondary-emphasis">.text-secondary-emphasis</p>
<p class="text-success">.text-success</p>
<p class="text-success-emphasis">.text-success-emphasis</p>
<p class="text-danger">.text-danger</p>
<p class="text-danger-emphasis">.text-danger-emphasis</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-warning-emphasis">.text-warning-emphasis</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-info-emphasis">.text-info-emphasis</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-light-emphasis">.text-light-emphasis</p>
<p class="text-dark bg-white">.text-dark</p>
<p class="text-dark-emphasis">.text-dark-emphasis</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>

<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>

<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Устарело: С добавлением утилит .text-opacity-* и переменных CSS для текстовых утилит: .text-black-50 и .text-white-50 устарели с версии 5.1.0. Они будут удалены в версии 6.0.0.
Deprecation: With the addition of the expanded theme colors and variables, the .text-muted utility has been deprecated as of v5.3.0. Its default value has also has been reassigned to the new --bs-secondary-color CSS variable to better support color modes. It will be removed in v6.0.0.
Передача смысла вспомогательным технологиям

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

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

Добавлено в версии 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
<div class="text-primary">Это основной текст по умолчанию</div>
<div class="text-primary" style="--bs-text-opacity: .5;">Это основной текст с непрозрачностью 50%</div>

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

Это основной текст по умолчанию
Это основной текст с непрозрачностью 75%
Это основной текст с непрозрачностью 50%
Это основной текст с непрозрачностью 25%
html
<div class="text-primary">Это основной текст по умолчанию</div>
<div class="text-primary text-opacity-75">Это основной текст с непрозрачностью 75%</div>
<div class="text-primary text-opacity-50">Это основной текст с непрозрачностью 50%</div>
<div class="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: 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),
  "secondary-emphasis": var(--#{$prefix}secondary-text),
  "success-emphasis": var(--#{$prefix}success-text),
  "info-emphasis": var(--#{$prefix}info-text),
  "warning-emphasis": var(--#{$prefix}warning-text),
  "danger-emphasis": var(--#{$prefix}danger-text),
  "light-emphasis": var(--#{$prefix}light-text),
  "dark-emphasis": var(--#{$prefix}dark-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, // 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
    ),