Պիտակներ
Փաստաթղթեր և օրինակներ կրծքանշանների, մեր փոքր քանակի և պիտակավորման բաղադրիչի համար:
Նշանակները չափվում են անմիջապես մայր տարրի չափին համապատասխանելու համար՝ օգտագործելով տառատեսակի հարաբերական չափը և emմիավորները:
<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>Նշանակները կարող են օգտագործվել որպես հղումների կամ կոճակների մաս՝ հաշվիչ տրամադրելու համար:
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Նկատի ունեցեք, որ կախված նրանից, թե ինչպես են դրանք օգտագործվում, կրծքանշանները կարող են շփոթեցնող լինել էկրանի ընթերցողների և նմանատիպ օժանդակ տեխնոլոգիաների օգտագործողների համար: Թեև կրծքանշանների ձևավորումը տեսողական ակնարկ է տալիս դրանց նպատակին, այդ օգտվողներին պարզապես կներկայացվի կրծքանշանի բովանդակությունը: Կախված կոնկրետ իրավիճակից՝ այս կրծքանշանները կարող են թվալ որպես պատահական լրացուցիչ բառեր կամ թվեր նախադասության, հղման կամ կոճակի վերջում:
Եթե համատեքստը պարզ չէ (ինչպես «Ծանուցումների» օրինակում, որտեղ հասկացվում է, որ «4»-ը ծանուցումների թիվն է), հաշվի առեք լրացուցիչ համատեքստ ներառել տեսողականորեն թաքնված լրացուցիչ տեքստի հետ:
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Ավելացրեք ստորև նշված մոդիֆիկատորների դասերից որևէ մեկը՝ կրծքանշանի տեսքը փոխելու համար:
<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>Օժանդակ տեխնոլոգիաներին իմաստ հաղորդելը
Իմաստ ավելացնելու համար գույնի օգտագործումը միայն տեսողական ցուցում է տալիս, որը չի փոխանցվի օժանդակ տեխնոլոգիաների օգտագործողներին, ինչպիսիք են էկրանի ընթերցողները: Համոզվեք, որ գույնով նշված տեղեկատվությունը կա՛մ ակնհայտ է հենց բովանդակությունից (օրինակ՝ տեսանելի տեքստից), կա՛մ ներառված է այլընտրանքային միջոցներով, ինչպիսին է .sr-onlyդասի հետ թաքցված լրացուցիչ տեքստը:
Օգտագործեք .badge-pillմոդիֆիկատորների դասը՝ կրծքանշաններն ավելի կլորացված դարձնելու համար (ավելի մեծ border-radiusև լրացուցիչ հորիզոնականով padding): Օգտակար է, եթե բաց եք թողնում v3-ի կրծքանշանները:
<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>Օգտագործելով համատեքստային .badge-*դասերը <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>