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.
Nā 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 em
nā ʻā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
Poʻomanaʻo laʻanaHou
Poʻomanaʻo laʻanaHou
Poʻomanaʻo laʻanaHou
Poʻomanaʻo laʻanaHou
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 hiʻohiʻona ʻ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'ī, ua like paha kēia mau ʻino i nā huaʻōlelo 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.
Hoʻonoho ʻia
E hoʻohana i nā pono hana e hoʻololi .badge
a 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 .badge
papa 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-dark
kūpono. ʻO kēia no ka mea ʻaʻole hoʻonohonoho ʻia nā mea hoʻohana hope akā background-color
.
<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-hidden
papa.
Nā hōʻailona pila
E hoʻohana i ka .rounded-pill
papa hana pono e hoʻopololei i nā ʻeke me ka nui border-radius
.
<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;