Umbala nengemuva

Setha umbala wangemuva onombala wangaphambili ohlukile.

Kuleli khasi

Uhlolojikelele

Kwengezwe ku-v5.2.0

Umbala nabasizi bangemuva bahlanganisa amandla ezinsiza zethu nezinsiza ekilasini .text-*elilodwa . Ngokusebenzisa umsebenzi wethu we-Sass , sinquma ngokuzenzakalelayo ukugqama kwento ethile ..bg-*color-contrast()colorbackground-color

Amakhanda phezulu! Okwamanje akukho usekelo lomsebenzi womdabu we-CSS color-contrast, ngakho sisebenzisa owethu nge-Sass. Lokhu kusho ukuthi ukwenza ngezifiso imibala yethu yetimu ngokuhlukahluka kwe-CSS kungase kubangele izinkinga zokungafani kombala ngalezi zinsiza.

Okuyinhloko ngombala ohlukile

Okwesibili ngombala ohlukile

Impumelelo ngombala ohlukile

Ingozi enombala ohlukile

Isexwayiso esinombala ohlukile

Ulwazi olunombala ohlukile

Ukukhanya okunombala ohlukile

Imnyama enombala ohlukile

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>

Ngezingxenye

Zisebenzise esikhundleni sokuhlanganisiwe .text-*namakilasi .bg-*, njengakumabheji :

Okuyinhloko Ulwazi

html

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

Noma kumakhadi :

Unhlokweni

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

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>