Agba & ndabere

Tọọ ụcha okirikiri nwere agba ihu dị iche.

Na ibe a

Nchịkọta

Agbakwunyere na v5.2.0

Ndị na-enyere aka agba na ndabere na-ejikọta ike nke .text-*akụrụngwa na .bg-*akụrụngwa anyị n'otu klaasị. Iji ọrụ Sass color-contrast()anyị, anyị na-ekpebi ihe dị iche colormaka otu background-color.

Welie isi elu! Enweghị nkwado ugbu a maka ọrụ obodo CSS color-contrast, yabụ anyị na-eji nke anyị site na Sass. Nke a pụtara na ịhazi agba isiokwu anyị site na mgbanwe CSS nwere ike bute esemokwu ọdịiche agba na akụrụngwa ndị a.

Isi na agba dị iche

Nke abụọ na agba iche

Ihe ịga nke ọma na agba dị iche

Ihe ize ndụ na agba dị iche

Ịdọ aka ná ntị na agba dị iche

Ozi nwere agba dị iche

Ìhè na agba dị iche

Ọchịchịrị na agba dị iche

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>

Na components

Jiri ha n'ọnọdụ jikọtara ọnụ .text-*na .bg-*klaasị, dị ka na baajị :

Isi Ozi

html

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

Ma ọ bụ na kaadị :

nkụnye eji isi mee

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

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>