Baji

Takaddun bayanai da misalai na bajoji, ƙaramin ƙidayar mu da sashin lakabi.

A wannan shafi

Misalai

Ma'auni na bajoji don dacewa da girman ɓangarorin mahaifa na nan kusa ta amfani da ƙayyadaddun girman rubutu da emraka'a. Tun daga v5, bajis ba su da salon mayar da hankali ko jujjuyawa don hanyoyin haɗin gwiwa.

Kanun labarai

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 bajojin 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 .badgeda 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 .badgeajin 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-darksalo mai kyau. Wannan saboda bayanan abubuwan amfani ba sa saita komai sai background-color.

Firamare Sakandare Nasara hadari Gargadi Bayani Haske Duhu

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

Alamomin kwaya

Yi .rounded-pillamfani da ajin mai amfani don sanya bajoji su zama masu zagaye da babba border-radius.

Firamare Sakandare Nasara hadari Gargadi Bayani Haske Duhu

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