Libeche

Litokomane le mehlala ea libeche, palo ea rona e nyane le karolo ea ho ngola.

Leqepheng lena

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

<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 .badgele 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 .badgesehlopha 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-darkka setaele se nepahetseng. Lebaka ke hobane lisebelisoa tsa morao-rao ha li behe letho haese background-color.

Ea mantlha Ea bobeli Katleho Kotsi Tlhokomediso Info Leseli Lefifi

<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-hiddensehlopha.

Lipeche tsa lipilisi

Sebelisa sehlopha sa .rounded-pilllisebelisoa ho etsa libeche tse pota-potiloeng le tse kholoanyane border-radius.

Ea mantlha Ea bobeli Katleho Kotsi Tlhokomediso Info Leseli Lefifi

<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;