Langi & ennyuma

Teeka langi y’emabega nga erina langi y’omu maaso eyawukana.

Ku muko guno

Okulaba okutwalira awamu

Yayongerwako mu v5.2.0

Abayambi ba langi n’emabega bagatta amaanyi g’ebikozesebwa byaffe n’ebikozesebwa mu .text-*kiraasi emu. Nga tukozesa omulimu gwaffe ogwa Sass , tusalawo otomatika ekintu eky’enjawulo ku kintu ekimu ..bg-*color-contrast()colorbackground-color

Emitwe gigulumivu! Mu kiseera kino tewali buwagizi bwa CSS-native color-contrastfunction, kale tukozesa eyaffe nga tuyita mu Sass. Kino kitegeeza nti okulongoosa langi zaffe ez’omulamwa nga tuyita mu nkyukakyuka za CSS kiyinza okuleeta ensonga z’enjawulo za langi n’ebikozesebwa bino.

Primary nga eriko langi eyawukana

Secondary nga erina langi eyawukana

Obuwanguzi nga olina langi ez’enjawulo

Obulabe nga buliko langi ez’enjawulo

Okulabula nga kuliko langi ez’enjawulo

Info nga eriko langi eyawukana

Ekitangaala nga kiriko langi eyawukana

Enzirugavu nga erina langi eyawukana

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>

Nga mulimu ebitundu ebikola

Zikozese mu kifo kya combined .text-*ne .bg-*classes, nga ku badge :

Pulayimale Info

html

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

Oba ku kaadi :

Omutwe

Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.

Omutwe

Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.

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>