रंग-बिरंग के बा
मुट्ठी भर रंग उपयोगिता वर्ग के साथ रंग के माध्यम से अर्थ संप्रेषित करीं। होवर स्टेट के साथ स्टाइल लिंक खातिर समर्थन भी शामिल बा।
विशिष्टता से निपटे के बा
कई बेर दोसरा चयनकर्ता के विशिष्टता के कारण संदर्भ वर्ग लागू ना कइल जा सके ला। <div>
कुछ मामिला में, एगो पर्याप्त वर्कअराउंड ई होला कि अपना तत्व के सामग्री के क्लास के साथ a में लपेटल जाय ।
सहायक प्रौद्योगिकी के अर्थ संप्रेषित कइल
अर्थ जोड़े खातिर रंग के इस्तेमाल से खाली एगो दृश्य संकेत मिलेला, जवन सहायक तकनीक के प्रयोगकर्ता लोग के ना पहुँचावल जाई – जइसे कि स्क्रीन रीडर। सुनिश्चित करीं कि रंग से चिन्हित जानकारी या त खुद सामग्री से स्पष्ट होखे (जइसे कि दृश्यमान पाठ), या फिर वैकल्पिक तरीका से शामिल कइल गइल होखे, जइसे कि .sr-only
क्लास के साथ छिपल अतिरिक्त पाठ।
रंग
.पाठ-प्राथमिक के बा
.पाठ-माध्यमिक के बा
.पाठ-सफलता के बा
.पाठ-खतरा के बा
.पाठ-चेतावनी के बा
.पाठ-जानकारी बा
.पाठ-प्रकाश के बा
.पाठ-अंधेरा बा
.पाठ-शरीर के बा
.पाठ-म्यूट कइल गइल बा
.पाठ-सफेद के बा
.पाठ-काला-50 के बा
.पाठ-सफेद-50 के बा
<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-white
आ .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>
पृष्ठभूमि के रंग के बा
संदर्भ पाठ रंग वर्ग सभ के समान, आसानी से कौनों तत्व के पृष्ठभूमि के कौनों भी संदर्भ वर्ग पर सेट करीं। एंकर घटक होवर पर गहिराह हो जाई, ठीक ओइसहीं जइसे टेक्स्ट क्लास. बैकग्राउंड यूटिलिटीज सेट ना करेलाcolor
, एहसे कुछ मामिला में रउरा .text-*
यूटिलिटीज के इस्तेमाल कइल चाहब.
<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-gradients
पर सेट कइल जाला, त रउआँ उपयोगिता वर्ग सभ के इस्तेमाल कर सकत बानी । एह कक्षा सभ के सक्षम करे खातिर हमनी के सास विकल्प सभ के बारे में जानीं आ अउरी बहुत कुछ।true
false
.bg-gradient-
.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark