Boje
Prenesite značenje kroz boju uz pregršt korisnih klasa boja. Uključuje i podršku za stilizovanje veza sa stanjima lebdenja.
.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>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>Kada $enable-gradientsje postavljeno na true, moći ćete koristiti .bg-gradient-uslužne klase. Podrazumevano $enable-gradientsje onemogućeno i primjer ispod je namjerno pokvaren. Ovo je učinjeno radi lakšeg prilagođavanja od trenutka kada počnete koristiti Bootstrap. Saznajte više o našim Sass opcijama za omogućavanje ovih časova i više.
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>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.