Mebala
Hlahisa moelelo ka mebala ka lihlopha tse 'maloa tsa lisebelisoa tsa mebala. E kenyelletsa tšehetso bakeng sa likhokahano tsa setaele le libaka tsa hover, hape.
Ho sebetsana le lintlha tse khethehileng
Ka linako tse ling litlelase tsa maemo a itseng li ke ke tsa sebelisoa ka lebaka la khetho ea mokhethoa e mong. Maemong a mang, mokhoa o lekaneng oa ho sebetsa ke ho thatela litaba tsa element ea hau ka <div>sehlopha.
Ho fetisa moelelo ho litheknoloji tse thusang
Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseding e hlahisitsweng ke mmala e ka ba e totobetseng ho tswa ho dikahare ka boyona (mohlala, mongolo o bonahalang), kapa e kenyeleditswe ka mekgwa e meng, e kang mongolo o tlatsetso o patilweng le .sr-onlysehlopha.
Mmala
.mongolo-motheo
.mongolo-bobedi
.katleho ya mongolo
.kotsi ea mongolo
.temoso ya mongolo
.mangolo-tsebiso
.sengolo-lebone
.mongolo-fifi
.mongolo-mmele
.mongolo o kgutsitse
.mongolo-tshweu
.mongolo-botsho-50
.mongolo-bosweu-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>Litlelase tsa mongolo oa Contextual le tsona li sebetsa hantle ho li-ankora tse nang le hover e fanoeng le maemo a ho tsepamisa maikutlo. Hlokomela hore sehlopha .text-whitele .text-mutedsehlopha ha se na setaele se eketsehileng sa sehokelo ho feta setaele.
<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>'Mala oa bokamorao
Joalo ka litlelase tsa mebala ea mongolo oa maemo, beha habonolo bokamorao ba element ho sehlopha sefe kapa sefe sa maemo. Likarolo tsa anchor li tla fifala hover, joalo ka litlelase tsa mongolo. Lisebelisoa tsa morao-rao ha li behecolor , kahoo maemong a mang u tla batla ho sebelisa .text-*lisebelisoa.
<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>Moralo oa bokamorao
Ha $enable-gradientse setiloe ho true(default is false), o ka sebelisa .bg-gradient-litlelase tsa utility. Ithute ka likhetho tsa rona tsa Sass ho thusa litlelase tsena le tse ling.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark