Värv ja taust

Määrake taustavärv kontrastse esiplaanivärviga.

Sellel lehel

Ülevaade

Lisatud versioonisse v5.2.0

Värvi- ja taustaabilised ühendavad meie .text-*kommunaalteenuste ja .bg-*kommunaalteenuste võimsuse ühes klassis. Kasutades funktsiooni Sass color-contrast(), määrame automaatselt konkreetse colorkontrasti background-color.

Pea püsti! Praegu ei toetata CSS-i loomulikku color-contrastfunktsiooni, seega kasutame Sassi kaudu oma funktsiooni. See tähendab, et meie teemavärvide kohandamine CSS-i muutujate kaudu võib nende utiliitide puhul põhjustada värvikontrastsuse probleeme.

Esmane kontrastvärviga

Sekundaarne kontrastse värviga

Edu kontrastse värviga

Oht kontrastse värviga

Hoiatus kontrastse värviga

Info kontrastse värviga

Hele kontrastse värviga

Tume kontrastse värviga

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>

Koos komponentidega

Kasutage neid kombineeritud .text-*ja .bg-*klasside asemel, näiteks märkidel :

Esmane Info

html

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

Või kaartidel :

Päis

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

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>