Kulɛri & kɔkanna

Aw bɛ kɔkanna kulɛri dɔ sigi ni ɲɛfɛla kulɛri ye min tɛ kelen ye.

Nin ɲɛ in kan

Kuma bɛɛ lajɛlen

A farala a kan v5.2.0 kɔnɔ

Kulɛri ni kɔkanna dɛmɛbagaw bɛ an ka .text-*nafamafɛnw ni .bg-*nafalanw fanga fara ɲɔgɔn kan kalan kelen kɔnɔ. Baara kɛli n’an ka Sass color-contrast()baarakɛcogo ye, an bɛ danfara dɔ latigɛ an yɛrɛ colorye kɛrɛnkɛrɛnnenya la background-color.

Kungolow bɛ wuli! Sisan, dɛmɛ tɛ CSS-native color-contrastbaarakɛcogo la, o de kama an bɛ baara kɛ n’an yɛrɛ ta ye Sass fɛ. O kɔrɔ ye ko an ka barokun kulɛriw bɛrɛbɛnni CSS fɛn caman sɛgɛsɛgɛli fɛ, o bɛ se ka kɛ sababu ye ka kulɛriw danfara gɛlɛyaw lase o nafalanw ma.

Fɔlɔ ni kulɛri danfaralenw

Filanan ni kulɛri danfaralenw

Ɲɛtaa ni kulɛri danfaralenw ye

Farati min bɛ ni kulɛri danfaralenw ye

Lakɔlɔsili ni kulɛri danfaralenw

Info ni kulɛri danfaralen

Yeelen ni kulɛri danfaralenw

Dibi ni kulɛri danfaralenw

html ye

<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>

Ni yɔrɔw ye

Aw bɛ baara kɛ n’u ye faralen .text-*ni .bg-*kalanw nɔ na, i n’a fɔ badge kan :

Fɔlɔ Info

html ye

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

Walima kartiw kan :

Kungolodilan

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

html ye

<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>