Цвят и фон

Задайте цвят на фона с контрастен цвят на преден план.

На тази страница

Преглед

Добавен във v5.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>