Väri & tausta

Aseta taustaväri kontrastisella etualalla.

Tällä sivulla

Yleiskatsaus

Lisätty versioon 5.2.0

Väri- ja tausta- .text-*apuohjelmat yhdistävät apuohjelmiemme tehon .bg-*yhdessä luokassa. Käyttämällä Sass - color-contrast()toimintoa määritämme automaattisesti kontrastin colortietylle background-color.

Varoitus! Tällä hetkellä ei ole tukea CSS-natiivitoiminnolle color-contrast, joten käytämme omaa Sassin kautta. Tämä tarkoittaa, että teemavärien mukauttaminen CSS-muuttujien avulla voi aiheuttaa värikontrastiongelmia näissä apuohjelmissa.

Ensisijainen kontrastivärillä

Toissijainen kontrastivärinen

Menestys kontrastivärillä

Vaara kontrastivärin kanssa

Varoitus kontrastivärillä

Info kontrastivärillä

Vaalea kontrastivärisellä

Tumma kontrastivärisellä

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>

Komponenttien kanssa

Käytä niitä yhdistettyjen .text-*ja .bg-*luokkien sijasta, kuten merkeissä :

Ensisijainen Tiedot

html

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

Tai korteilla :

Otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

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>