Kulɛriw
Kɔrɔ lase kulɛri fɛ ni kulɛri nafama kalan bolomafaraw ye. A bɛ dɛmɛ don styling links ni hover states, fana.
Ɲɛ
.sɛbɛnni-fɔlɔ
.sɛbɛnni-sekondari
.sɛbɛnni-sɔrɔ-sɔrɔ
.sɛbɛnni-farati
.sɛbɛnni-lasɔmini
.sɛbɛnni-kunnafoni
.sɛbɛnni-yeelen
.sɛbɛnni-dibi
.sɛbɛnni-muted
.sɛbɛnni-nɛrɛmuguma
<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 fana bɛ baara Kɛ koɲuman ankɔriw kan ni hover ni focus states dilenw ye. A kɔlɔsi ko .text-white
ani .text-muted
kalasi tɛ ni link styling ye.
<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>
Background kulɛri
I n’a fɔ sɛbɛnni kulɛri kalanw bɛ cogo min na, i bɛ se ka fɛn dɔ kɔkanna sigi nɔgɔya la ka kɛɲɛ ni kalansen suguya o suguya ye. Anchor components bɛna dibi don hover kan, i n’a fɔ sɛbɛnni kalanw. Background utilities don not setcolor
, o la tuma dɔw la i bɛna a fɛ ka baara kɛ ni .text-*
utilities ye.
<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>
Background gradient (Baarakɛcogo min bɛ kɛ kɔfɛ).
Ni $enable-gradients
a sigilen don tiɲɛ na, i bɛ se ka baara kɛ ni .bg-gradient-
nafalanw ye. Ka da a kan, $enable-gradients
a bɛ bali ani misali min bɛ duguma, o bɛ tiɲɛ ni laɲini ye. O bɛ Kɛ walasa ka 'sènbɔli nɔgɔya kabini i bɛ Bootstrap baara Daminɛ. Aw ye an ka Sass sugandiliw dɔn walasa ka nin kalan ninnu kɛ ani fɛn wɛrɛw.
<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>
Ka ɲɛsin kɛrɛnkɛrɛnnenya la
Tuma dɔw la, kɔrɔɲɔgɔnmaya kalanw tɛ Se ka Kɛ k’a sababu Kɛ sugandilikɛla wɛrɛ ka kɛrɛnkɛrɛnnenya ye. Tuma dɔw la, baarakɛcogo bɛrɛbɛrɛ ye k’i ka element kɔnɔkow siri a <div>
ni kalasi la.
Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma
Baara kɛli ni kulɛri ye walasa ka kɔrɔ fara a kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (misali la sɛbɛn yelen), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen don ni .sr-only
kalan ye.