Mabaji
Zolemba ndi zitsanzo za mabaji, gawo lathu laling'ono ndi gawo la zilembo.
Zitsanzo
Mabaji amakula kuti agwirizane ndi kukula kwa chinthu chapanthawiyo pogwiritsira ntchito masingidwe amitundu ndi em
mayunitsi. Pofika pa v5, mabaji sakhalanso ndi masitaelo olunjika kapena osunthika pamalumikizidwe.
Mitu
Chitsanzo mutuChatsopano
Chitsanzo mutuChatsopano
Chitsanzo mutuChatsopano
Chitsanzo mutuChatsopano
Chitsanzo mutuChatsopano
Chitsanzo mutuChatsopano
<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>
Mabatani
Mabaji atha kugwiritsidwa ntchito ngati gawo la maulalo kapena mabatani kuti mupereke kauntala.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
Zindikirani kuti kutengera momwe amagwiritsidwira ntchito, mabaji akhoza kukhala osokoneza kwa ogwiritsa ntchito zowerengera zowonera ndi matekinoloje othandizira ofanana. Ngakhale masitaelo a mabaji amapereka chithunzithunzi cha cholinga chawo, ogwiritsa ntchitowa amangowonetsedwa zomwe zili mu bajiyo. Kutengera ndi momwe zinthu zilili, mabajiwa amatha kuwoneka ngati mawu owonjezera kapena manambala kumapeto kwa chiganizo, ulalo, kapena batani.
Pokhapokha ngati nkhaniyo ili yomveka bwino (monga chitsanzo cha "Zidziwitso", pomwe zimamveka kuti "4" ndi kuchuluka kwa zidziwitso), ganizirani kuphatikiza mawu owonjezera okhala ndi gawo lobisika la mawu owonjezera.
Woikidwa
Gwiritsani ntchito zofunikira kuti musinthe a .badge
ndikuyiyika pakona ya ulalo kapena batani.
<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>
Mutha kusinthanso .badge
kalasiyo ndi zida zina zingapo popanda kuwerengera chizindikiro cha generic.
<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>
Mitundu yakumbuyo
Gwiritsani ntchito makalasi athu azothandizira zakumbuyo kuti musinthe mawonekedwe a baji mwachangu. Chonde dziwani kuti mukamagwiritsa ntchito zokhazikika za Bootstrap .bg-light
, mungafunike mawonekedwe amtundu wamawu ngati .text-dark
masitayilo oyenera. Izi ndichifukwa choti zida zakumbuyo sizimayika chilichonse koma 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>
Kupereka tanthauzo ku matekinoloje othandizira
Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .visually-hidden
kalasi.
Mabaji a mapiritsi
Gwiritsani .rounded-pill
ntchito gulu lothandizira kuti mupange mabaji ozungulira kwambiri ndi okulirapo 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
Zosintha
$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;