Боја и позадина

Поставите боју позадине са контрастном бојом предњег плана.

На овој страници

Преглед

Додато у в5.2.0

Помоћници у боји и позадини комбинују снагу наших .text-*услужних програма и .bg-*услужних програма у једној класи. Користећи нашу Сасс color-contrast()функцију, аутоматски одређујемо контраст colorза одређени background-color.

Главу горе! Тренутно не постоји подршка за ЦСС-нативну color-contrastфункцију, тако да користимо своју преко Сасс-а. То значи да прилагођавање боја наше теме преко ЦСС променљивих може изазвати проблеме са контрастом боја са овим услужним програмима.

Примарни са контрастном бојом

Секундарни са контрастном бојом

Успех са контрастном бојом

Опасност са контрастном бојом

Упозорење са контрастном бојом

Информације са контрастном бојом

Светло са контрастном бојом

Тамно са контрастном бојом

хтмл

<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-*класа, као на значкама :

Примарни Инфо

хтмл

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

Или на картицама :

Хеадер

Неки брзи пример текста који се може надовезати на наслов картице и чинити највећи део садржаја картице.

Хеадер

Неки брзи пример текста који се може надовезати на наслов картице и чинити највећи део садржаја картице.

хтмл

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