Spalva ir fonas

Nustatykite fono spalvą su kontrastinga priekinio plano spalva.

Šiame puslapyje

Apžvalga

Pridėta 5.2.0 versijoje

Spalvų ir fono pagalbininkai sujungia mūsų .text-*paslaugų ir .bg-*komunalinių paslaugų galią vienoje klasėje. color-contrast()Naudodami funkciją Sass automatiškai nustatome colorkonkretaus background-color.

Galvas aukštyn! Šiuo metu CSS savoji color-contrastfunkcija nepalaikoma, todėl naudojame savąją per Sass. Tai reiškia, kad tinkinant mūsų temos spalvas naudojant CSS kintamuosius, gali kilti spalvų kontrasto problemų naudojant šias programas.

Pirminis su kontrastinga spalva

Antrinė su kontrastinga spalva

Sėkmė naudojant kontrastingą spalvą

Pavojus dėl kontrastingos spalvos

Įspėjimas su kontrastinga spalva

Informacija su kontrastinga spalva

Šviesus su kontrastinga spalva

Tamsi su kontrastinga spalva

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>

Su komponentais

Naudokite juos vietoj kombinuotųjų .text-*ir .bg-*klasių, pvz., ant ženklelių :

Pirminis Informacija

html

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

Arba kortelėse :

Antraštė

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

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>