Reňk we fon

Öňdäki reňk bilen gapma-garşylykly reňk düzüň.

Bu sahypada

Gysgaça syn

V5.2.0 goşuldy

Reňk we fon kömekçileri , bir synpda .text-*kommunal hyzmatlarymyzyň .bg-*güýjüni birleşdirýärler . Sass funksiýamyzy ulanyp, belli color-contrast()bir zadyň tersini awtomatiki kesgitleýäris .colorbackground-color

Başlar! Häzirki wagtda CSS-ýerli color-contrastfunksiýa üçin goldaw ýok, şonuň üçin özümizi Sass arkaly ulanýarys. Diýmek, mowzuk reňklerimizi CSS üýtgeýjileri arkaly sazlamak, bu kömekçi enjamlar bilen reňk kontrast meselelerine sebäp bolup biler.

Garşy reňk bilen başlangyç

Garşy reňk bilen ikinji derejeli

Garşy reňk bilen üstünlik

Garşy reňkli howp

Garşy reňk bilen duýduryş

Garşy reňk bilen maglumat

Garşy reňk bilen ýagtylyk

Garşy reňk bilen garaňky

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>

Komponentler bilen

Nyşanlardaky ýaly birleşdirilen .text-*we synplaryň ýerine ulanyň :.bg-*

Başlangyç Maglumat

html

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

Cardsa-da kartoçkalarda :

Sözbaşy

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

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>