Amadedewo
Gblɔ gɔmesese to amadede me kple amadede ƒe viɖenu ƒe klass ʋɛ aɖewo. Kpekpeɖeŋu na atsyã kadodowo kple hover nɔnɔmewo, hã le eme.
.nuŋɔŋlɔ-gɔmedzedze
.nuŋɔŋlɔ-sekɛndri
.nuŋɔŋlɔ-dzidzedzekpɔkpɔ
.nuŋɔŋlɔ-afɔku
.nuŋɔŋlɔ-nuxlɔ̃ame
.nuŋɔŋlɔ-nyatakaka
.nuŋɔŋlɔ-kekeli
.nuŋɔŋlɔ-viviti
.nuŋɔŋlɔ si me nyawo me mekɔ o
.nuŋɔŋlɔ-ɣi
<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>
Nya siwo ƒo xlã nuŋɔŋlɔ ƒe klasswo hã wɔa dɔ nyuie le sekewo dzi kple hover kple focus nɔnɔme siwo wona. De dzesii be .text-white
kple .text-muted
klass la mekpɔ kadodo ƒe atsyã aɖeke o.
<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>
Abe alesi wòle le nuŋɔŋlɔ ƒe amadede ƒe hatsotso siwo le nya siwo ƒo xlãe me ene la, ɖo nu aɖe ƒe megbenyawo bɔbɔe ɖe nya siwo ƒo xlãe ƒe klass ɖesiaɖe ŋu. Anchor ƒe akpawo ado viviti le hover dzi, abe nuŋɔŋlɔ ƒe klasswo ene. Background utilities do not setcolor
, eyata le go aɖewo me la, àdi be yeazã .text-*
dɔwɔnuwo.
<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>
Ne $enable-gradients
woɖoe ɖe nyateƒe dzi la, àte ŋu azã .bg-gradient-
dɔwɔnu ƒe klasswo. Le gɔmedzedzea me la, $enable-gradients
wowɔe nuwɔametɔe eye woɖoe koŋ gblẽ kpɔɖeŋu si le ete la me. Wowɔa esia hena tɔtrɔwɔwɔ bɔbɔe tso esime nèdze Bootstrap zazã gɔme. Srɔ̃ nu tso míaƒe Sass tiatiawɔblɔɖe ŋu be nàna klass siawo nawɔ dɔ kple bubuwo.
<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>
Nuwɔwɔ ɖe nya aɖewo koŋ ŋu
Ɣeaɖewoɣi la, womate ŋu awɔ nya siwo ƒo xlãe ƒe klasswo ŋudɔ o le tiatiawɔla bubu ƒe nɔnɔme tɔxɛ ta. Le go aɖewo me la, egbɔkpɔnu si sɔ enye be nàxatsa wò element ƒe emenyawo ɖe a <div>
me kple klass la.
Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu
Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla ɖe .sr-only
klass la ŋu ene.