Ikarita

Inyandiko n'ingero kuri badges, kubara kwacu hamwe no gushiraho ibimenyetso.

Kuriyi page

Ingero

Ibipimo byerekana guhuza ubunini bwibintu byababyeyi byihuse ukoresheje ubunini bwimyandikire em. Nko kuri v5, badge ntizifite intumbero cyangwa imiterere yuburyo bwo guhuza.

Imitwe

Urugero rw'umutweGishya

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>

Utubuto

Ibirango birashobora gukoreshwa nkigice cyihuza cyangwa buto kugirango utange compte.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

Menya ko ukurikije uko zikoreshwa, badge zishobora kuba urujijo kubakoresha abasoma ecran hamwe na tekinoroji ifasha. Mugihe imyandikire ya badge itanga ibimenyetso bifatika kubyo bagamije, aba bakoresha bazerekanwa gusa nibiri muri badge. Ukurikije uko ibintu byifashe, uturango dushobora gusa nkamagambo yinyongera cyangwa imibare idasanzwe kurangiza interuro, ihuza, cyangwa buto.

Keretse niba ibivugwamo bisobanutse neza (nkurugero rwa "Kumenyesha", aho byunvikana ko "4" numubare wabimenyeshejwe), tekereza ushizemo imiterere yinyongera hamwe nigice cyihishe cyigice cyinyandiko.

Umwanya

Koresha ibikorwa kugirango uhindure a .badgehanyuma ubishyire mu mfuruka y'umuhuza cyangwa buto.

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>

Urashobora kandi gusimbuza .badgeicyiciro hamwe nibindi bike byingirakamaro utabariye kubipimo rusange.

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>

Amabara yibanze

Wongeyeho muri v5.2.0

Shiraho a background-coloritandukaniro ryimbere colorhamwe nabafasha bacu.text-bg-{color} . Mbere byasabwaga guhuza intoki ibyo wahisemo .text-{color}hamwe .bg-{color}nibikorwa bya styling, urashobora gukoresha niba ubishaka.

Ibanze Secondary Intsinzi Akaga Iburira Amakuru Umucyo Umwijima

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>

Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .visually-hiddenn'ishuri.

Uzuza ibirango

Koresha urwego .rounded-pillrwingirakamaro kugirango ukore badge iringaniye hamwe nini border-radius.

Ibanze Secondary Intsinzi Akaga Iburira Amakuru Umucyo Umwijima

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

Ibihinduka

Wongeyeho muri v5.2.0

Nkigice cya Bootstrap igenda ihinduka CSS ihinduka, badge ubu ikoresha CSS yaho ihindagurika .badgekugirango izamure igihe nyacyo. Indangagaciro za CSS zihinduka zashyizweho binyuze kuri Sass, so Sass yihariye iracyashyigikiwe, nayo.

  --#{$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};

Ibihinduka bya Sass

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