Mga kulay
Ihatid ang kahulugan sa pamamagitan ng kulay na may ilang mga klase ng utility ng kulay. Kasama rin ang suporta para sa pag-istilo ng mga link na may mga estado ng hover.
Pagharap sa pagtitiyak
Minsan hindi mailalapat ang mga contextual class dahil sa pagiging tiyak ng isa pang selector. Sa ilang mga kaso, ang isang sapat na solusyon ay ang pagbalot ng nilalaman ng iyong elemento sa isang <div>gamit ang klase.
Naghahatid ng kahulugan sa mga pantulong na teknolohiya
Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .sr-onlyklase.
Kulay
.teksto-pangunahin
.teksto-pangalawang
.text-tagumpay
.text-panganib
.text-babala
.text-info
.text-light
.text-madilim
.text-body
.text-muted
.text-white
.text-black-50
.text-white-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>Gumagana rin nang maayos ang mga klase ng teksto sa konteksto sa mga anchor na may ibinigay na hover at focus states. Tandaan na ang .text-whiteat .text-mutedclass ay walang karagdagang pag-istilo ng link na lampas sa salungguhit.
<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>Kulay ng background
Katulad ng mga klase ng kulay ng teksto sa konteksto, madaling itakda ang background ng isang elemento sa anumang klase sa konteksto. Ang mga bahagi ng anchor ay magdidilim sa pag-hover, tulad ng mga klase ng teksto. Hindi nakatakda angcolor mga utility sa background , kaya sa ilang mga kaso gugustuhin mong gumamit ng mga .text-*utility.
<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>Gradient ng background
Kapag $enable-gradientsnakatakda sa true(default ay false), maaari mong gamitin ang .bg-gradient-mga klase ng utility. Matuto tungkol sa aming mga opsyon sa Sass para paganahin ang mga klase na ito at higit pa.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark