Dagiti Badge

Dokumentasion ken pagarigan para kadagiti badge, ti bassit a pasettayo a bilang ken etiketa.

Pagwadan

Dagiti badge ket ag-scale tapno maipada ti kadakkel ti dagus a nagannak nga elemento babaen ti panagusar ti relatibo a panagdakkel ti letra ken emdagiti yunit.

Pagarigan ti pauloBaro

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

Mabalin nga usaren dagiti badge kas paset dagiti link wenno buton tapno mangipaay iti counter.

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

Paliiwenyo ta depende no kasano ti pannakausar dagitoy, mabalin a makariro dagiti badge kadagiti agus-usar kadagiti screen reader ken umasping a makatulong a teknolohia. Bayat a ti estilo dagiti badge ket mangipaay iti makita a pagilasinan no ania ti panggepda, dagitoy nga agus-usar ket maiparang laeng ti linaon ti badge. Depende iti espesipiko a kasasaad, dagitoy a badge ket mabalin a kasla naiparna a kanayonan a sasao wenno numero iti ngudo ti sentensia, link, wenno buton.

Malaksid no nalawag ti konteksto (kas iti pagarigan ti “Pakaammo,” a sadiay maawatan a ti “4” ket bilang dagiti pakaammo), ibilang ti panangiraman iti kanayonan a konteksto nga addaan iti makita a nailemmeng a pedaso ti kanayonan a teksto.

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

Dagiti panagduduma ti konteksto

Inayon ti ania man kadagiti nadakamat iti baba a klase ti mangbalbaliw tapno agbaliw ti langa ti badge.

Kangrunaan Sekondaria Balligi Peggad Pakdaar Info nga Silaw Nasipnget

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

Panangipaay ti kaipapanan kadagiti makatulong a teknolohia

Ti panagusar ti kolor tapno mangnayon ti kaipapanan ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – kas dagiti screen reader. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (kas pagarigan ti makita a teksto), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .sr-onlyklase.

Badge ti pildoras

Usaren ti .badge-pillklase ti mangbalbaliw tapno mangaramid kadagiti badge nga ad-adda a nagtimbukel (nga addaan iti dakdakkel border-radiusken kanayonan a horisontal padding). Mausar no maliwayam dagiti badge manipud iti v3.

Kangrunaan Sekondaria Balligi Peggad Pakdaar Info nga Silaw Nasipnget

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

Dagiti silpo

.badge-*Ti panagusar kadagiti klase ti konteksto iti maysa nga <a>elemento ket napardas a mangipaay kadagiti maaramid a badge nga addaan kadagiti estado ti hover ken pokus.

Kangrunaan Sekondaria Balligi Peggad Pakdaar Info nga Silaw Nasipnget

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