बैज

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

इस पृष्ठ पर

उदाहरण

emसंबंधित फ़ॉन्ट आकार और इकाइयों का उपयोग करके तत्काल मूल तत्व के आकार से मेल खाने के लिए बैज स्केल । v5 के अनुसार, बैज में अब लिंक के लिए फ़ोकस या होवर शैलियाँ नहीं हैं।

शीर्षकों

उदाहरण शीर्षकनया

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

बटन

एक काउंटर प्रदान करने के लिए बैज का उपयोग लिंक या बटन के हिस्से के रूप में किया जा सकता है।

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

ध्यान दें कि उनका उपयोग कैसे किया जाता है, इस पर निर्भर करते हुए, स्क्रीन रीडर और समान सहायक तकनीकों के उपयोगकर्ताओं के लिए बैज भ्रमित करने वाले हो सकते हैं। जबकि बैज की स्टाइलिंग उनके उद्देश्य के रूप में एक दृश्य संकेत प्रदान करती है, इन उपयोगकर्ताओं को बस बैज की सामग्री के साथ प्रस्तुत किया जाएगा। विशिष्ट स्थिति के आधार पर, ये बैज वाक्य, लिंक या बटन के अंत में यादृच्छिक अतिरिक्त शब्दों या संख्याओं की तरह लग सकते हैं।

जब तक संदर्भ स्पष्ट न हो ("सूचनाएं" उदाहरण के साथ, जहां यह समझा जाता है कि "4" सूचनाओं की संख्या है), अतिरिक्त पाठ के नेत्रहीन छिपे हुए टुकड़े के साथ अतिरिक्त संदर्भ को शामिल करने पर विचार करें।

तैनात

.badgeकिसी लिंक या बटन के कोने में a को संशोधित करने और स्थिति में रखने के लिए उपयोगिताओं का उपयोग करें।

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

.badgeआप अधिक सामान्य संकेतक के लिए गिनती के बिना कक्षा को कुछ और उपयोगिताओं के साथ भी बदल सकते हैं ।

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

पृष्ठभूमि रंग

बैज की उपस्थिति को शीघ्रता से बदलने के लिए हमारे बैकग्राउंड यूटिलिटी क्लासेस का उपयोग करें। कृपया ध्यान दें कि बूटस्ट्रैप के डिफ़ॉल्ट का उपयोग करते समय .bg-light, आपको .text-darkउचित स्टाइलिंग के लिए टेक्स्ट कलर यूटिलिटी की आवश्यकता होगी। ऐसा इसलिए है क्योंकि बैकग्राउंड यूटिलिटीज कुछ भी सेट नहीं करती हैं लेकिन background-color.

मुख्य माध्यमिक सफलता खतरा चेतावनी जानकारी रोशनी अँधेरा

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

सहायक तकनीकों को अर्थ देना

अर्थ जोड़ने के लिए रंग का उपयोग केवल एक दृश्य संकेत प्रदान करता है, जो सहायक तकनीकों के उपयोगकर्ताओं को नहीं बताया जाएगा - जैसे स्क्रीन रीडर। सुनिश्चित करें कि रंग द्वारा दर्शाई गई जानकारी या तो सामग्री से स्पष्ट है (उदाहरण के लिए दृश्यमान पाठ), या वैकल्पिक माध्यमों से शामिल है, जैसे कि .visually-hiddenकक्षा के साथ छिपा हुआ अतिरिक्त पाठ।

गोली बैज

.rounded-pillबैज को अधिक गोलाकार बनाने के लिए उपयोगिता वर्ग का उपयोग करें border-radius।

मुख्य माध्यमिक सफलता खतरा चेतावनी जानकारी रोशनी अँधेरा

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

सास

चर

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;