Boje
Prenesite značenje kroz boju uz pregršt korisnih klasa boja. Uključuje i podršku za stilizovanje veza sa stanjima lebdenja.
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.
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.
<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.
<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