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

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

<button type="button" class="btn btn-primary">
  Notifications <span class="badge 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.

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

<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

Koresha ibyiciro byingirakamaro byamasomo kugirango uhindure byihuse isura ya badge. Nyamuneka menya ko mugihe ukoresheje Bootstrap isanzwe .bg-light, ushobora gukenera inyandiko yamabara yingirakamaro nko muburyo .text-darkbukwiye. Ibi ni ukubera ko ibikorwa byibanze ntacyo bishyiraho ariko background-color.

Ibanze Secondary Intsinzi Akaga Iburira Amakuru Umucyo Umwijima

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

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

<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

Ibihinduka

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