Nyşanlar
Nyşanlar üçin resminamalar we mysallar, kiçijik sanamak we bellikleme komponentimiz.
Mysal
em
Nyşanlar şrift ölçeglerini we birliklerini ulanyp, derrew esasy elementiň ululygyna laýyk gelýär .
Mysal sözbaşyTäze
Mysal sözbaşyTäze
Mysal sözbaşyTäze
Mysal sözbaşyTäze
Mysal sözbaşyTäze
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ň sanydyr), goşmaça tekstiň göze görünýän bölegi bilen goşmaça kontekst 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ň.
<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-only
synp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.
Nyşanlary dolduryň
.badge-pill
Nyşanlary has tegelek etmek üçin üýtgediji synpy ulanyň (has uly border-radius
we goşmaça keseligine padding
). V3-den nyşanlary sypdyrsaňyz peýdaly.
<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>
<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>