Source

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.

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 link styling 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

Susama sa mga klase sa kolor sa teksto 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 utilities sa background wala gitakdacolor , mao nga sa pipila ka mga kaso gusto nimong gamiton ang mga .text-*utilities.

.bg-una

.bg-secondary

.bg-kalampusan

.bg-kuyaw

.bg-pasidaan

.bg-info

.bg-kahayag

.bg-itom

.bg-puti

.bg-transparent

<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 tinuod, mahimo nimong magamit ang .bg-gradient-mga klase sa utility. Sa kasagaran, $enable-gradientsgi-disable ug ang pananglitan sa ubos gituyo nga nabuak. Gihimo kini alang sa dali nga pag-customize gikan sa pagsugod nimo sa paggamit sa Bootstrap. 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-kalamposan

.bg-gradient-kuyaw

.bg-gradient-warning

.bg-gradient-info

.bg-gradient-light

.bg-gradient-dark

<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>

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.