बैज

बैज के लिए दस्तावेज़ीकरण और उदाहरण, हमारी छोटी संख्या और लेबलिंग घटक।

उदाहरण

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>