Kolorea eta atzeko planoa

Ezarri atzeko planoko kolorea kontraste kolorearekin.

Orrialde honetan

Ikuspegi orokorra

v5.2.0-n gehitua

Kolore eta atzeko planoko laguntzaileek gure .text-*utilitateen eta .bg-*utilitateen indarra klase bakarrean konbinatzen dute. Gure Sass color-contrast()funtzioa erabiliz, automatikoki zehazten dugu kontraste colorbat background-color.

Buruak gora! Une honetan ez dago CSS jatorrizko color-contrastfuntziorako laguntzarik, beraz, gurea erabiltzen dugu Sass bidez. Horrek esan nahi du gure gaiaren koloreak CSS aldagaien bidez pertsonalizatzeak kolore-kontraste arazoak sor ditzakeela utilitate hauekin.

Lehen mailako kolorea kontrastearekin

Bigarren mailakoa kolore kontrastearekin

Arrakasta kolore kontrastearekin

Kolore kontrastearekin arriskua

Kolore kontrastearekin abisua

Kolore kontrastedun informazioa

Kolore kontrastedun argia

Iluna kolore kontrastearekin

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>

Osagaiekin

Erabili itzazu konbinatuen .text-*eta .bg-*klaseen ordez, txapetan bezala :

Lehen mailakoa Info

html

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

Edo kartetan :

Goiburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

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>