Baji
Takaddun bayanai da misalai na bajoji, ƙaramin ƙidayar mu da sashin lakabi.
Misalai
Ma'auni na bajoji don dacewa da girman ɓangarorin mahaifa na nan take ta amfani da girman rubutun dangi da em
raka'a. Tun daga v5, bajis ba su da salon mayar da hankali ko jujjuyawa don hanyoyin haɗin gwiwa.
Kanun labarai
Misalin jagoraSabo
Misalin jagoraSabo
Misalin jagoraSabo
Misalin jagoraSabo
Misalin jagoraSabo
Misalin jagoraSabo
<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>
Buttons
Ana iya amfani da bajoji azaman ɓangare na hanyoyin haɗin gwiwa ko maɓalli don samar da counter.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
Lura cewa ya danganta da yadda ake amfani da su, bajoji na iya zama da ruɗani ga masu amfani da masu karanta allo da makamantan fasahar taimako. Yayin da salo na bajoji ke ba da alamar gani game da manufarsu, waɗannan masu amfani za a gabatar da su kawai tare da abun ciki na lamba. Ya danganta da takamaiman yanayin, waɗannan bajojin na iya zama kamar ƙarin kalmomi ko lambobi na bazuwar a ƙarshen jumla, hanyar haɗi, ko maɓalli.
Sai dai idan mahallin ya fito fili (kamar yadda yake tare da misalin “Sanarwa”, inda aka fahimci cewa “4” shine adadin sanarwar), la’akari da haɗawa da ƙarin mahallin tare da ɓoyayyen yanki na ƙarin rubutu.
Matsayi
Yi amfani da kayan aiki don gyarawa .badge
da sanya shi a kusurwar hanyar haɗi ko maɓalli.
<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>
Hakanan zaka iya maye gurbin .badge
ajin tare da ƴan ƙarin abubuwan amfani ba tare da ƙidaya don ƙarin maƙasudin jigo ba.
<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>
Launukan bango
Yi amfani da azuzuwan abubuwan amfani na baya don canza kamannin lamba da sauri. Lura cewa lokacin amfani da tsohowar Bootstrap .bg-light
, ƙila za ku buƙaci kayan aikin launi na rubutu kamar .text-dark
salo mai kyau. Wannan saboda bayanan abubuwan amfani ba sa saita komai sai 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>
Isar da ma'ana ga fasahar taimako
Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .visually-hidden
ajin.
Alamomin kwaya
Yi .rounded-pill
amfani da ajin mai amfani don sanya bajoji su zama masu zagaye da babba 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
Masu canji
$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;