Kolor ug background

Pagbutang og kolor sa background nga adunay magkalahi nga kolor sa foreground.

Niini nga panid

Overview

Gidugang sa v5.2.0

Ang mga katabang sa kolor ug background naghiusa sa gahum sa among mga .text-*utilities ug mga .bg-*gamit sa usa ka klase. Gamit ang among function sa Sass color-contrast(), awtomatiko namon nga mahibal-an ang usa ka kalainan coloralang sa usa ka partikular nga background-color.

Taas ang ulo! Sa pagkakaron walay suporta alang sa CSS-native color-contrastfunction, mao nga gigamit namo ang among kaugalingon pinaagi sa Sass. Kini nagpasabut nga ang pag-customize sa among mga kolor sa tema pinaagi sa mga variable sa CSS mahimong hinungdan sa mga isyu sa kalainan sa kolor sa kini nga mga gamit.

Primary nga adunay magkalahi nga kolor

Ikaduha nga adunay magkalahi nga kolor

Kalampusan uban sa nagkalahi nga kolor

Peligro sa nagkalahi nga kolor

Pasidaan nga adunay magkalahi nga kolor

Impormasyon nga adunay magkalahi nga kolor

Kahayag nga adunay magkalahi nga kolor

Ngitngit nga adunay magkalahi nga kolor

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>

Uban sa mga sangkap

Gamita kini puli sa kombinasyon .text-*ug .bg-*mga klase, sama sa mga badge :

Primary Impormasyon

html

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

O sa mga kard :

Ulohan

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

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>