kala a me ka hope

E hoʻonoho i kahi waihoʻoluʻu hope me ka waihoʻoluʻu mua.

Ma kēia ʻaoʻao

Nānā nui

Hoʻohui ʻia ma v5.2.0

Hoʻohui nā kala a me nā mea kōkua hope i ka mana o kā mākou mau .text-*pono a me .bg-*nā pono hana i hoʻokahi papa. Ke hoʻohana nei i kā mākou hana Sass color-contrast(), hoʻoholo maʻalahi mākou i kahi ʻokoʻa colorno kahi background-color.

Nā poʻo i luna! ʻAʻohe kākoʻo i kēia manawa no kahi hana CSS-native color-contrast, no laila hoʻohana mākou i kā mākou iho ma o Sass. ʻO ia ke kumu o ka hoʻopilikino ʻana i kā mākou mau kala kumuhana ma o nā ʻano hoʻololi CSS hiki ke kumu i nā pilikia ʻokoʻa kala me kēia mau pono.

Primary me ke kala ʻokoʻa

Ka lua me ke kala ʻokoʻa

Pōmaikaʻi me ke kala ʻokoʻa

ʻO ka pōʻino me ke kala ʻokoʻa

'Ōlelo aʻo me ke kala ʻokoʻa

ʻIke me ke kala ʻokoʻa

Māmā me ke kala ʻokoʻa

ʻeleʻele me ke kala ʻokoʻa

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>

Me nā ʻāpana

E hoʻohana iā lākou ma kahi o nā hui hui .text-*a me .bg-*nā papa, e like me nā hōʻailona :

Papahana ʻIke

html

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

A i ʻole ma nā kāleka :

Poʻomanaʻo

ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.

Poʻomanaʻo

ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.

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>