बॅज

बॅजसाठी दस्तऐवजीकरण आणि उदाहरणे, आमची लहान संख्या आणि लेबलिंग घटक.

या पृष्ठावर

उदाहरणे

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आणि त्यास लिंक किंवा बटणाच्या कोपर्यात ठेवा.

<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;