Koloro kaj fono

Agordu fonkoloron kun kontrasta malfonkoloro.

Sur ĉi tiu paĝo

Superrigardo

Aldonita en v5.2.0

Koloraj kaj fonaj helpantoj kombinas la potencon de niaj .text-*iloj kaj .bg-*utilecoj en unu klaso. Uzante nian Sass- color-contrast()funkcion, ni aŭtomate determinas kontraston colorpor aparta background-color.

Atentu! Nuntempe ne ekzistas subteno por CSS-denaska color-contrastfunkcio, do ni uzas nian propran per Sass. Ĉi tio signifas, ke agordi niajn temokolorojn per CSS-variabloj povas kaŭzi problemojn pri kolorkontrasto kun ĉi tiuj utilecoj.

Primara kun kontrasta koloro

Malĉefa kun kontrasta koloro

Sukceso kun kontrasta koloro

Danĝero kun kontrasta koloro

Averto kun kontrasta koloro

Informoj kun kontrasta koloro

Lumo kun kontrasta koloro

Malhela kun kontrasta koloro

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>

Kun komponantoj

Uzu ilin anstataŭ kombinitaj .text-*kaj .bg-*klasoj, kiel sur insignoj :

Primaraj Info

html

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

Aŭ sur kartoj :

Kapo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

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>