Nyşanlar

Nyşanlar üçin resminamalar we mysallar, kiçijik sanamak we bellikleme komponentimiz.

Mysal

emNyşanlar şrift ölçeglerini we birliklerini ulanyp, derrew esasy elementiň ululygyna laýyk gelýär .

Mysal sözbaşyTäze

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

Nyşanlary hasaplaýjy üpjün etmek üçin baglanyşyklaryň ýa-da düwmeleriň bölegi hökmünde ulanyp bolýar.

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

Ulanylyşyna baglylykda nyşanlaryň ekran okyjylary we şuňa meňzeş kömekçi tehnologiýalary ulanyjylar üçin bulaşyk bolup biljekdigine üns beriň. Nyşanlaryň bezegi, maksadyna göz ýetirmegi üpjün etse-de, bu ulanyjylara nyşanyň mazmuny hödürlener. Aýratyn ýagdaýa baglylykda bu nyşanlar sözlemiň, baglanyşygyň ýa-da düwmäniň soňundaky tötänleýin goşmaça sözler ýa-da sanlar ýaly bolup biler.

Kontekst düşnükli bolmasa (“Duýduryşlar” mysalynda bolşy ýaly, “4” habarnamanyň sanydygyna düşünilýär), goşmaça tekstiň göze görnüp duran bölegi bilen goşmaça mazmuny goşmagy göz öňünde tutuň.

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

Kontekst üýtgeýişleri

Nyşanyň daşky görnüşini üýtgetmek üçin aşakda görkezilen üýtgediji synplaryň islendigini goşuň.

Başlangyç Ikinji Üstünlik Howp Duýduryş Maglumat Lightagtylyk Garaňky

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

Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .sr-onlysynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Nyşanlary dolduryň

.badge-pillNyşanlary has tegelek etmek üçin üýtgediji synpy ulanyň (has uly border-radiuswe goşmaça keseligine padding). V3-den nyşanlary sypdyrsaňyz peýdaly.

Başlangyç Ikinji Üstünlik Howp Duýduryş Maglumat Lightagtylyk Garaňky

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

Salgylar

Bir elementdäki kontekst .badge-*sapaklaryny ulanmak, hereketlendiriji nyşanlary çalt we fokus ýagdaýlary bilen üpjün edýär.<a>

Başlangyç Ikinji Üstünlik Howp Duýduryş Maglumat Lightagtylyk Garaňky

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