बैज

बैज्स् कृते दस्तावेजीकरणं उदाहरणानि च, अस्माकं लघुगणना तथा लेबलिंग घटकम्।

इस पृष्ठ पर

उदाहरणानि

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” सूचनानां संख्या इति अवगम्यते), तावत् अतिरिक्तं सन्दर्भं दृग्गतरूपेण निगूढेन अतिरिक्तपाठस्य खण्डेन सह समावेशयितुं विचारयन्तु

स्थितः

.badgea परिवर्त्य लिङ्कस्य अथवा बटनस्य कोणे स्थ��पयितुं उपयोगितानां उपयोगं कुर्वन्तु ।

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

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

बिल्लायाः स्वरूपं शीघ्रं परिवर्तयितुं अस्माकं पृष्ठभूमि-उपयोगितावर्गाणां उपयोगं कुर्वन्तु । कृपया ज्ञातव्यं यत् Bootstrap इत्यस्य पूर्वनिर्धारितस्य उपयोगं कुर्वन् .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;