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 take ta amfani da girman rubutun dangi 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

html

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

Maɓalli

Ana iya amfani da bajoji azaman ɓangare na hanyoyin haɗin gwiwa ko maɓalli don samar da counter.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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 .badgeda sanya shi a kusurwar hanyar haɗi ko maɓalli.

html

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

html

<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

An ƙara a cikin v5.2.0

Saita background-colorfage mai ban mamaki colortare da .text-bg-{color}mataimakan mu . A baya an buƙata don haɗa zaɓinku .text-{color}da .bg-{color}kayan aiki don salo da hannu, waɗanda har yanzu kuna iya amfani da su idan kun fi so.

Firamare Sakandare Nasara hadari Gargadi Bayani Haske Duhu

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Masu canji

An ƙara a cikin v5.2.0

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, alamun yanzu suna amfani da masu canjin CSS na gida .badgedon haɓaka keɓancewa na ainihi. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

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;