Farba a pozadie

Nastavte farbu pozadia s kontrastnou farbou popredia.

Na tejto stránke

Prehľad

Pridané vo verzii 5.2.0

Pomocníci s farbami a pozadím spájajú silu našich .text-*utilít a .bg-*utilít v jednej triede. Pomocou našej funkcie Sass color-contrast()automaticky určíme kontrast colorpre konkrétny background-color.

Hlavy hore! V súčasnosti neexistuje žiadna podpora pre natívnu color-contrastfunkciu CSS, takže používame našu vlastnú cez Sass. To znamená, že prispôsobenie farieb našej témy pomocou premenných CSS môže spôsobiť problémy s farebným kontrastom týchto nástrojov.

Primárne s kontrastnou farbou

Sekundárne s kontrastnou farbou

Úspech s kontrastnou farbou

Nebezpečenstvo s kontrastnou farbou

Upozornenie s kontrastnou farbou

Info s kontrastnou farbou

Svetlo s kontrastnou farbou

Tmavé s kontrastnou farbou

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>

S komponentmi

Použite ich namiesto kombinácií .text-*a .bg-*tried, napríklad na odznakoch :

Primárny Info

html

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

Alebo na kartách :

Hlavička

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

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>