बूटस्ट्रैप कक्षाओं का उपयोग करके फ़ॉन्ट-वजन सेट करें


129

क्या कोई font-weight: boldअन्य बूटस्ट्रैप वर्ग है और अन्य मूल्यों के लिए font-weight?

अगर बूटस्ट्रैप में यह पहले से मौजूद है तो मैं नया नहीं बनाऊंगा।


5
कोई वर्ग नहीं है, आपको खुद को अनुकूलित करने की आवश्यकता है।
मानोज

2
हाँ, फ़ॉन्ट-भार के लिए कोई अलग वर्ग नहीं है: बोल्ड
दिनेश कानिवु

जवाबों:


54

EDIT 2 (अंतिम): बूटस्ट्रैप 4 डॉक्यूमेंटेशन के अनुसार , class="font-weight-bold"वह है जो आप ढूंढ रहे हैं।


संपादित करें: आप उपयोग कर सकते हैं class="font-weight-bold"के रूप में यहाँ दिखाया गया है (बूटस्ट्रैप 4 अल्फा)।

मैंने स्पष्टता के उद्देश्यों के लिए मूल उत्तर नीचे रखा।


मैं इस उत्तर को पोस्ट कर रहा हूं क्योंकि इस धागे में बहुत सारे आगंतुक हैं, फिर भी इस मुद्दे को हल करने के लिए इसका कोई उचित समाधान नहीं था। लेकिन जल्द ही अब बूटस्ट्रैप 4 के साथ एक तरीका होगा:

के रूप में इस GitHub पुल अनुरोध शो, तुम सिर्फ का उपयोग करना होगा text-weight-normal, text-weight-boldऔर text-weight-italicवर्गों।

यह आधिकारिक स्थिर रिलीज तक बदल सकता है। लेखन की इस तिथि में, यह पुल अनुरोध अभी तक अल्फा शाखा में विलय नहीं हुआ है।

बूटस्ट्रैप v4 जारी होने के बाद मैं इस पोस्ट को अपडेट करूंगा।


ओह, यह प्यारा है! क्या आप अपने उत्तर को यह बताने के लिए सुधार सकते हैं कि यह बूटस्ट्रैप 4 में होने जा रहा है, और वर्तमान संस्करणों के लिए एक समाधान जोड़ें (या तो उपयोग कर रहा है <strong>और सिर्फ अपनी कक्षा बना रहा है)? मैं आपके उत्तर को चिह्नित करने जा रहा हूँ।
Ionică Bizău

इसके अलावा (बूटस्ट्रैप 4 में) आप सुझाए गए वर्ग ("फ़ॉन्ट-वजन-बोल्ड") को <input/>बक्से में जोड़ सकते हैं और अंदर का पाठ बोल्ड हो जाएगा। हम शीर्षक फ़ील्ड के साथ इसका उपयोग करते हैं ताकि आवश्यक होने पर जोर दिया जा सके। Chrome ver76 और IE11 में Windows x64 में परीक्षण किया गया।
टिम्मि

मस्त, मस्त आदमी। यह काम करता हैं!!! मैंने css फ़ाइल में मैन्युअल रूप से शैली जोड़कर सामग्री को बोल्ड बनाने का प्रयास किया, लेकिन ऐसा नहीं हुआ। तब मुझे आपका जवाब मिला: D
ट्रैविस ले

93

मैंने इसे बूटस्ट्रैप वेबसाइट पर पाया , लेकिन यह वास्तव में बूटस्ट्रैप क्लास नहीं है, यह सिर्फ HTML है।

<strong>rendered as bold text</strong>

3
इसके अलावा strongबोल्ड जरूरी नहीं है। से developer.mozilla.org/en-US/docs/Web/HTML/Element/strong : "आम तौर पर यह तत्व डिफ़ॉल्ट रूप से एक बोल्ड फ़ॉन्ट वजन का उपयोग कर प्रदान की गई है हालांकि, यह सिर्फ बोल्ड स्टाइल लागू करने के लिए नहीं किया जाना चाहिए; का उपयोग करें। सीएसएस फ़ॉन्ट-वजन संपत्ति उस उद्देश्य के लिए। "

मजबूत मजबूत है, बोल्ड बोल्ड है :( @GurgenHakobyan द्वारा उत्तर को बहुत अधिक पसंद किया जाना चाहिए।
MattAllegro

यह पुराने दिनों से है जहां कोई सीएसएस नहीं था। चिंताओं के डिजाइन पैटर्न को अलग करने के कारण, सीएसएस का आविष्कार HTML में सामग्री और प्रस्तुति दोनों से बचने के लिए किया गया था। यद्यपि वेब ब्राउज़र अभी भी पिछड़े संगतता के लिए इसका समर्थन करते हैं, लेकिन यह दृढ़ता से <b> और <strong>, <i> और <em> आदि का उपयोग नहीं करने की सलाह दी जाती है। en.wikipedia.org/wiki/Cascading_Style_Sheets
Wildhammer


39

अपने Site.css (या किसी अन्य स्थान पर) में एक नया वर्ग बनाएं, जिसका नाम उदाहरण है .font-bold और इसे अपने तत्व पर सेट करें

.font-bold {
  font-weight: bold;
}

8
मैं इसके खिलाफ सलाह दूंगा, मार्कअप को शब्दार्थ माना जाता है, इस तरह: .some-Functional-description-of-the-element-{{font-weight: bold}। बस सीएसएस की तरह नाम वाले एक वर्ग का उपयोग करने के बजाय, बस शैली का उपयोग करें = "फ़ॉन्ट-वजन: बोल्ड;", यह त्वरित n गंदा होने के बारे में अधिक ईमानदार है।
सी.एम.सी.

23
यह एक सही समाधान है और सिमेंटिक के रूप में कई अन्य बूटस्ट्रैप कक्षाएं जैसे कि .text-uppercase और .list-unstyled। इनलाइन शैली एक प्रबंधन दुःस्वप्न बन सकती है, उदाहरण के लिए यदि आप बाद में तय करते हैं कि सभी बोल्ड तत्वों का एक अलग रंग होना चाहिए या एक पाठ प्रभाव होना चाहिए। क्लास होने से यह आसान हो जाता है और यह सबसे अच्छा उत्तर है।
एंडी मेहालिक

मैं यहां एंडी से सहमत हूं। यह प्रश्न का सही उत्तर देता है। सामान्यीकृत कक्षाओं का उपयोग करते समय वैध उपयोग के मामले हैं जो सबसे स्वच्छ HTML आउटपुट प्रदान करेगा, जहां जनरेटर, टूलकिट और टेम्पलेट उपयोग में हैं।
दिनांक

यह बूटस्ट्रैप के लिए सही समाधान है। 4. इसका उद्देश्य strong टेक्स्ट को बोल्ड बनाना नहीं है , ब्राउज़र इसे करते हैं क्योंकि कन्वेंशन मजबूत ज़ोर के साथ बोल्ड टेक्स्ट है। HTML टैग का अर्थ सिमेंटिक होना चाहिए, न कि केवल डिज़ाइन उद्देश्यों के लिए मौजूद है। वास्तव में यह डब्ल्यू 3 सिफारिश में उद्धृत नहीं है, और यहां तक ​​कि b बोल्ड होने के लिए भी भरोसा नहीं किया जाना चाहिए
आंद्रे फिग्यूएरेडो

1
यह बूटस्ट्रैप 4 में पुराना है
toddmo

8

बूटस्ट्रैप 4 पर आप उपयोग कर सकते हैं:

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>

2

यदि आप अधिक अनुकूलित मूल्य चाहते हैं और / या आप ऐसी योजना का पालन कर रहे हैं जिसे बार-बार करने की आवश्यकता है, तो अपने फ़ॉन्ट-वजन को नियंत्रित करने के लिए आपको बूटस्टार के चर का उपयोग करना चाहिए; चर को पूरे प्रोजेक्ट में रंगों, रिक्ति, या फ़ॉन्ट स्टैक जैसे आमतौर पर उपयोग किए जाने वाले मूल्यों को केंद्रीकृत और साझा करने के लिए उपयोग किया जाता है;

आप http://getbootstrap.com/css पर सभी दस्तावेज़ पा सकते हैं ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.