Mabheji
Zvinyorwa uye mienzaniso yemabheji, kuverenga kwedu kudiki uye chikamu chekunyora.
Mienzaniso
Mabheji anoyera kuti aenderane nehukuru hweiyo mubereki chikamu nekushandisa hukama font saizi uye mayunitsi em
. Nezvev5, mabheji haachave nekutarisa kana hover masitaera ezvekubatanidza.
Misoro
Muenzaniso musoroNew
Muenzaniso musoroNew
Muenzaniso musoroNew
Muenzaniso musoroNew
Muenzaniso musoroNew
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 vanongoratidzwa nezviri 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 .badge
uye 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 .badge
kirasi 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-dark
yemhando chaiyo. Izvi zvinodaro nekuti zvishandiso zvekumashure hazviseti chero chinhu kunze kwe 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>
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-hidden
nekirasi.
Mabheji emapiritsi
Shandisa .rounded-pill
kirasi yekushandisa kugadzira mabheji akatenderedzwa nehombe 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
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;