Calaamadaha

Dukumeenti iyo tusaaleyaal calaamado, tirintayada yar iyo qaybta calaamadaynta.

Boggan

Tusaalooyinka

Cabirka calaamaduhu si ay u dhigmaan cabbirka xubinta waalidka ee dhow iyadoo la adeegsanayo cabbirka farta qaraabada ah iyo emcutubyada. Laga bilaabo v5, calaamaduhu ma laha foojignaan ama habab kor u qaadis ah ee isku xidhka.

Ciwaanka

Tusaalaha cinwaankaCusub

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

Badhamada

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

Meel la dhigay

Isticmaal utility si aad wax uga beddesho .badgeoo u dhig cidhifka xidhiidhiyaha ama badhanka.

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

Waxa kale oo aad fasalka ku beddeli .badgekartaa dhowr adeeg oo dheeraad ah iyada oo aan la tirinin tilmaame guud oo dheeraad ah.

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

Midabada asalka ah

Isticmaal fasallada utility-ga asalka ah si aad si dhakhso leh u beddesho muuqaalka calaamadda. Fadlan la soco in marka la isticmaalayo Bootstrap's default .bg-light, waxay u badan tahay inaad u baahan doonto utility midab qoraal ah sida .text-darkqaabaynta habboon. Tani waa sababta oo ah adeegyada asalka ahi ma dejiyaan wax aan ahayn background-color.

Asal ahaan Sare Guul Khatarta Digniin Xog Iftiin Madow

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

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 .visually-hiddenfasalka dhexdiisa ku qarsoon.

Calaamadaha kiniinka

Isticmaal .rounded-pillfasalka utility si aad uga dhigto calaamado aad u wareegsan oo ka weyn border-radius.

Asal ahaan Sare Guul Khatarta Digniin Xog Iftiin Madow

<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

Kala duwanaansho

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