Kulur u sfond

Issettja kulur fl-isfond b'kulur miksub kontrastanti.

Fuq din il-paġna

Ħarsa ġenerali

Miżjud fi v5.2.0

L-helpers tal-kulur u l-isfond jgħaqqdu l-qawwa tal- .text-*utilitajiet u l- .bg-*utilitajiet tagħna fi klassi waħda. Bl-użu tal-funzjoni Sass tagħna color-contrast(), aħna awtomatikament niddeterminaw kuntrast colorgħal background-color.

Irjus up! Bħalissa m'hemm l-ebda appoġġ għal color-contrastfunzjoni nattiva CSS, għalhekk nużaw tagħna stess permezz ta 'Sass. Dan ifisser li l-personalizzazzjoni tal-kuluri tat-tema tagħna permezz ta 'varjabbli CSS tista' tikkawża problemi ta 'kuntrast tal-kulur ma' dawn l-utilitajiet.

Primarja b'kulur kontrastanti

Sekondarja b'kulur kontrastanti

Suċċess b'kulur kontrastanti

Periklu b'kulur kontrastanti

Twissija b'kulur kontrastanti

Informazzjoni b'kulur kontrastanti

Dawl b'kulur kontrastanti

Skur b'kulur kontrastanti

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>

Bil-komponenti

Użahom minflok klassijiet magħquda, bħal .text-*fuq badges :.bg-*

Primarja Info

html

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

Jew fuq il -karti :

Header

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Header

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

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>