Krāsa un fons

Iestatiet fona krāsu ar kontrastējošu priekšplāna krāsu.

Šajā lapā

Pārskats

Pievienots v5.2.0

Krāsu un fona palīgi apvieno mūsu .text-*utilītu un .bg-*pakalpojumu jaudu vienā klasē. Izmantojot mūsu Sass color-contrast()funkciju, mēs automātiski nosakām kontrastu colorkonkrētam background-color.

Uzmanību! Pašlaik netiek atbalstīta CSS native color-contrastfunkcija, tāpēc mēs izmantojam savu, izmantojot Sass. Tas nozīmē, ka motīvu krāsu pielāgošana, izmantojot CSS mainīgos, var izraisīt krāsu kontrasta problēmas ar šīm utilītprogrammām.

Primārais ar kontrastējošu krāsu

Sekundārais ar kontrastējošu krāsu

Panākumi ar kontrastējošu krāsu

Bīstamība ar kontrastējošu krāsu

Brīdinājums ar kontrastējošu krāsu

Info ar kontrastējošu krāsu

Gaisma ar kontrastējošu krāsu

Tumšs ar kontrastējošu krāsu

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>

Ar komponentiem

Izmantojiet tos kombinēto .text-*un .bg-*nodarbību vietā, piemēram, uz emblēmām :

Primārs Informācija

html

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

Vai uz kartēm :

Virsraksts

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Virsraksts

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

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>