Http://getbootstrap.com से बूटस्ट्रैप 3 का पूरा पैक डाउनलोड करने के बाद , मैंने देखा कि थीम के लिए एक अलग सीएसएस फ़ाइल है। इसका उपयोग कैसे करें? कृपया समझाएँ?
मैंने bootstrap-theme.cssअपने मौजूदा बूटस्ट्रैप प्रोजेक्ट में शामिल किया, लेकिन आउटपुट में कोई अंतर नहीं है।
जवाबों:
बूटस्ट्रैप 3.x डाउनलोड करने पर, आपको bootstrap.css और बूटस्ट्रैप-theme.css मिलेंगे (इन फ़ाइलों के मिनीकृत संस्करण का उल्लेख नहीं है जो मौजूद हैं)।
bootstrap.cssपूरी तरह से स्टाइल और उपयोग करने के लिए तैयार है, अगर ऐसी आपकी इच्छा है। यह शायद थोड़ा सा सादा है लेकिन यह तैयार है और यह वहाँ है।
यदि आप नहीं चाहते हैं तो आपको बूटस्ट्रैप-theme.css का उपयोग करने की आवश्यकता नहीं है और चीजें ठीक होंगी।
bootstrap-theme.cssफ़ाइल का नाम सुझाने की कोशिश कर रहा है: यह बूटस्ट्रैप के लिए एक विषय है जिसे रचनात्मक रूप से 'द बूटस्ट्रैप' माना जाता है। फ़ाइल का नाम चीजों को थोड़ा भ्रमित करता है क्योंकि आधार में bootstrap.cssपहले से ही स्टाइल लागू है और मैं, एक के लिए, उन शैलियों को डिफ़ॉल्ट मानूंगा। लेकिन बूटस्ट्रैप प्रलेखन के उदाहरणों में इस bootstrap-theme.cssफ़ाइल के संबंध में कही गई बातों के आलोक में यह निष्कर्ष स्पष्ट रूप से गलत है :
"नेत्रहीन बढ़ाया अनुभव के लिए वैकल्पिक बूटस्ट्रैप थीम लोड करें।"
उपरोक्त उद्धरण यहाँ http://getbootstrap.com/getting-started/#examples पर पाया गया है जो इस उदाहरण पृष्ठ http://getbootstrap.com/examples/theme/ से लिंक करता है । विचार यह है कि है bootstrap-theme.cssहै बूटस्ट्रैप विषय और यह वैकल्पिक है।
BootSwatch.com की थीम के बारे में: ये थीम जैसे लागू नहीं हैं bootstrap-theme.css। बूटवाच थीम मूल के संशोधित संस्करण हैं bootstrap.css। तो, आपको निश्चित रूप bootstrap-theme.cssसे एक ही समय में बूटस्वाच और फ़ाइल से एक थीम का उपयोग नहीं करना चाहिए ।
अपने स्वयं के कस्टम थीम के बारे में: आप bootstrap-theme.cssअपनी थीम बनाते समय संशोधित करना चुन सकते हैं । ऐसा करने से बिना किसी अंतर्निहित बूटस्ट्रैप अच्छाई को गलती से तोड़ने के बिना स्टाइल में बदलाव करना आसान हो सकता है।
सीएसएस शैलियों के एक उदाहरण के लिए इस पर एक नज़र है: http://getbootstrap.com/examples/theme/
यदि आप यह देखना चाहते हैं कि बूटस्ट्रैप-theme.css फ़ाइल के बिना उदाहरण कैसा दिखता है , तो अपने ब्राउज़र डेवलपर टूल को खोलें और उदाहरण के <head> से लिंक को हटा दें और फिर आप इसकी तुलना कर सकते हैं।
मुझे पता है कि यह एक पुराना सवाल है, लेकिन इसे सिर्फ इसलिए पोस्ट किया है क्योंकि कोई भी इस बात का उदाहरण देख रहा है कि यह कैसा दिखता है।
अपडेट करें
bootstrap.css = मुख्य सीएसएस ढांचा (ग्रिड, मूल शैली, आदि)
bootstrap-theme.css= विस्तारित स्टाइलिंग (3 डी बटन, ग्रेडिएंट आदि)। यह फ़ाइल वैकल्पिक है और बूटस्ट्रैप की कार्यक्षमता को बिल्कुल भी प्रभावित नहीं करती है, यह केवल उपस्थिति को बढ़ाती है।
अपडेट २
V3.2.0 की रिलीज़ के साथ बूटस्ट्रैप ने डॉक्स पृष्ठों पर थीम सीएसएस देखने के लिए एक विकल्प जोड़ा है। यदि आप डॉक पृष्ठों ( सीएसएस , घटकों , जावास्क्रिप्ट ) में से एक पर जाते हैं, तो आपको साइड नेवी के नीचे एक "प्रीव्यू थीम" लिंक देखना चाहिए जिसका उपयोग आप थीम सीएसएस को चालू और बंद करने के लिए कर सकते हैं।
bootstrap.cssसे किसी विषय की सामग्री को बदल दूंगा जैसे कि साइट कहती है और मैं अभी bootstrap-theme.cssभी एक बोटवॉच थीम के साथ भी उपयोग कर सकता हूं ?
bootstrap-themeBootswatch के साथ उपयोग नहीं कर सकते । इसने वैसे भी मेरी साइट को गड़बड़ कर दिया।
सबसे पहले, bootstrap-theme.cssबूटस्ट्रैप 2.x शैली में बूटस्ट्रैप 3 के बराबर और कुछ नहीं है। 3. यदि आप वास्तव में इसका उपयोग करना चाहते हैं, तो बस इसे ALONG के साथ जोड़ें bootstrap.css(छोटा संस्करण भी काम करेगा)।
जैसा कि दूसरों ने कहा है, फ़ाइल नाम बूटस्ट्रैप-theme.css बहुत भ्रामक है। मैंने बूटस्ट्रैप -3 डी.केएस या बूटस्ट्रैप-फैंसी.कैंस जैसे कुछ को चुना होगा जो वास्तव में यह क्या करता है के बारे में अधिक विवरणात्मक होगा। दुनिया एक "बूटस्ट्रैप थीम" के रूप में जो देखती है वह एक ऐसी चीज़ है जिसे आप बूटवॉच से प्राप्त कर सकते हैं जो कि एक बिल्कुल अलग जानवर है।
उस के साथ, प्रभाव काफी अच्छा है - ग्रेडिएंट और छाया और ऐसे। दुर्भाग्य से यह फाइल बूटवॉच थीम्स पर कहर बरपाएगी, इसलिए मैंने इसमें खुदाई करने का फैसला किया कि यह उनके साथ अच्छा खेल दिखाएगी।
बूटस्ट्रैप-theme.css बूटस्ट्रैप स्रोत में theme.less फ़ाइल से उत्पन्न होता है । प्रभावित तत्व हैं (बूटस्ट्रैप v3.2.0 के रूप में):
Theme.less फ़ाइल इस पर निर्भर करती है:
@import "variables.less";
@import "mixins.less";
कोड कई स्थानों पर चर में परिभाषित रंगों का उपयोग करता है, उदाहरण के लिए:
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}
यही कारण है कि बूटस्ट्रैप-theme.cs पूरी तरह से BootSwatch थीम्स को गड़बड़ कर देता है। अच्छी खबर यह है कि BootSwatch थीम्स भी वैरिएबल्स.लेस फाइलों से बनाई गई हैं, ताकि आप अपने BootSwatch थीम के लिए बस बूटस्ट्रैप-theme.css बना सकें।
यह करने का सही तरीका थीम निर्माण प्रक्रिया को अद्यतन करना है, लेकिन यहां त्वरित और गंदा तरीका है। अपने बूटस्वैच थीम में से बूटस्ट्रैप स्रोत में वैरिएबल.लेस फ़ाइल को बदलें और इसे बनाएँ और वॉइला आपके पास अपने बूटस्वाच थीम के लिए एक बूटस्ट्रैप-थीम.एससी फ़ाइल है।
बूटस्ट्रैप का निर्माण कठिन लग सकता है, लेकिन यह वास्तव में बहुत सरल है:
किया हुआ। देखें, यह आसान था, है ना?
मुझे पता है यह पोस्ट थोड़े पुरानी है लेकिन ...
जैसा कि 'विटनेस' ने बताया।
अपने स्वयं के कस्टम थीम के बारे में आप अपनी खुद की थीम बनाते समय बूटस्ट्रैप-theme.css को संशोधित करना चुन सकते हैं। ऐसा करने से बिना किसी अंतर्निहित बूटस्ट्रैप अच्छाई को गलती से तोड़ने के बिना स्टाइल में बदलाव करना आसान हो सकता है।
मैं इसे देखता हूं क्योंकि बूटस्ट्रैप ने वर्षों से देखा है कि हर कोई कोर शैलियों की तुलना में कुछ अलग चाहता है। हालांकि आप बूटस्ट्रैप को संशोधित कर सकते हैं। लेकिन यह चीजों को तोड़ सकता है और यह एक नए संस्करण को वास्तविक दर्द और समय लेने के लिए अद्यतन कर सकता है। किसी 'थीम' साइट से डाउनलोड करने का मतलब है कि आपको इंतजार करना होगा कि क्या निर्माता उस थीम को अपडेट करता है, यदि कभी-कभी, बड़ा ?
कुछ अपनी खुद की 'custom.css' फ़ाइल बनाते हैं और यह ठीक है, लेकिन यदि आप 'बूटस्ट्रैप-theme.css' का उपयोग करते हैं तो बहुत सारा सामान पहले से ही निर्मित होता है और इससे आप बूटस्ट्रैप के मूल को बाधित किए बिना अपने स्वयं के विषय को तेजी से रोल कर सकते हैं। .css। मैं ज्यादातर समय 3D बटन और ग्रेडिएंट पसंद नहीं करता, इसलिए बूटस्ट्रैप-theme.css का उपयोग करके उन्हें बदल दें। मार्जिन या पैडिंग जोड़ें, त्रिज्या को अपने बटन में बदलें, और इसी तरह ...