Dagiti Badge

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

Iti daytoy a panid

Dagiti pagarigan

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. Manipud iti v5, dagiti badge ket awanen kadagiti estilo ti pokus wenno hover para kadagiti silpo.

Dagiti Paulo

Pagarigan ti pauloBaro

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

Dagiti Buton

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 bg-secondary">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.

Naposisionan

Usaren dagiti utilidad tapno baliwan ti a .badgeken iposision daytoy iti suli ti silpo wenno buton.

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

Mabalinmo pay a sukatan ti .badgeklase kadagiti sumagmamano pay a utilidad nga awan ti panagbilang para iti ad-adu a sapasap a mangipakita.

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

Dagiti kolor ti likudan

Usaren dagiti background utility class-tayo tapno napardas a baliwan ti langa ti badge. Pangngaasi a laglagipen a no agus-usar ti default ti Bootstrap .bg-light, kasapulam la ketdi ti utilidad ti kolor ti teksto a kas .text-darkpara iti umno nga estilo. Daytoy ket gapu ta dagiti utilidad ti likudan ket dida mangikeddeng ti ania man no di background-colorti .

Kangrunaan Segundario nga Balligi Peggad Pakdaar Info nga Silaw Nasipnget

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

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 .visually-hiddenklase.

Badge ti pildoras

Usaren ti .rounded-pillklase ti utilidad tapno ad-adda a nagtimbukel dagiti badge nga addaan iti dakdakkel a border-radius.

Kangrunaan Segundario nga Balligi Peggad Pakdaar Info nga Silaw Nasipnget

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

Dagiti Variable

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