Umbala & nemvelaphi

Seta umbala ongasemva onombala ongaphambili owahlukileyo.

Kweli phepha

Isishwankathelo

Ifakwe kwi-v5.2.0

Umbala kunye nabancedisi bangemva badibanisa amandla ezinto zethu .text-*eziluncedo kunye .bg-*nezinto eziluncedo kwiklasi enye. Ngokusebenzisa umsebenzi wethu we-Sass color-contrast(), ngokuzenzekelayo simisela umahluko wento colorethile background-color.

Iintloko phezulu! Okwangoku akukho nkxaso yomsebenzi we-CSS color-contrast, ke sisebenzisa eyethu nge-Sass. Oku kuthetha ukuba ukwenza ngokwezifiso imibala yethu yomxholo ngokuguquguquka kweCSS kunokubangela imiba yomahluko wemibala ngezi zixhobo.

Iprayimari enemibala eyahlukileyo

Isibini esinombala owahlukileyo

Impumelelo ngombala ochaseneyo

Ingozi enemibala eyahlukileyo

Isilumkiso esinombala owahlukileyo

Ulwazi olunombala owahlukileyo

Ukukhanya ngombala owahlukileyo

Mnyama ngombala owahlukileyo

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>

Ngamacandelo

Zisebenzise endaweni edityanisiweyo .text-*kunye .bg-*neeklasi, njengeebheji :

Amabanga aphantsi Ulwazi

html

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

Okanye kumakhadi :

Okubhalwe ngasentla kwekhasi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

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>