பேட்ஜ்கள்
பேட்ஜ்களுக்கான ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகள், எங்கள் சிறிய எண்ணிக்கை மற்றும் லேபிளிங் கூறு.
உதாரணமாக
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மாற்றியமைக்கும் வகுப்பைப் பயன்படுத்தவும் . v3 இலிருந்து பேட்ஜ்களைத் தவறவிட்டால் பயனுள்ளதாக இருக்கும்.border-radiuspadding
<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>