Source

वर्णाः

मुष्टिभ्यां वर्ण-उपयोगितावर्गैः सह वर्णस्य माध्यमेन अर्थं प्रसारयन्तु। होवर स्टेट्स् इत्यनेन सह स्टाइलिंग् लिङ्क्स् इत्यस्य समर्थनम् अपि अन्तर्भवति ।

वर्णं

.पाठ-प्राथमिक

.पाठ-माध्यमिकम्

.पाठ-सफलता

.पाठ-संकटः

.पाठ-चेतावनी

.पाठ-सूचना

.पाठ-प्रकाशः

.पाठ-अन्धकारः

.पाठ-शरीरम्

.पाठ-निःशब्दः

.पाठ-शुक्लः

.पाठ-कृष्ण-५०

.पाठ-शुक्ल-५०

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

सन्दर्भपाठवर्गाः अपि प्रदत्त-होवर-फोकस-स्थितिभिः सह एंकर-उपरि उत्तमं कार्यं कुर्वन्ति । ध्यानं कुर्वन्तु यत् .text-whiteand .text-mutedवर्गस्य अण्डरलाइन् इत्यस्मात् परं अतिरिक्तं लिङ्क् स्टाइलिंग् नास्ति ।

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

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

सन्दर्भपाठवर्णवर्गाणां सदृशं, कस्यचित् तत्त्वस्य पृष्ठभूमिं कस्यापि सन्दर्भवर्गस्य कृते सहजतया सेट् कुर्वन्तु । Anchor घटकाः hover इत्यत्र अन्धकारं करिष्यन्ति, यथा text classes । Background utilities do not setcolor , अतः केषुचित् सन्दर्भेषु भवान् .text-*utilities इत्यस्य उपयोगं कर्तुम् इच्छति ।

.बग-प्राथमिक

.बग-द्वितीयक

.बग-सफलता

.बग-संकटः

.बग-चेतावनी

.बग-सूचना

.बग-प्रकाशः

.बग-अन्धकारः

.बग-शुक्लः

.बग-पारदर्शी

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

पृष्ठभूमि ढाल

यदा $enable-gradientstrue इति सेट् भवति तदा भवन्तः .bg-gradient-utility classes इत्यस्य उपयोगं कर्तुं शक्नुवन्ति । पूर्वनिर्धारितरूपेण, $enable-gradientsअक्षमम् अस्ति तथा च अधोलिखितं उदाहरणं इच्छया भग्नम् अस्ति । एतत् भवता Bootstrap इत्यस्य उपयोगं आरभ्यत इति क्षणात् आरभ्य सुलभतया अनुकूलनार्थं क्रियते । एतानि वर्गाणि सक्षमीकरणाय अस्माकं Sass विकल्पानां विषये ज्ञातुं शक्नुवन्ति तथा च अधिकम्।

.bg-ढाल-प्राथमिक

.bg-ढाल-द्वितीयक

.bg-ढाल-सफलता

.बग-ढाल-संकट

.bg-ढाल-चेतावनी

.bg-ढाल-सूचना

.बग-ढाल-प्रकाश

.बग-ढाल-अन्धकार

<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

विशिष्टतायाः विषये व्यवहारः

कदाचित् अन्यस्य चयनकस्य विशिष्टतायाः कारणात् सन्दर्भवर्गाः प्रयोक्तुं न शक्यन्ते । केषुचित् सन्दर्भेषु, पर्याप्तं कार्यपरिहारं भवतः एलिमेण्ट् इत्यस्य सामग्रीं <div>वर्गेण सह a इत्यस्मिन् वेष्टयितुं भवति ।

सहायक प्रौद्योगिकियों को अर्थ संप्रेषित करना

अर्थं योजयितुं वर्णस्य उपयोगः केवलं दृश्यसूचकं प्रदाति, यत् सहायकप्रौद्योगिकीनां उपयोक्तृभ्यः – यथा स्क्रीनरीडर्-इत्यादिभ्यः – न प्रसारितं भविष्यति । वर्णेन सूचिता सूचना सामग्रीतः एव स्पष्टा भवति (उदा. दृश्यमानपाठः), अथवा वैकल्पिकसाधनेन समाविष्टा भवति, यथा .sr-onlyवर्गेण सह निगूढः अतिरिक्तपाठः इति सुनिश्चितं कुर्वन्तु