Source

Kɔla ahorow

Da ntease adi denam kɔla so denam kɔla mfaso adesua ahorow kakraa bi so. Nea ɛka ho ne mmoa a wɔde ma styling links ne hover states, nso.

Ahosuo

.nsɛm-a-mfitiase

.nsɛm-nsɛm a ɛto so abien

.nkyerɛwee-nkonimdi

.text-asiane

.nsɛm-a-kɔkɔbɔ

.nsɛm-nsɛm

.nkyerɛwee-hann

.nsɛm-a-ɛyɛ sum

.nsɛm a wɔde ayɛ mum

.nkyerɛwee-fitaa

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

Contextual text classes nso yɛ adwuma yiye wɔ anchors a wɔde hover ne focus states a wɔde ama no so. Hyɛ no nsow sɛ .text-whitene .text-mutedadesuakuw no nni link styling biara.

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

Akyi kɔla

Te sɛ nsɛm a ɛwɔ nsɛm a ɛfa ho kɔla adesua ahorow no, ɛnyɛ den sɛ wode element bi akyi nsɛm besi nsɛm a ɛfa nsɛm ho adesua biara so. Anchor components bɛyɛ sum wɔ hover so, te sɛ text classes no ara pɛ. Background utilities do not setcolor , enti wɔ tebea horow bi mu no wobɛpɛ sɛ wode .text-*utilities di dwuma.

.bg-mfitiaseɛ
.bg-nneɛma a ɛto so abien
.bg-nkonimdie
.bg-asiane a ɛwɔ hɔ
.bg-kɔkɔbɔ
.bg-nsɛm a ɛfa ho
.bg-hann
.bg-sum a ɛyɛ sum
.bg-fitaa
<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>

Akyi nsɛm a ɛkɔ soro

$enable-gradientswɔde to true so a, wobɛtumi de .bg-gradient-utility classes adi dwuma. Sɛnea wɔahyɛ no, $enable-gradientswɔagyae na wɔahyɛ da abubu nhwɛso a ɛwɔ ase ha no. Wɔyɛ eyi ma ɛyɛ mmerɛw sɛ wobɛsakra no fi bere a wufi ase de Bootstrap di dwuma no. Sua yɛn Sass options a ɛbɛma saa adesua ahorow yi ayɛ adwuma ne nea ɛkeka ho ho ade.

.bg-gradient-mfitiaseɛ
.bg-gradient-asɛmfua a ɛto so abien
.bg-gradient-nkonimdie
.bg-gradient-asiane a ɛwɔ hɔ
.bg-gradient-kɔkɔbɔ
.bg-gradient-nsɛm a ɛfa ho
.bg-gradient-hann a ɛyɛ den
.bg-gradient-ɛyɛ sum
<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>

Nneɛma pɔtee bi a wodi ho dwuma

Ɛtɔ da bi a, wontumi mfa nsɛm a ɛfa ho adesua ahorow nni dwuma esiane sɛ ɔpawfo foforo no yɛ pɔtee nti. Wɔ tebea horow bi mu no, adwumayɛ a ɛdɔɔso ne sɛ wobɛkyekyere wo element no mu nsɛm wɔ a <div>ne adesuakuw no mu.

Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wɔde aniwa hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .sr-onlyadesuakuw no mu.