Түс жана фон

Фондун түсүн контрасттуу алдыңкы пландын түсү менен коюңуз.

Бул бетте

Обзор

v5.2.0 кошулган

.text-*Түс жана фон жардамчылары биздин коммуналдык кызматтардын жана .bg-*коммуналдык кызматтардын күчүн бир класста бириктирет. Sass color-contrast()функциябызды колдонуп, биз автоматтык түрдө белгилүү colorбир background-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>

Же карталарда :

Header

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

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>