Halluu & duubbee

Halluu duubbee halluu fuulduraa walfaallaa ta'een saagi.

Fuula kana irratti

Haala Waliigalaa

v5.2.0 keessatti dabalameera

Gargaartoonni halluu fi duubbee humna faayidaa fi faayidaa keenyaa kutaa tokko .text-*keessatti walitti fidu. Faankishinii Sass keenya fayyadamuun , ofumaan walfaallaa murtaa'eef murteessina ..bg-*color-contrast()colorbackground-color

Mataa ol qaba! Yeroo ammaa deeggarsa color-contrastfaankishinii CSS-native hin jiru, kanaaf karaa Sass kan keenya fayyadamna. Kana jechuun halluuwwan mata duree keenyaa karaa jijjiiramoota CSS dhuunfachuun faayidaawwan kana waliin dhimmoota walfaallaa halluu fiduu danda'a.

Duraa halluu walfaallaa qabu

Lammaffaa halluu walfaallaa qabu

Milkaa'ina halluu walfaallaa ta'een

Balaa halluu walfaallaa qabu

Akeekkachiisa halluu walfaallaa qabu

Info halluu walfaallaa qabu

Ifa halluu walfaallaa qabu

Dukkana halluu walfaallaa qabu

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>

Qaamolee waliin

Bakka walitti makamaa .text-*fi gitaatti isaan fayyadami .bg-*, akka baajii irratti :

Sadarkaa tokkoffaa Info

html

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

Yookiin kaardii irratti : .

Mata duree

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

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>