Цвет и фон

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

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

Обзор

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

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

Primary with contrasting color

Secondary with contrasting color

Success with contrasting color

Danger with contrasting color

Warning with contrasting color

Info with contrasting color

Light with contrasting color

Dark with contrasting color

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

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

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

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

Primary Info

html

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

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

Header

Some quick example text to build on the card title and make up the bulk of the card’s content.

Header

Some quick example text to build on the card title and make up the bulk of the card’s content.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
  </div>
</div>