Ngjyra dhe sfondi

Vendosni një ngjyrë të sfondit me ngjyrë të kundërt të planit të parë.

Në këtë faqe

Vështrim i përgjithshëm

Shtuar në v5.2.0

Ndihmësit e ngjyrave dhe sfondit kombinojnë fuqinë e .text-*shërbimeve tona dhe .bg-*shërbimeve në një klasë. Duke përdorur funksionin tonë Sass color-contrast(), ne përcaktojmë automatikisht një kontrast colorpër një background-color.

Kokat lart! Aktualisht nuk ka asnjë mbështetje për një color-contrastfunksion të vetëdijshëm CSS, kështu që ne përdorim tonën nëpërmjet Sass. Kjo do të thotë që personalizimi i ngjyrave të temave tona nëpërmjet variablave CSS mund të shkaktojë probleme me kontrastin e ngjyrave me këto shërbime.

Primar me ngjyrë të kundërta

Sekondar me ngjyre kontrast

Suksese me ngjyra të kundërta

Rrezik me ngjyra të kundërta

Paralajmërim me ngjyra të kundërta

Informacion me ngjyra kontrast

Dritë me ngjyra të kundërta

E errët me ngjyra të kundërta

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 komponentë

.text-*Përdorini ato në vend të .bg-*klasave të kombinuara , si në distinktivë :

fillore Informacion

html

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

Ose në karta :

Kreu

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

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>