Колер і фон

Усталюйце колер фону з кантрасным колерам пярэдняга плана.

На гэтай старонцы

Агляд

Дададзена ў 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>