Rang va fon

Qarama-qarshi oldingi fon rangi bilan fon rangini o'rnating.

Ushbu sahifada

Umumiy koʻrinish

5.2.0 versiyasida qo'shilgan

.text-*Rang va fon yordamchilari bizning kommunal va .bg-*yordamchi dasturlarimiz kuchini bir sinfda birlashtiradi. Sass funksiyamizdan foydalanib , biz avtomatik ravishda ma'lum color-contrast()bir kontrastni aniqlaymiz .colorbackground-color

Oldindan qisqa ma'lumot berish! Hozirda CSS-ning mahalliy color-contrastfunksiyasi qo'llab-quvvatlanmaydi, shuning uchun biz Sass orqali o'zimiznikidan foydalanamiz. Bu shuni anglatadiki, bizning mavzu ranglarini CSS o'zgaruvchilari orqali sozlash ushbu yordamchi dasturlarda rang kontrasti bilan bog'liq muammolarga olib kelishi mumkin.

Qarama-qarshi rang bilan asosiy

Qarama-qarshi rang bilan ikkinchi darajali

Qarama-qarshi rang bilan muvaffaqiyat

Qarama-qarshi rang bilan xavfli

Qarama-qarshi rang bilan ogohlantirish

Qarama-qarshi rang bilan ma'lumot

Qarama-qarshi rang bilan yorug'lik

Qarama-qarshi rang bilan quyuq

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>

Komponentlar bilan

Ularni birlashtirilgan .text-*va .bg-*sinflar o'rniga foydalaning, masalan nishonlar :

Asosiy Ma'lumot

html

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

Yoki kartalarda :

Sarlavha

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

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>