बॅज

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

उदाहरण

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>