Цвет и фон

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

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

Обзор

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

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

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

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

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

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

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

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

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

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

html

<div class="text-bg-primary p-3">Primary с контрастным цветом</div>
<div class="text-bg-secondary p-3">Secondary с контрастным цветом</div>
<div class="text-bg-success p-3">Success с контрастным цветом</div>
<div class="text-bg-danger p-3">Danger с контрастным цветом</div>
<div class="text-bg-warning p-3">Warning с контрастным цветом</div>
<div class="text-bg-info p-3">Info с контрастным цветом</div>
<div class="text-bg-light p-3">Light с контрастным цветом</div>
<div class="text-bg-dark p-3">Dark с контрастным цветом</div>

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

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

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

Primary Info

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

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

Заголовок

Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карточки.

Заголовок

html

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