Calaamadaha

Dukumeenti iyo tusaaleyaal calaamado, tirintayada yar iyo qaybta calaamadaynta.

Tusaale

Cabirka calaamaduhu si ay u dhigmaan cabbirka xubinta waalidka ee dhow iyadoo la adeegsanayo cabbirka farta qaraabada ah iyo emcutubyada.

Tusaalaha cinwaankaCusub

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

Calaamadaha waxaa loo isticmaali karaa qayb ka mid ah isku xirka ama badhamada si loo bixiyo miiska.

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

Ogsoonow in iyadoo ku xiran sida loo isticmaalo, calaamaduhu waxay ku jahwareerin karaan isticmaalayaasha akhristayaasha shaashadda iyo tignoolajiyada caawinta ee la midka ah. In kasta oo qaabaynta calaamadaha ay bixinayso tilmaam muuqaal ah ujeeddooyinkooda, isticmaaleyaashan ayaa si fudud loogu soo bandhigi doonaa waxa ku jira calaamadda. Iyadoo ku xiran xaaladda gaarka ah, calaamadahani waxay u ekaan karaan ereyo dheeraad ah oo aan toos ahayn ama lambaro dhamaadka jumlada, isku xirka, ama badhanka.

Ilaa macnaha guud aanu caddayn (sida tusaale ahaan "Ogaysiisyada", halkaasoo laga fahmay in "4" ay tahay tirada ogeysiisyada), ka fiirso in lagu daro macnaha guud oo muuqaal ahaan qarsoon oo qoraal dheeraad ah.

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

Kala duwanaanshaha macnaha

Ku dar mid ka mid ah fasalada wax ka beddelka ee hoos ku xusan si aad u bedesho muuqaalka calaamadda.

Asal ahaan Sare Guul Khatarta Digniin Xog Iftiin Madow

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

U gudbinta macnaha tignoolajiyada caawinta

Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .sr-onlyfasalka dhexdiisa ku qarsoon.

Calaamadaha kiniinka

Isticmaal .badge-pillfasalka wax ka beddelka si aad u samayso calaamado badan oo wareegsan (oo leh qoton weyn border-radiusoo dheeraad ah padding). Faa'iido leh haddii aad seegto calaamadaha v3.

Asal ahaan Sare Guul Khatarta Digniin Xog Iftiin Madow

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

Xiriirinta

.badge-*Isticmaalka fasallada macnaha guud ee <a>curiyaha si dhakhso ah u bixi calaamado la fulin karo oo leh dhawaaqyo duleel iyo feejignaan leh.

Asal ahaan Sare Guul Khatarta Digniin Xog Iftiin Madow

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