Kleur & agtergrond

Stel 'n agtergrondkleur met kontrasterende voorgrondkleur.

Op hierdie bladsy

Oorsig

Bygevoeg in v5.2.0

Kleur- en agtergrondhelpers kombineer die krag van ons nutsdienste .text-*in een klas. Deur ons Sass- funksie te gebruik, bepaal ons outomaties 'n kontrastering vir 'n bepaalde ..bg-*color-contrast()colorbackground-color

Let op! Daar is tans geen ondersteuning vir 'n CSS-inheemse color-contrastfunksie nie, so ons gebruik ons eie via Sass. Dit beteken dat die aanpassing van ons temakleure via CSS-veranderlikes kleurkontrasprobleme met hierdie nutsprogramme kan veroorsaak.

Primêr met kontrasterende kleur

Sekondêr met kontrasterende kleur

Sukses met kontrasterende kleur

Gevaar met kontrasterende kleur

Waarskuwing met kontrasterende kleur

Inligting met kontrasterende kleur

Lig met kontrasterende kleur

Donker met kontrasterende kleur

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>

Met komponente

Gebruik hulle in die plek van gekombineerde .text-*en .bg-*klasse, soos op kentekens :

Primêre inligting

html

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

Of op kaarte :

Opskrif

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

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>