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

.tèks-mute

.tèks-blan

.tèks-nwa-50

.tèks-blan-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>

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 style lyen adisyonèl pi lwen pase souliye.

Prensipal lyen

Segondè lyen

Lyen siksè

Lyen danje

Avètisman lyen

Lyen enfòmasyon

Limyè lyen

Lyen nwa

Lyen muet

Lyen blan

<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 jete lank yo pral fè nwa sou hover, menm jan ak klas tèks yo. Itilite 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
.bg-transparan 
<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>

Jan nou koumanse gradyan

Lè $enable-gradientsyo mete sou true(default se false), ou ka itilize .bg-gradient-klas sèvis piblik. Aprann sou opsyon Sass nou yo pou pèmèt klas sa yo ak plis ankò.

  • .bg-gradient-primary
  • .bg-gradient-secondary
  • .bg-gradient-success
  • .bg-gradient-danger
  • .bg-gradient-warning
  • .bg-gradient-info
  • .bg-gradient-light
  • .bg-gradient-dark

Fè fas ak espesifik

Pafwa klas kontèks yo pa ka aplike akòz espesifik 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.