Litur & bakgrunnur

Stilltu bakgrunnslit með andstæðum forgrunnslit.

Á þessari síðu

Yfirlit

Bætt við í v5.2.0

Lita- og bakgrunnshjálparar sameina kraft .text-*tóla okkar og .bg-*tóla í einum flokki. Með því að nota Sass color-contrast()aðgerðina okkar ákveðum við sjálfkrafa andstæðu colorfyrir tiltekna background-color.

Höfuð upp! Sem stendur er enginn stuðningur við CSS-innfædda color-contrastaðgerð, svo við notum okkar eigin í gegnum Sass. Þetta þýðir að að sérsníða þemalitina okkar með CSS breytum getur valdið litaskilaskilavandamálum með þessum tólum.

Aðal með andstæðum lit

Secondary með andstæðum lit

Velgengni með andstæðum lit

Hætta með andstæðum lit

Viðvörun með andstæðum lit

Upplýsingar með andstæðum lit

Ljós með andstæðum lit

Dökk með andstæðum lit

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>

Með íhlutum

Notaðu þau í stað samsettra flokka, eins og .text-*á merkjum :.bg-*

Aðal Upplýsingar

html

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

Eða á kortum :

Fyrirsögn

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

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>