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

html

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

html

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

html

<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

E kentsoe ho v5.2.0

Beha selelekela se nang background-colorle phapang colorle bathusi ba rona.text-bg-{color} . Pele ho ne ho hlokahala hore u kopanye khetho ea hau .text-{color}le .bg-{color}lisebelisoa tsa setaele, tseo u ntseng u ka li sebelisa haeba u rata.

Ea mantlha Ea bobeli Katleho Kotsi Tlhokomediso Info Leseli Lefifi

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Lintho tse fapaneng

E kentsoe ho v5.2.0

E le karolo ea mokhoa oa ho fetoha oa CSS oa Bootstrap, libeche joale li sebelisa mefuta-futa ea CSS ea lehae .badgebakeng sa ho ntlafatsa nako ea sebele. Litekanyetso tsa mefuta-futa ea CSS li behiloe ka Sass, kahoo mokhoa oa Sass o ntse o tšehetsoa, le oona.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Mefuta e fapaneng ea Sass

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