Түс және фон

Қарама-қарсы алдыңғы түспен фон түсін орнатыңыз.

Бұл бетте

Шолу

v5.2.0 нұсқасына қосылды

Түс және фондық көмекшілер біздің .text-*утилиталарымыз бен .bg-*утилиталарымыздың қуатын бір сыныпта біріктіреді. Sass функциясын пайдалана отырып , біз белгілі бір үшін color-contrast()контрастты автоматты түрде анықтаймыз .colorbackground-color

Ескерту! Қазіргі уақытта CSS-негізгі color-contrastфункцияны қолдау жоқ, сондықтан біз Sass арқылы өзімізді қолданамыз. Бұл CSS айнымалы мәндері арқылы тақырып түстерін теңшеу осы утилиталарда түс контраст мәселелерін тудыруы мүмкін дегенді білдіреді.

Қарама-қарсы түспен негізгі

Қарама-қарсы түсі бар екіншілік

Қарама-қарсы түспен сәттілік

Қарама-қарсы түсті қауіп

Қарама-қарсы түспен ескерту

Қарама-қарсы түсі бар ақпарат

Қарама-қарсы түсі бар жарық

Қарама-қарсы түсі бар күңгірт

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>

Құрамдас бөліктермен

Оларды біріктірілген .text-*және .bg-*сыныптардың орнына пайдаланыңыз, мысалы, төсбелгілер :

Негізгі Ақпарат

html

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

Немесе карталарда :

Тақырып

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

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>