Колір і фон

Установіть колір фону з контрастним кольором переднього плану.

На цій сторінці

Огляд

Додано у v5.2.0

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

Голови вгору! Наразі немає підтримки для нативних color-contrastфункцій CSS, тому ми використовуємо власні через 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>