Mtundu & maziko

Khazikitsani mtundu wakumbuyo wokhala ndi mtundu wakutsogolo wosiyana.

Patsamba ili

Mwachidule

Yowonjezedwa mu v5.2.0

Zothandizira zamitundu ndi zakumbuyo zimaphatikiza mphamvu zamagwiritsidwe athu ndi .text-*zofunikira m'gulu limodzi. Pogwiritsa ntchito ntchito yathu ya Sass , timadziwiratu kusiyanitsa kwa china chake ..bg-*color-contrast()colorbackground-color

Mungodziwiratu! Pakadali pano palibe chithandizo chamtundu wa CSS color-contrast, chifukwa chake timagwiritsa ntchito zathu kudzera pa Sass. Izi zikutanthauza kuti kusintha mitundu yathu yamutu kudzera pamitundu yosiyanasiyana ya CSS kungayambitse kusiyana kwa mitundu ndi izi.

Choyambirira chokhala ndi mitundu yosiyana

Yachiwiri ndi mtundu wosiyana

Kupambana ndi mtundu wosiyana

Zowopsa ndi mtundu wosiyana

Chenjezo lokhala ndi mtundu wosiyana

Zambiri zokhala ndi mitundu yosiyana

Kuwala kokhala ndi mtundu wosiyana

Chakuda chosiyana ndi mtundu

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>

Ndi zigawo

Gwiritsani ntchito m'malo mwa ophatikiza .text-*ndi .bg-*makalasi, monga pa mabaji :

Pulayimale Zambiri

html

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

Kapena pa makadi :

Mutu

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

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>