బ్యాడ్జ్‌లు
బ్యాడ్జ్‌ల కోసం డాక్యుమెంటేషన్ మరియు ఉదాహరణలు, మా చిన్న కౌంట్ మరియు లేబులింగ్ భాగం.
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>