Source

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.

Laʻana

E hoʻohālikelike i ka nui o ka mea makua ma o ka hoʻohana ʻana i ka nui o ka font pili a me emnā ʻāpana.

Poʻomanaʻo laʻana Hou
Poʻomanaʻo laʻana Hou
Poʻomanaʻo laʻana Hou
Poʻomanaʻo laʻana Hou
Poʻomanaʻo laʻana Hou
Poʻomanaʻo laʻana Hou
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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 badge-light">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 me kahi ʻāpana huna o nā kikokikona hou.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Nā ʻano like ʻole

E hoʻohui i kekahi o nā papa hoʻololi i haʻi ʻia ma lalo nei e hoʻololi i ke ʻano o kahi hōʻailona.

Papahana lua Pōmaikaʻi ʻO ka pōʻino ʻŌlelo aʻo ʻIke Māmā Poʻeleʻele
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-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 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 .sr-onlypapa.

Nā hōʻailona pila

E hoʻohana i ka .badge-pillpapa hoʻololi no ka hoʻopōʻai ʻana i nā hōʻailona (me kahi ākea nui border-radiusaʻe padding). Maikaʻi inā ʻike ʻoe i nā hōʻailona mai v3.

Papahana lua Pōmaikaʻi ʻO ka pōʻino ʻŌlelo aʻo ʻIke Māmā Poʻeleʻele
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Me ka hoʻohana ʻana i nā .badge-*papa pōʻaiapili ma kahi <a>mea e hāʻawi koke i nā hōʻailona hiki ke hana me nā kūlana hover a me ka nānā ʻana.

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>