Цвет и фон

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

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

Обзор

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

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

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

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

Вторичный с контрастным цветом

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

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

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

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

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

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

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>

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

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

Начальный Информация

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