ब्याजहरू

ब्याजहरूका लागि कागजात र उदाहरणहरू, हाम्रो सानो गणना र लेबलिङ कम्पोनेन्ट।

उदाहरण

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>