Color i fons

Estableix un color de fons amb un color de primer pla contrastant.

En aquesta pàgina

Visió general

Afegit a la v5.2.0

Els ajudants de color i fons combinen el poder de les nostres .text-*utilitats i .bg-*serveis públics en una sola classe. Mitjançant la nostra color-contrast()funció Sass, determinem automàticament un contrast colorper a un background-color.

Caps amunt! Actualment no hi ha suport per a una color-contrastfunció nativa de CSS, de manera que fem servir la nostra pròpia a través de Sass. Això vol dir que personalitzar els nostres colors del tema mitjançant variables CSS pot provocar problemes de contrast de color amb aquestes utilitats.

Primària amb color contrastant

Secundària amb color contrastant

Èxit amb color contrastant

Perill amb color contrastat

Advertència amb color contrastat

Informació amb contrast de color

Llum amb color contrastant

Fosc amb color contrastat

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>

Amb components

Utilitzeu-los en lloc de classes combinades .text-*i , com en les insígnies :.bg-*

primària Informació

html

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

O a les targetes :

Capçalera

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

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>