Цвет и фон

Установите цвет фона с контрастным цветом переднего плана.

Обзор

Помощники по цвету и фону объединяют возможности утилит .text-* и утилит .bg-* в одном классе. Используя функцию Sass color-contrast(), бутстрап автоматически определяет контрастность color для конкретного background-color объекта.

Внимание! В настоящее время нет поддержки встроенной в CSS color-contrast функции, поэтому мы используем нашу собственную через Sass. Это означает, что настройка цветов нашей темы с помощью переменных CSS может вызвать проблемы с цветовым контрастом в этих утилитах.

<div class="text-bg-primary p-3">Основной с контрастным цветом</div>
<div class="text-bg-secondary p-3">Дополнительный с контрастным цветом</div>
<div class="text-bg-success p-3">Успех с контрастным цветом</div>
<div class="text-bg-danger p-3">Опасность контрастного цвета</div>
<div class="text-bg-warning p-3">Предупреждение контрастным цветом</div>
<div class="text-bg-info p-3">Информация контрастным цветом</div>
<div class="text-bg-light p-3">Подсветка контрастным цветом</div>
<div class="text-bg-dark p-3">Темный с контрастным цветом</div>

Результат:

Основной с контрастным цветом

Дополнительный с контрастным цветом

Успех с контрастным цветом

Опасность контрастного цвета

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

Информация контрастным цветом

Подсветка контрастным цветом

Темный с контрастным цветом

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

С компонентами

Используйте их вместо комбинированных .text-* и .bg-* классов, как на значках:

<span class="badge text-bg-primary">Основная</span>
<span class="badge text-bg-info">информация</span>

Результат:

Основная информация

Или на карточках:

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <p class="card-text">Несколько кратких примеров текста для создания заголовка карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <p class="card-text">Несколько кратких примеров текста для создания заголовка карточки и составления основной части содержимого карточки.</p>
  </div>
</div>

Результат:

Заголовок

Несколько кратких примеров текста для создания заголовка карточки и составления основной части содержимого карточки.

Заголовок

На этой странице