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

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

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

Преглед

Додадено во v5.2.0

Помошниците за боја и позадина ја комбинираат моќта на нашите .text-*комунални услуги и .bg-*комунални услуги во една класа. Користејќи ја нашата color-contrast()функција Sass, ние автоматски одредуваме контраст 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>