Midabka & asalka

Deji midab soo jeeda oo leh midab hore oo isbarbar dhigaya.

Boggan

Dulmar

Lagu daray v5.2.0

Kaaliyeyaasha midabka iyo asalka waxay isku daraan awoodda .text-*yutiilitiyadayada iyo .bg-*adeegyadayada hal fasal. Isticmaalka shaqadayada Sass color-contrast(), waxaanu si toos ah u go'aaminaynaa isbarbardhiga colormid gaar ah background-color.

Madaxa kor u qaad! Hadda ma jirto wax taageero ah oo loogu talagalay shaqada CSS-dhaladeed color-contrast, marka waxaan isticmaalnaa keenna annaga oo adeegsanayna Sass. Tani waxay ka dhigan tahay in ku habeynta midabada mawduuceena iyada oo loo marayo doorsoomayaasha CSS waxay keeni kartaa arrimo kala duwanaansho midab leh oo la xidhiidha adeegyadan.

Asal ahaan midab ka soo horjeeda

Dugsiga sare oo leh midab ka soo horjeeda

Guusha leh midab ka soo horjeeda

Khatar leh midab ka soo horjeeda

Digniin leh midab ka soo horjeeda

Macluumaad leh midab ka duwan

Iftiin leh midab ka soo horjeeda

Madow leh midab ka soo horjeeda

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>

Iyada oo qaybaha

U isticmaal meel isku dhafan .text-*iyo .bg-*fasalo, sida calaamado :

Asal ahaan Xog

html

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

Ama kaararka :

Madax

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

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>