Barva a pozadí

Nastavte barvu pozadí s kontrastní barvou popředí.

Na této straně

Přehled

Přidáno ve verzi 5.2.0

Pomocníci s barvami a pozadím spojují sílu našich .text-*utilit a .bg-*utilit v jedné třídě. Pomocí naší funkce Sass color-contrast()automaticky určíme kontrast colorpro konkrétní background-color.

Hlavy vzhůru! V současné době neexistuje žádná podpora pro nativní color-contrastfunkce CSS, takže používáme vlastní přes Sass. To znamená, že přizpůsobení barev motivu pomocí proměnných CSS může způsobit problémy s barevným kontrastem těchto nástrojů.

Primární s kontrastní barvou

Sekundární s kontrastní barvou

Úspěch s kontrastní barvou

Nebezpečí s kontrastní barvou

Upozornění s kontrastní barvou

Info s kontrastní barvou

Světlé s kontrastní barvou

Tmavé s kontrastní barvou

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 komponenty

Použijte je místo kombinovaných .text-*a .bg-*tříd, jako na odznakech :

Hlavní Info

html

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

Nebo na kartách :

Záhlaví

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří větš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>