Mabheji

Zvinyorwa uye mienzaniso yemabheji, kuverenga kwedu kudiki uye chikamu chekunyora.

Pa peji ino

Mienzaniso

Mabheji anoyera kuti aenderane nehukuru hweiyo mubereki chikamu nekushandisa hukama font saizi uye mayunitsi em. Nezvev5, mabheji haachave nekutarisa kana hover masitayipi ezvekubatanidza.

Misoro

Muenzaniso musoroNew

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

Mabhatani

Mabheji anogona kushandiswa sechikamu chezvinongedzo kana mabhatani ekupa counter.

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

Ziva kuti zvichienderana nemashandisirwo aanoitwa, mabheji anogona kunge achivhiringa kune vashandisi vezvidzitiro zvekuverenga uye akafanana anobatsira matekinoroji. Nepo manyorerwo emabheji achipa ratidziro yekuona nezvechinangwa chavo, vashandisi ava vanongopihwa zviri mukati mebheji. Zvichienderana nemamiriro ezvinhu chaiwo, mabheji aya anogona kuita semashoko asina kurongeka kana manhamba pakupera kwemutsara, chinongedzo, kana bhatani.

Kunze kwekunge mamiriro acho ezvinhu akajeka (sezvakaita "Zviziviso" semuenzaniso, pazvinonzwisiswa kuti "4" inhamba yezviziviso), funga kusanganisira yekuwedzera mamiriro nechidimbu chakavanzwa chekuwedzera.

Positioned

Shandisa zvinoshandiswa kugadzirisa a .badgeuye kuimisa mukona yekubatanidza kana bhatani.

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

Iwe unogona zvakare kutsiva .badgekirasi nemamwe mashoma ekushandisa pasina kuverenga kune imwe generic chiratidzo.

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

Background mavara

Shandisa makirasi edu ekushandisa kumashure kuti uchinje chitarisiko chebheji nekukurumidza. Ndokumbira utarise kuti kana uchishandisa Bootstrap's default .bg-light, iwe ungangoda mavara emavara ekushandisa senge .text-darkyemhando chaiyo. Izvi zvinodaro nekuti zvishandiso zvekumashure hazviseti chero chinhu kunze kwe background-color.

Primary Secondary Success Danger Yambiro Info Chiedza Rima

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

Kuendesa zvinoreva kunobatsira matekinoroji

Kushandisa ruvara kuwedzera zvinoreva kunongopa chiratidzo chekuona, icho chisingazopirwe kune vashandisi vetekinoroji yekubatsira - senge zvidzitiro zvekuverenga. Ita shuwa kuti ruzivo rwunoratidzwa neruvara rwuri pachena kubva pane zvirimo (semuzvinyorwa zvinooneka), kana kuti zvinosanganisirwa neimwe nzira, senge mamwe mavara akavigwa .visually-hiddennekirasi.

Mabheji emapiritsi

Shandisa .rounded-pillkirasi yekushandisa kugadzira mabheji akatenderedzwa nehombe border-radius.

Primary Secondary Success Danger Yambiro Info Chiedza Rima

<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

Variables

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