Nā hōʻailona

ʻO ka palapala a me nā laʻana no nā hōʻailona, kā mākou helu liʻiliʻi a me ka ʻāpana lepili.

Ma kēia ʻaoʻao

Nā laʻana

E hoʻohālikelike i ka nui o ka mea makua ma ka hoʻohana ʻana i ka nui o ka font pili a me emnā ʻāpana. Ma ka v5, ʻaʻohe ʻano kikoʻī a hover paha nā ʻano no nā loulou.

Nā poʻomanaʻo

Poʻomanaʻo laʻanaHou

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

Nā pihi

Hiki ke hoʻohana ʻia nā hōʻailona ma ke ʻano o nā loulou a i ʻole nā pihi e hāʻawi i kahi counter.

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

E hoʻomanaʻo, ma muli o ke ʻano o ka hoʻohana ʻia ʻana, hiki ke huikau nā hōʻailona no nā mea hoʻohana o nā mea heluhelu pale a me nā ʻenehana kōkua like. ʻOiai ke hāʻawi ʻia nei ke ʻano o nā hōʻailona i kahi hōʻailona ʻike e pili ana i ko lākou kumu, e hōʻike wale ʻia kēia mau mea hoʻohana me ka ʻike o ka badge. Ma muli o ke kūlana kiko'ī, e like paha kēia mau ʻino i nā huaʻōlelo hou a i ʻole nā helu ma ka hope o kahi huaʻōlelo, loulou, a i ʻole pihi.

Inā ʻaʻole maopopo ka pōʻaiapili (e like me ka laʻana "Notifications", kahi i hoʻomaopopo ʻia ʻo "4" ka helu o nā hoʻolaha), e noʻonoʻo e hoʻokomo i ka pōʻaiapili hou me kahi ʻāpana huna o nā kikokikona hou.

Hoʻonoho ʻia

E hoʻohana i nā pono hana e hoʻololi .badgea hoʻonoho iā ia ma ke kihi o kahi loulou a i ʻole pihi.

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

Hiki iā ʻoe ke hoʻololi i ka .badgepapa me kekahi mau mea pono ʻole me ka helu ʻole no kahi hōʻailona maʻamau.

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

Nā waihoʻoluʻu hope

E hoʻohana i kā mākou mau papa hana hope e hoʻololi koke i ke ʻano o kahi hōʻailona. E ʻoluʻolu, i ka wā e hoʻohana ai i ka Bootstrap paʻamau .bg-light, pono paha ʻoe i kahi pono kala kikokikona e like me ke ʻano .text-darkkūpono. ʻO kēia no ka mea ʻaʻole hoʻonohonoho ʻia nā mea hoʻohana hope akā background-color.

Papahana lua Pōmaikaʻi ʻO ka pōʻino ʻŌlelo aʻo ʻIke Māmā Poʻeleʻele

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

Ka hōʻike ʻana i ka manaʻo i nā ʻenehana kōkua

ʻO ka hoʻohana ʻana i ke kala e hoʻohui i ka manaʻo e hāʻawi wale i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ke kala i ʻike ʻia mai ka ʻike ponoʻī (e laʻa i ke kikokikona ʻike ʻia), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .visually-hiddenpapa.

Nā hōʻailona pila

E hoʻohana i ka .rounded-pillpapa hana pono e hoʻopololei i nā ʻeke me ka nui border-radius.

Papahana lua Pōmaikaʻi ʻO ka pōʻino ʻŌlelo aʻo ʻIke Māmā Poʻeleʻele

<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

Nā mea hoʻololi

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