Source

Boje

Prenesite značenje kroz boju uz pregršt korisnih klasa boja. Uključuje i podršku za stilizovanje veza sa stanjima lebdenja.

Boja

.tekst-primarni

.tekst-sekundarni

.text-success

.tekst-opasnost

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.tekst-bijeli

.text-black-50

.tekst-bijeli-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Kontekstualne tekstualne klase takođe dobro rade na sidrima sa obezbeđenim stanjima lebdenja i fokusa. Imajte na umu da .text-whitei .text-mutedklasa nema dodatni stil veze osim podvlačenja.

Primarna veza

Sekundarna veza

Uspješna veza

Opasna veza

Link upozorenja

Info link

Lagana veza

Tamna veza

Isključena veza

Bijela veza

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

Boja pozadine

Slično klasama boja kontekstualnog teksta, lako postavite pozadinu elementa na bilo koju kontekstualnu klasu. Komponente sidra će potamniti pri lebdenju, baš kao i tekstualne klase. Pozadinski uslužni programi se ne postavljajucolor , tako da ćete u nekim slučajevima htjeti koristiti .text-*uslužne programe.

.bg-primary
.bg-sekundarni
.bg-uspjeh
.bg-opasnost
.bg-upozorenje
.bg-info
.bg-light
.bg-dark
.bg-bijelo
.bg-transparentno 
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Gradijent pozadine

Kada $enable-gradientsje postavljeno na true(podrazumevano je false), možete koristiti .bg-gradient-uslužne klase. Saznajte više o našim Sass opcijama za omogućavanje ovih časova i više.

  • .bg-gradient-primary
  • .bg-gradient-secondary
  • .bg-gradient-success
  • .bg-gradient-danger
  • .bg-gradient-warning
  • .bg-gradient-info
  • .bg-gradient-light
  • .bg-gradient-dark

Baviti se specifičnošću

Ponekad se kontekstualne klase ne mogu primijeniti zbog specifičnosti drugog selektora. U nekim slučajevima, dovoljno rješenje je umotati sadržaj vašeg elementa u <div>klasu.

Prenošenje značenja pomoćnim tehnologijama

Korištenje boje za dodavanje značenja pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .sr-onlyklasom.