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.
.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>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.
<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>Sɛ $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.
<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.