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

html

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

html

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

html

<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

Lagu daray v5.2.0

Samee background-colorhorudhac isbar -color bardhiga kaaliyayaashayada.text-bg-{color} . Markii hore waxa loo baahnaa in gacanta lagu lammaaniyo doorashadaada .text-{color}iyo .bg-{color}utility-ka qaabaynta, kuwaas oo aad weli isticmaali karto haddii aad doorbidayso.

Asal ahaan Sare Guul Khatarta Digniin Xog Iftiin Madow

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Kala duwanaansho

Lagu daray v5.2.0

Iyada oo qayb ka ah habka isbeddelaya ee Bootstrap ee CSS, calaamaduhu hadda waxay isticmaalaan doorsoomayaasha CSS-ta maxalliga ah .badgesi loo horumariyo habaynta wakhtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Doorsoomayaasha Sass

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