Muhlovo & xivumbeko xa le ndzhaku

Seta muvala wa le ndzhaku hi muvala wa le mahlweni lowu hambaneke.

Eka tluka leri

Nkatsakanyo

Ku engeteriwe eka v5.2.0

Vapfuni va mihlovo na le ndzhaku va hlanganisa matimba ya .text-*switirhisiwa swa hina na .bg-*switirhisiwa eka tlilasi yin’we. Hi ku tirhisa ntirho wa hina wa Sass color-contrast(), hi tisungulela ku kumisisa ku hambana colorka nchumu wo karhi background-color.

Tinhloko ti tlakukile! Sweswi a ku na nseketelo wa ntirho wa CSS-native color-contrast, kutani hi tirhisa wa hina hi ku tirhisa Sass. Leswi swi vula leswaku ku lulamisa mihlovo ya hina ya theme hi ku tirhisa swilo leswi cinca-cincaka swa CSS swi nga vanga swiphiqo swa ku hambana ka mihlovo eka switirhisiwa leswi.

Primary leyi nga ni muvala lowu hambaneke

Secondary na muvala lowu hambaneke

Ku humelela hi muvala lowu hambaneke

Khombo leri nga ni muvala lowu hambaneke

Xitsundzuxo lexi nga ni muvala lowu hambaneke

Info na muvala wo hambana

Ku vonakala loku nga ni muvala lowu hambaneke

Munyama lowu nga ni muvala lowu hambaneke

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>

Hi swiphemu swa yona

Ti tirhise ematshan’wini ya ti combined .text-*na .bg-*titlilasi, ku fana na le ka tibeji :

Phurayimari Info

html

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

Kumbe eka makhadi : .

Nhlokomhaka

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

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>