Source

Koulè

Transmèt siyifikasyon atravè koulè ak yon ti ponyen klas itilite koulè. Gen ladan sipò pou lyen manier ak eta hover, tou.

Koulè

.tèks-prensipal

.tèks-segondè

.tèks-siksè

.tèks-danje

.tèks-avètisman

.text-info

.tèks-limyè

.tèks-fè nwa

.tèks-mute

.tèks-blan

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

Klas tèks kontèks yo tou travay byen sou lank ak eta yo bay hover ak konsantre. Remake byen ke klas la .text-whiteak .text-mutedpa gen okenn stil lyen.

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

Koulè background

Menm jan ak klas koulè tèks kontèks yo, fasilman mete background nan yon eleman nan nenpòt klas kontèks. Konpozan Anchor yo pral fè nwa sou hover, menm jan ak klas tèks yo. Sèvis piblik background pa metecolor , kidonk nan kèk ka ou pral vle sèvi ak .text-*sèvis piblik.

.bg-prensipal

.bg-segondè

.bg-siksè

.bg-danje

.bg-avètisman

.bg-info

.bg-limyè

.bg-nwa

.bg-blan

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

Jan nou koumanse gradyan

Lè $enable-gradientsyo mete sou vre, ou pral kapab itilize .bg-gradient-klas sèvis piblik yo. Pa default, $enable-gradientsse enfim ak egzanp ki anba a se entansyonèlman kase. Sa a se fè pou personnalisation pi fasil depi nan moman ou kòmanse itilize Bootstrap. Aprann sou opsyon Sass nou yo pou pèmèt klas sa yo ak plis ankò.

.bg-gradyan-primè

.bg-gradyan-segondè

.bg-gradyan-siksè

.bg-gradyan-danger

.bg-gradyan-avètisman

.bg-gradyan-info

.bg-gradyan-limyè

.bg-gradyan-nwa

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

Fè fas ak espesifik

Pafwa klas kontèks yo pa ka aplike akòz espesifik nan yon lòt seleksyon. Nan kèk ka, yon solisyon ase se vlope kontni eleman ou a nan yon <div>ak klas la.

Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .sr-onlyklas la.