Белгілер
Белгілерге арналған құжаттама және мысалдар, біздің шағын санау және таңбалау компоненті.
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>