Ibara & inyuma

Shiraho ibara ry'inyuma hamwe n'ibara ry'imbere.

Kuriyi page

Incamake

Wongeyeho muri v5.2.0

Abafasha b'amabara ninyuma bahuza imbaraga zingirakamaro hamwe .text-*nibikorwa .bg-*byacu murwego rumwe. Dukoresheje imikorere yacu ya Sass color-contrast(), duhita tumenya itandukaniro colorkubintu runaka background-color.

Umutwe! Kugeza ubu nta nkunga yo gukora CSS-kavukire color-contrast, bityo dukoresha ibyacu binyuze kuri Sass. Ibi bivuze ko guhitamo amabara yinsanganyamatsiko ukoresheje CSS ihinduka bishobora gutera ibara ritandukanye nibibazo byingirakamaro.

Ibanze hamwe nibara ritandukanye

Icyiciro cya kabiri hamwe nibara ritandukanye

Intsinzi hamwe n'ibara ritandukanye

Akaga hamwe n'ibara ritandukanye

Kuburira hamwe n'ibara ritandukanye

Amakuru atandukanye

Umucyo ufite ibara ritandukanye

Umwijima ufite ibara ritandukanye

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>

Hamwe nibigize

Koresha mu mwanya uhuriweho .text-*n'amasomo .bg-*, nko kuri badge :

Ibanze Amakuru

html

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

Cyangwa ku makarita :

Umutwe

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

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>