Libeche
Litokomane le mehlala ea libeche, palo ea rona e nyane le karolo ea ho ngola.
Mehlala
Libeche lia lekana ho tsamaisana le boholo ba karolo ea motsoali ea haufi ka ho sebelisa boholo ba fonte le liyuniti em
. Ho tloha ka v5, libeche ha li na mokhoa oa ho tsepamisa maikutlo kapa oa hover bakeng sa lihokelo.
Lihlooho
Sehlooho sa mohlalaE ncha
Sehlooho sa mohlalaE ncha
Sehlooho sa mohlalaE ncha
Sehlooho sa mohlalaE ncha
Sehlooho sa mohlalaE ncha
Sehlooho sa mohlalaE ncha
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
Likonopo
Libeche li ka sebelisoa e le karolo ea likhokahano kapa likonopo ho fana ka k'haontara.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
Hlokomela hore ho ipapisitsoe le hore na li sebelisoa joang, libeche li ka ferekanya basebelisi ba sebali sa skrine le mahlale a thusang a tšoanang. Le ha setaele sa libeche se fana ka leseli mabapi le sepheo sa tsona, basebelisi bana ba tla hlahisoa feela ka litaba tsa beche. Ho itšetlehile ka boemo bo itseng, libeche tsena li ka 'na tsa bonahala e le mantsoe a sa tloaelehang kapa linomoro qetellong ea polelo, sehokelo kapa konopo.
Ntle le haeba moelelo oa taba o hlakile (joaloka mohlala oa "Litsebiso", moo ho utloisisoang hore "4" ke palo ea litsebiso), nahana ka ho kenyelletsa moelelo oa tlatsetso ka sekhechana se patiloeng sa mongolo oa tlatsetso.
E behiloe
Sebelisa lisebelisoa ho fetola .badge
le ho e beha k'honeng ea sehokelo kapa konopo.
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
U ka boela ua nkela .badge
sehlopha sebaka ka lisebelisoa tse ling tse 'maloa ntle le palo bakeng sa sesupo se akaretsang.
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
Mebala e ka morao
Sebelisa litlelase tsa rona tsa lisebelisoa tsa morao-rao ho fetola kapele ponahalo ea beche. Ka kopo hlokomela hore ha u sebelisa Bootstrap ea kamehla .bg-light
, u tla hloka tšebeliso ea mebala ea mongolo joalo .text-dark
ka setaele se nepahetseng. Lebaka ke hobane lisebelisoa tsa morao-rao ha li behe letho haese background-color
.
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
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 .visually-hidden
sehlopha.
Lipeche tsa lipilisi
Sebelisa sehlopha sa .rounded-pill
lisebelisoa ho etsa libeche tse pota-potiloeng le tse kholoanyane border-radius
.
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
Sass
Lintho tse fapaneng
$badge-font-size: .75em;
$badge-font-weight: $font-weight-bold;
$badge-color: $white;
$badge-padding-y: .35em;
$badge-padding-x: .65em;
$badge-border-radius: $border-radius;