Mmala le bokamorao

Seta bokamorao ba 'mala o nang le mebala e fapaneng ea bokapele.

Leqepheng lena

Kakaretso

E kentsoe ho v5.2.0

Mebala le bathusi ba bokantle ba kopanya matla a .text-*lits'ebeletso tsa rona le .bg-*lits'ebeletso tsa rona sehlopheng se le seng. Ka ho sebelisa tšebetso ea Sass color-contrast(), re ikhethela ka bohona phapano colorea mofuta o itseng background-color.

Hlokomela! Hajoale ha ho na ts'ehetso bakeng sa ts'ebetso ea tlhaho ea CSS color-contrast, kahoo re sebelisa ea rona ka Sass. Sena se bolela hore ho etsa mebala ea sehlooho sa rona ka mefuta-futa ea CSS ho ka baka mathata a fapaneng a mebala le lisebelisoa tsena.

Ea mantlha e nang le mebala e fapaneng

Ea bobeli e nang le mebala e fapaneng

Katleho e nang le mebala e fapaneng

Kotsi e nang le mebala e fapaneng

Tlhokomediso e nang le mmala o fapaneng

Lintlha tse nang le mebala e fapaneng

Leseli le nang le mebala e fapaneng

Lefifi le mmala o fapaneng

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>

Ka likarolo

Li sebelise sebakeng sa lihlopha tse kopantsoeng .text-*le .bg-*lihlopha, joalo ka libeche :

Ea mantlha Info

html

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

Kapa ka likarete :

Hlooho

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

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>