Kulay at background

Magtakda ng kulay ng background na may magkakaibang kulay ng foreground.

Sa pahinang ito

Pangkalahatang-ideya

Idinagdag sa v5.2.0

Pinagsasama ng mga katulong sa kulay at background ang kapangyarihan ng aming mga .text-*utility at .bg-*utility sa isang klase. Gamit ang aming Sass color-contrast()function, awtomatiko naming tinutukoy ang contrasting colorpara sa isang partikular na background-color.

Heads up! Kasalukuyang walang suporta para sa isang CSS-native na color-contrastfunction, kaya ginagamit namin ang sarili namin sa pamamagitan ng Sass. Nangangahulugan ito na ang pag-customize ng aming mga kulay ng tema sa pamamagitan ng mga variable ng CSS ay maaaring magdulot ng mga isyu sa contrast ng kulay sa mga utility na ito.

Pangunahing may magkakaibang kulay

Pangalawa na may magkakaibang kulay

Tagumpay sa magkakaibang kulay

Panganib na may magkakaibang kulay

Babala na may magkakaibang kulay

Impormasyon na may magkakaibang kulay

Banayad na may magkakaibang kulay

Madilim na may magkakaibang kulay

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>

Sa mga sangkap

Gamitin ang mga ito bilang kapalit ng pinagsama .text-*at mga .bg-*klase, tulad ng sa mga badge :

Pangunahin Impormasyon

html

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

O sa mga card :

Header

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

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>