Szín és háttér

Állítson be egy háttérszínt kontrasztos előtérszínnel.

Ezen az oldalon

Áttekintés

Hozzáadva a v5.2.0-hoz

A szín- és háttérsegítők egy osztályban egyesítik .text-*segédprogramjaink és .bg-*segédprogramjaink erejét. A Sass color-contrast()függvényünkkel automatikusan meghatározzuk a kontrasztot coloregy adott background-color.

Fel a fejjel! Jelenleg nem támogatott a CSS-natív color-contrastfunkció, ezért a sajátunkat használjuk a Sass-on keresztül. Ez azt jelenti, hogy a téma színeinek testreszabása CSS-változókon keresztül színkontraszt-problémákat okozhat ezeknél a segédprogramoknál.

Elsődleges kontrasztos színnel

Másodlagos kontrasztos színnel

Siker kontrasztos színekkel

Veszély a kontrasztos színekkel

Figyelmeztetés kontrasztos színnel

Info kontrasztos színekkel

Világos kontrasztos színnel

Sötét kontrasztos színnel

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>

Alkatrészekkel

Használja őket kombinált .text-*és .bg-*osztályok helyett, például a jelvényeken :

Elsődleges Info

html

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

Vagy kártyákon :

Fejléc

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Fejléc

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

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>