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

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>

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.

html

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

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>

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

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>

Nā waihoʻoluʻu hope

Hoʻohui ʻia ma v5.2.0

E hoʻonoho i kahi background-colorme ka ʻokoʻa mua colorme kā mākou .text-bg-{color}mau mea kōkua . Ma mua, ua koi ʻia e hoʻopaʻa lima i kāu koho a .text-{color}me .bg-{color}nā pono hana no ka styling, hiki iā ʻoe ke hoʻohana inā makemake ʻoe.

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

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>

Ka lawe ʻ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 ka waihoʻoluʻu i ʻike ʻia mai ka maʻiʻo 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

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

Nā mea hoʻololi

Hoʻohui ʻia ma v5.2.0

Ma ke ʻano o ka hoʻokokoke ʻana o nā ʻano hoʻololi CSS e ulu ana a Bootstrap, ke hoʻohana nei nā badges i nā ʻano CSS kūloko .badgeno ka hoʻomaikaʻi ʻana i ka manawa maoli. Hoʻonohonoho ʻia nā waiwai no nā ʻano CSS ma o Sass, no laila ke kākoʻo mau ʻia nei ka hana maʻamau Sass.

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

Nā hoʻololi 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;