Ngjyrat
Përcillni kuptimin përmes ngjyrës me një sërë klasash të përdorimit të ngjyrave. Përfshin gjithashtu mbështetje për lidhjet e stilimit me gjendjet hover.
.tekst-primare
.tekst-sekondare
.tekst-sukses
.tekst-rrezik
.tekst-paralajmërim
.tekst-info
.tekst-dritë
.tekst-errësirë
.tekst i heshtur
.tekst-bardhë
<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-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>Klasat e tekstit kontekstual funksionojnë mirë edhe në ankorat me gjendjet e ofruara të pezullimit dhe fokusit. Vini re se klasa .text-whitedhe .text-mutednuk ka stil lidhjeje.
<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>Ngjashëm me klasat e ngjyrave të tekstit kontekstual, vendosni lehtësisht sfondin e një elementi për çdo klasë kontekstuale. Komponentët e ankorimit do të errësohen kur rri pezull, ashtu si klasat e tekstit. Shërbimet e sfondit nuk vendosencolor , kështu që në disa raste do të dëshironi të përdorni .text-*shërbimet.
<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>Kur $enable-gradientsvendoset në true, do të mund të përdorni .bg-gradient-klasat e shërbimeve. Si parazgjedhje, $enable-gradientsështë i çaktivizuar dhe shembulli më poshtë është prishur qëllimisht. Kjo bëhet për personalizim më të lehtë që nga momenti kur filloni të përdorni Bootstrap. Mësoni rreth opsioneve tona Sass për të aktivizuar këto klasa dhe më shumë.
<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>Ballafaqimi me specifikat
Ndonjëherë klasat kontekstuale nuk mund të aplikohen për shkak të specifikës së një përzgjedhësi tjetër. Në disa raste, një zgjidhje e mjaftueshme është të mbështillni përmbajtjen e elementit tuaj në një <div>me klasën.
Përcjellja e kuptimit tek teknologjitë ndihmëse
Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .sr-onlyklasën.