Rangi na usuli

Weka rangi ya mandharinyuma yenye rangi tofauti ya mandharinyuma.

Katika ukurasa huu

Muhtasari

Imeongezwa katika v5.2.0

Wasaidizi wa rangi na mandharinyuma huchanganya nguvu za .text-*huduma na .bg-*huduma zetu katika darasa moja. Kwa kutumia chaguo zetu za kukokotoa za Sass color-contrast(), tunabainisha kiotomatiki utofautishaji colorwa background-color.

Vichwa juu! Kwa sasa hakuna utumiaji wa chaguo za kukokotoa asilia za CSS color-contrast, kwa hivyo tunatumia yetu kupitia Sass. Hii inamaanisha kuwa kubinafsisha rangi zetu za mandhari kupitia vigeu vya CSS kunaweza kusababisha masuala ya utofautishaji wa rangi na huduma hizi.

Msingi na rangi tofauti

Sekondari na rangi tofauti

Mafanikio na rangi tofauti

Hatari na rangi tofauti

Onyo na rangi tofauti

Maelezo yenye rangi tofauti

Mwanga na rangi tofauti

Giza na rangi tofauti

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>

Pamoja na vipengele

Zitumie badala ya pamoja .text-*na .bg-*madarasa, kama kwenye beji :

Msingi Habari

html

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

Au kwenye kadi :

Kijajuu

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

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>