बूटस्ट्रैप में उपलब्ध टेक्स्ट कलर क्लासेस

Question

मैं नेविगेशन पट्टी पर शीर्षक के रूप में कुछ पाठ डालकर एक साइन अप पृष्ठ विकसित कर रहा हूं। मैं उन ग्रंथों को अलग-अलग रंग देना चाहता हूं। इस उद्देश्य के लिए मैं एक अलग सीएसएस फ़ाइल का उपयोग कर रहा हूं, लेकिन मैं बूटस्ट्रैप की सीएसएस फाइल का उपयोग करके ऐसा करना चाहता हूं।

क्या कोई बूटस्ट्रैप में उपलब्ध रंग वर्गों को सूचीबद्ध कर सकता है?

Comments

बूटस्ट्रैप #333333पाठ रंग के लिए एक रंग का उपयोग करता है ।

— बिंदिया पटोलिया

यह अकेले ही इसका उपयोग करता है?

— फिदेल कास्त्रो

लेकिन आप अलग-अलग टैग के लिए अलग-अलग उपयोग कर सकते हैं।

— बिंदिया पटोलिया

क्या आप इसे समझा सकते हैं या यदि संभव हो तो लिंक

— डाल सकते

Answer 1

बूटस्ट्रैप 3 प्रलेखन सहायक वर्गों के तहत सूचियों इस: Muted, Primary, Success, Info, Warning, Danger।

बूटस्ट्रैप 4 प्रलेखन उपयोगिताओं के तहत सूचियों इस -> रंग, और अधिक विकल्प हैं: primary, secondary, success, danger, warning, info, light, dark, muted, white।

उन्हें उपयोग करने के लिए एक का उपयोग करता है class text-[class-name]

इसलिए, यदि मुझे उदाहरण के लिए नीले रंग का पाठ चाहिए, तो मैं कुछ ऐसा करूंगा:

<p class="text-primary">This text is the blue primary color.</p>

यह पसंद की एक बड़ी संख्या नहीं है, लेकिन यह कुछ है।

Comments

मुझे यह कहने में संकोच होगा कि क्या आप "नीला पाठ चाहते हैं"। जब आप प्राथमिक रंग लागू करना चाहते हैं, तो उस वर्ग का उपयोग किया जाना चाहिए, जो डिफ़ॉल्ट रूप से नीला होना होता है। लेकिन अगर $primaryपरिवर्तन होता है, तो आपका औपचारिक रूप से नीला पाठ भी बदल जाएगा। यदि आप यह सुनिश्चित करना चाहते हैं कि आपके पास हमेशा नीले रंग का पाठ हो, तो आपको पाठ को नीले रंग की जो भी छाया चाहिए, उसे सेट करना चाहिए।

— जेरोए

Answer 2

नेविगेशन बार में पाठ आम तौर पर bootstrap.cssफ़ाइल में दो निम्न सीएसएस वर्गों में से एक का उपयोग करके रंगीन होता है ।

सबसे पहले, एक डिफ़ॉल्ट नेविगेशन बार (ग्रे एक) का उपयोग करने के मामले में, .navbar-defaultकक्षा का उपयोग किया जाएगा और पाठ गहरे भूरे रंग के रूप में रंगा हुआ है ।

.navbar-default .navbar-text {
  color: #777;
}

दूसरा उलटा नेविगेशन बार (काला वाला) का उपयोग करने के मामले में है, पाठ को ग्रे 60 के रूप में रंगा गया है ।

.navbar-inverse .navbar-text {
  color: #999;
}

इसलिए, आप अपनी इच्छानुसार इसका रंग बदल सकते हैं। हालाँकि, मैं आपको इसे बदलने के लिए एक अलग सीएसएस फ़ाइल का उपयोग करने की सलाह दूंगा।

नोट: आप अनुभाग में दिए गए कस्टमाइज़र का भी उपयोग कर सकते हैं ।Twitter BootstrapNavbar

Answer 3

आप पाठ वर्गों का उपयोग कर सकते हैं:

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white

जहां जरूरत हो वहां किसी भी टैग में टेक्स्ट क्लासेस का इस्तेमाल करें।

<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-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

आप अपनी आवश्यकता के अनुसार अपनी कक्षाओं को जोड़ सकते हैं या उपरोक्त कक्षाओं को संशोधित कर सकते हैं।

Answer 4

अन्य उत्तर में उल्लिखित बूटस्ट्रैप 4 (हाल के संस्करणों में जोड़े गए) में कुछ और वर्ग हैं ।

.text-black-50और .text-white-5050% पारदर्शी हैं।

.text-body {
  color: #212529 !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/*DEMO*/
p{padding:.5rem}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<p class="text-body">.text-body</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>