Mga kolor
Ipahayag ang kahulogan pinaagi sa kolor nga adunay pipila ka mga klase sa gamit sa kolor. Naglakip sa suporta alang sa pag-istilo sa mga link nga adunay hover states, usab.
Pag-atubang sa espesipiko
Usahay ang mga klase sa konteksto dili magamit tungod sa espesipiko sa lain nga tigpili. Sa pipila ka mga kaso, usa ka igo nga solusyon mao ang pagputos sa sulud sa imong elemento sa usa <div>sa klase.
Paghatag kahulogan sa mga teknolohiya sa pagtabang
Ang paggamit og kolor aron makadugang og kahulogan naghatag lang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor klaro gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .sr-onlyklase.
Kolor
.text-primary
.text-secondary
.teks-kalamposan
.text-kakuyaw
.text-warning
.text-info
.text-kahayag
.text-ngitngit
.text-lawas
.text-muted
.text-puti
.text-black-50
.text-puti-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>Ang mga klase sa teksto sa konteksto maayo usab sa mga angkla nga adunay gihatag nga hover ug focus nga estado. Timan-i nga ang .text-whiteug ang .text-mutedklase walay dugang nga pag-istilo sa link lapas sa underline.
<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>Kolor sa background
Sama sa mga klase sa kolor sa kolor sa konteksto, dali nga itakda ang background sa usa ka elemento sa bisan unsang klase sa konteksto. Ang mga sangkap sa anchor mongitngit sa hover, sama sa mga klase sa teksto. Ang mga gamit sa background wala gitakdacolor , mao nga sa pipila ka mga kaso gusto nimo nga mogamit mga .text-*utilities.
<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>Background gradient
Kung $enable-gradientsgitakda sa true(default mao ang false), mahimo nimong gamiton ang .bg-gradient-mga klase sa utility. Pagkat-on bahin sa among mga kapilian sa Sass aron mahimo kini nga mga klase ug daghan 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