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.
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 wotumi 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.
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-nipadua
.nsɛm a wɔde ayɛ mum
.nkyerɛwee-fitaa
.nsɛm-a ɛyɛ tuntum-50
.nsɛm-a-fitaa-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>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 foforo biara a ɛboro underline so.
<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 ɛfa nsɛm 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.
<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>Akyi nsɛm a ɛkɔ soro
Sɛ $enable-gradientswɔde si true(default yɛ false) a, wubetumi de .bg-gradient-mfaso adesua ahorow adi dwuma. Sua yɛn Sass options a ɛbɛma saa adesua ahorow yi ayɛ adwuma ne nea ɛkeka ho ho ade.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark