Kɔla & akyi mfonini

Fa akyi kɔla a ɛwɔ anim kɔla a ɛne ne ho bɔ abira si hɔ.

Wɔ kratafa yi so

Nsɛm a Wɔaka abom

Wɔde aka ho wɔ v5.2.0 mu

Kɔla ne akyi aboafo ka yɛn .text-*utilities ne .bg-*utilities ahoɔden bom wɔ adesuakuw biako mu. Sɛ yɛde yɛn Sass color-contrast()dwumadie no di dwuma a, yɛkyerɛ nsonsonoeɛ colorbi ma pɔtee bi background-color.

Ti a ɛwɔ soro! Mprempren mmoa biara nni hɔ ma CSS-native color-contrastadwuma, enti yɛde yɛn de di dwuma via Sass. Wei kyerɛ sɛ sɛ yɛsesa yɛn asɛmti kɔla ahorow no denam CSS nsakrae ahorow so a, ebetumi de kɔla ahorow a ɛne ne ho bɔ abira ho nsɛm aba saa mfaso horow yi ho.

Primary a ɛwɔ kɔla a ɛne ne ho bɔ abira

Nea ɛto so abien a ɛwɔ kɔla a ɛne ne ho bɔ abira

Odi yiye a ɛwɔ kɔla ahorow a ɛne ne ho bɔ abira

Asiane a ɛwɔ kɔla a ɛne ne ho bɔ abira

Kɔkɔbɔ a ɛwɔ kɔla a ɛne ne ho bɔ abira

Info a ɛwɔ kɔla a ɛne ne ho bɔ abira

Hann a ɛwɔ kɔla a ɛne ne ho bɔ abira

Esum a ɛwɔ kɔla a ɛne ne ho bɔ abira

html na ɛwɔ hɔ

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

Ne nneɛma a ɛwom

Fa di dwuma wɔ combined .text-*ne .bg-*classes ananmu, te sɛ badge ahorow so :

Mfiaseɛ Info

html na ɛwɔ hɔ

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

Anaasɛ wɔ nkrataa so : .

Titiriw

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

html na ɛwɔ hɔ

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