Tibeji

Matsalwa na swikombiso swa tibeji, xiphemu xa hina xa ku hlayela lokutsongo na ku lebula.

Eka tluka leri

Swikombiso

Tibeji ti pima ku fambisana na mpimo wa xiaki xa mutswari wa le kusuhi hi ku tirhisa mpimo wa fonto lowu yelanaka na emtiyuniti. Ku sukela eka v5, tibeji a ta ha ri na switayele swa focus kumbe hover swa swihlanganisi.

Tinhloko-mhaka

Xikombiso xa nhlokomhakaXintshwa

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

Swikomba-nkarhi

Tibeji tinga tirhisiwa tani hi xiphemu xa swihlanganisi kumbe swikomba-nkarhi ku nyika xibalo.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

Xiya leswaku swi titshege hi ndlela leyi ti tirhisiwaka ha yona, tibeji ti nga ha pfilunganya vatirhisi va swihlaya-swikirini ni thekinoloji leyi fanaka leyi pfunaka. Hambileswi ku endliwa ka switayili swa tibeji swi nyikaka xikombiso lexi vonakaka xa xikongomelo xa tona, vatirhisi lava va ta nyikiwa ntsena leswi nga endzeni ka beji. Hi ku ya hi xiyimo xo karhi, tibeji leti ti nga ha vonaka ti ri marito lama engetelekeke lama nga hlelekangiki kumbe tinomboro emakumu ka xivulwa, xihlanganisi kumbe buti.

Handle ka loko mongo wu ri erivaleni (tanihi le ka xikombiso xa “Switiviso”, laha ku twisisiwaka leswaku “4” i nhlayo ya switiviso), ehleketa ku katsa mongo lowu engetelekeke hi xiphemu xa tsalwa ro engetela leri fihliweke hi mahlo.

Ku vekiwa eka xiyimo

Tirhisa switirhisiwa ku cinca a .badgeivi u yi veka ekhonweni ya xihlanganisi kumbe buti.

<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 nga ha tlhela u siva .badgetlilasi hi switirhisiwa swin’wana swi nga ri swingani handle ko hlayela xikombiso xa xivumbeko xa le henhla swinene.

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

Mihlovo ya le ndzhaku

Tirhisa titlilasi ta hina ta vukorhokeri bya le ndzhaku ku cinca hi ku hatlisa ku languteka ka beji. Hi kombela u xiya leswaku loko u tirhisa Bootstrap's default .bg-light, u ta lava xitirhisiwa xa muvala wa tsalwa ku fana na .text-darkku endla xitayili lexi faneleke. Leswi swi vangiwa hikuva switirhisiwa swa le ndzhaku a swi veki nchumu handle background-colorka .

Phurayimari Xikolo xa vumbirhi Humelela Nghozi Xilemukisi Info Rivoni Xinyama

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

Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .visually-hiddentlilasi.

Tibeji ta maphilisi

Tirhisa .rounded-pilltlilasi ya vukorhokeri ku endla leswaku tibeji ti va xirhendzevutani swinene hi border-radius.

Phurayimari Xikolo xa vumbirhi Humelela Nghozi Xilemukisi Info Rivoni Xinyama

<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

Swilo leswi cinca-cincaka

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