मैं कम से कम बूटस्ट्रैप 2.0.3 के साथ काम कर रहा हूं। मैं इसे बड़े पैमाने पर अनुकूलित करना चाहता हूं, लेकिन जब भी संभव हो, मैं पुस्तकालयों में परिवर्तन के रूप में स्रोत में परिवर्तन करने से बचना चाहता हूं। मैं कम से कम नया हूं इसलिए मुझे नहीं पता कि इसका संकलन पूरी तरह से कैसे काम करता है। कम या कम आधारित ढांचे के साथ काम करने के लिए कुछ सर्वोत्तम अभ्यास क्या हैं?ट्विटर बूटस्ट्रैप अनुकूलन सर्वोत्तम अभ्यास
यह कुछ है जिसके साथ मैंने भी संघर्ष किया है। एक तरफ मैं अपने खुद के रंगों और सेटिंग्स के साथ variables.less फ़ाइल को अत्यधिक अनुकूलित करना चाहता हूं। दूसरी ओर, मैं अपग्रेड प्रक्रिया को कम करने के लिए बूटस्ट्रैप फ़ाइलों को जितना संभव हो सके बदलना चाहता हूं।
मेरा समाधान (अभी के लिए) एक एडन कम फ़ाइल बनाने और चर और मिश्रणों के आयात के बाद bootstrap.less फ़ाइल में डालना है। तो इस तरह कुछ:
...
// CSS Reset
@import "reset.less";
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon
// Grid system and page structure
@import "scaffolding.less";
...
इस तरह अगर मैं बूटस्ट्रैप रंग, फोंट को रीसेट करना चाहता हूं या अतिरिक्त मिश्रण जोड़ सकता हूं। मेरा कोड अलग है फिर भी बूटस्ट्रैप आयात के बाकी हिस्सों में संकलित किया जाएगा। यह सही नहीं है, लेकिन यह एक स्टॉपगैप है जो मेरे लिए अच्छा काम करता है।
मेरा समाधान समान jstam है, लेकिन जब संभव हो तो मैं स्रोत फ़ाइलों में परिवर्तन करने से बचता हूं। यह देखते हुए कि बूटस्ट्रैप में परिवर्तन अक्सर होंगे, मैं नवीनतम स्रोत को नीचे खींचने और अलग-अलग फ़ाइलों में अपने संशोधन को रखकर न्यूनतम परिवर्तन करने में सक्षम होना चाहता हूं। बेशक, यह पूरी तरह बुलेट प्रमाण नहीं है।
मूल निर्देशिका में bootstrap.less और variables.less की प्रतिलिपि बनाएँ। Bootstrap.less को थीम.लेस या जो कुछ भी आप चाहते हैं उसका नाम बदलें। आपका निर्देशिका निर्देशिका संरचना इस तरह दिखना चाहिए:
/Website
theme.less
variables.less
/Bootstrap
...
अद्यतन theme.less में सभी संदर्भों को उप-निर्देशिका bootstrap को इंगित करने के लिए। सुनिश्चित करें कि आपका variables.less नहीं बूटस्ट्रैप निर्देशिका तो जैसे माता पिता से जिक्र किया गया और किया गया है:
...
// CSS Reset
@import "bootstrap/reset.less";
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins.less";
// Grid system and page structure
@import "bootstrap/scaffolding.less";
@import "bootstrap/grid.less";
@import "bootstrap/layouts.less";
...
तुरंत बाद जहां वे शामिल किए गए हैं theme.less फ़ाइल में अपने सीएसएस ओवरराइड जोड़ें ।
...
// Components: Nav
@import "bootstrap/navs.less";
@import "bootstrap/navbar.less";
// overrides
.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
border-radius: 0 0 0 0;
padding: 10px;
}
.nav-tabs, .nav-pills {
text-transform: uppercase;
}
.navbar .nav > li > a {
text-shadow: none;
}
...
लिंक अपने HTML पृष्ठों में bootstrap.less के बजाय theme.less करने के लिए।
जब भी कोई नया संस्करण निकलता है, तो आपके परिवर्तन सुरक्षित होना चाहिए। जब भी कोई नया संस्करण आता है तो आपको अपनी कस्टम बूटस्ट्रैप फ़ाइलों के बीच एक अंतर भी करना चाहिए। चर और आयात बदल सकते हैं।
क्या # 3 के लिए कोई विशिष्ट कारण है? क्या होता है यदि प्रत्येक आयात के बाद आपके सभी कस्टम सीएसएस नीचे आयात पर आते हैं, तो प्रत्येक आयात के बाद अंतःस्थापित होने की बजाय? – AaronLS
@AaronLS: यह भी काम करना चाहिए। मुझे लगता है कि इसे व्यवस्थित रखने के लिए नंबर 3 है। –
@joelrodgers क्यों mixins.less सीधे संपादित नहीं किया जाना चाहिए? –
यदि (और केवल अगर) आपके पास ऐसा समय है जो आप कर सकते हैं जैसा मैं करता हूं। मैं ढांचे के अपने संशोधित संस्करण को रखता हूं और ढांचे के हर अद्यतन के साथ मैंने दस्तावेज़ पढ़े और संशोधनों के लिए स्रोत की जांच की।
यह समाधान पहले दिखने पर कम आदर्श लग सकता है लेकिन मेरे पास ऐसा करने के मेरे कारण हैं। मैं एक के साथ काम नहीं करता लेकिन कई ढांचे, सर्वोत्तम प्रथाओं, रीसेट/सामान्यीकरण स्टाइल शीट इत्यादि का एक मिश्रण हूं और मुझे हमेशा यकीन है कि मौजूदा परियोजनाओं को किसी भी तरह से अपडेट नहीं किया जाएगा, जिस तरह से मैं नहीं देख रहा था।
मैं निम्नलिखित कारणों से अपने स्वयं के कस्टम ढांचे पर काम कर रहा हूं।
हाँ, मैं समझता हूं, लेकिन मेरे लिए चीजें इतनी तेजी से बदल रही हैं कि यह सभी वेब तकनीक ट्रैक रखने के लिए थोड़ा जबरदस्त हो रही है। –
जैसा कि बताया गया है: मेरा दृष्टिकोण केवल उन लोगों के लिए है जो कई ढांचे के वर्तमान विकास पर टैब रखते हैं। मैं ऐसा इसलिए करता हूं क्योंकि मुझे तकनीकी चुनौतियों के विकास और विभिन्न दृष्टिकोणों के शीर्ष पर रहना है। मुझे लगता है कि यह फ्रेमवर्क डेवलपर्स के लिए बेहतर अनुकूल है, फिर फ्रीलांसर जो सिर्फ "काम पूरा करना चाहते हैं"। – KADlancer
मैं जोएल के रूप में ही समाधान के लिए आया था:
कस्टम कम फ़ाइलें
वैसे ही जैसे कि ऊपर वर्णित है: जैसे:: मैं सब कम फ़ाइलें मैं अनुरूपण कर रहा हूँ के लिए स्थानीय प्रतिलिपि बनाने "चर-custom.less" , "अलर्ट-कस्टम.लेस", "बटन-कस्टम.लेस"। तो मैं कुछ मानकों का उपयोग कर सकता हूं और अपने स्वयं के जोड़ों का उपयोग कर सकता हूं। नकारात्मकता यह है: जब बूटस्ट्रैप अपडेट हो जाएगा तो माइग्रेट करना वाकई मुश्किल है।
लेकिन वहाँ कुछ और है:
अवहेलना शैलियाँ
जब काम-प्रवाह मैं अक्सर लोग बस शैलियों को ओवरराइड करने का सुझाव दे देखने के लिए चारों ओर देख। तो आप मानक मानक फ़ाइलों को पहले आयात करते हैं और फिर नीचे अपनी कस्टम घोषणाएं जोड़ें। यहां उल्टा है: एक नए संस्करण में अपडेट करना आसान है। नकारात्मकता यह है: संकलित सीएसएस फ़ाइल में सभी ओवरराइड शामिल हैं। कुछ सीएसएस चयनकर्ताओं को दो बार परिभाषित किया जाता है। इसलिए ब्राउजर को वास्तव में आवेदन करने के लिए कुछ उठाने की जरूरत है। यह वास्तव में साफ नहीं है।
मुझे आश्चर्य है कि क्यों प्रीप्रोसेसर इतनी डबल घोषणाओं को हल करने के लिए पर्याप्त चालाक नहीं हैं? क्या कोई बेहतर काम-प्रवाह है, क्या मैं यहां याद कर रहा हूं?
मुझे लगता है कि आप बिंदु हैं, लेकिन आप हमेशा ऑनलाइन या स्थानीय रूप से एक सीएसएस सफाई उपयोगिता चला सकते हैं। यहां उनकी एक सूची दी गई है: http://stackoverflow.com/questions/135657/tool-to-identify-unused-css-definitions शायद आप उत्पाद में चलने वाले कम संकलक को नहीं चाहते हैं। उत्तर के लिए –
thx, यह नहीं पता था कि धूल-उपकरण हैं। अच्छा, मैं इसमें खोदूँगा। असल में मैं स्थानीय रूप से कम संकलक (कोडकिट) का उपयोग करता हूं। दो बार सीएसएस संकलित नहीं करना चाहते हैं। –
मेरी तरफ से, मेरे पास के आयात के साथ theme.less नाम की एक फ़ाइल है, और इसके नीचे मैं ओवरराइड करता हूं (भले ही यह कम से कम बुरा लगता है, लेकिन अच्छी तरह से, इसे बनाए रखना आसान है) चर मूल्य मैं अपडेट नहीं करना चाहता।
यह variables.less
में चर के लिए कस्टम मानों होने उसके बाद के लिए अच्छी तरह से काम करता है मैं बजाय बंद bootstrap.less
उदाहरण theme.less मेरी theme.less फ़ाइल संकलन:
@import "path/to/my/bootstrap.less";
@linkColor: #MyAwesomeColor;
यह तरीका है 1) बूटस्ट्रैप कोड की एक प्रति है जिसे अभी भी वांछित पर अपडेट किया जा सकता है 2) अपनी खुद की कस्टम सेटिंग्स को लागू करने में सक्षम होना। फ़ोल्डर संरचना पर विवरण के लिए http://stackoverflow.com/questions/13809895/how-can-i-ustomize-twitter-bootstraps-css-using-lesscss-variables देखें। –
मैंने यह सुनिश्चित करने के लिए बूटस्ट्रैप को ओवरराइड नहीं किया था, यह सुनिश्चित करने के लिए * अपने * कम * कोड से पहले यह सुनिश्चित करना सुनिश्चित किया था। –
यह मेरे लिए बहुत अच्छा काम करता है। मैंने सिर्फ थीम पर कोआला की ओर इशारा किया। और जब भी मैं बचाता हूं, यह संकलित करता है। – ow3n
एक कहीं बेहतर (IMHO) दृष्टिकोण Bootswatch गीथब परियोजना से swatchmaker नामक क्यू लेना है। यह परियोजना वेबसाइट पर बूटस्ट्रैप विषयों के दर्जनों के निर्माण और प्रबंधन के लिए विशेष रूप से तैयार की गई है।
Makefile प्रोजेक्ट में swatchmaker.less बनाता है (आप इसे customizations.less जैसे कुछ नाम दे सकते हैं)।
@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";
आप swatch फ़ोल्डर और जो कुछ भी आप उचित लगता है bootswatch.less फ़ाइलों का नाम कर सकते हैं: इस फ़ाइल में आयात का एक गुच्छा होता है।
यह समझ में आता है क्योंकि आप बूटस्ट्रैप को अपनी फ़ाइलों को प्रभावित किए बिना अपग्रेड कर सकते हैं। वास्तव में, Makefile में बूटस्ट्रैप के नवीनतम संस्करण को लाने के लिए कमांड भी शामिल हैं। अधिक के लिए प्रोजेक्ट पेज पर README देखें।
एक बोनस के रूप में, README भी पता चलता है कि आप watchr मणि जो स्वचालित रूप से परियोजना जब एक .less फ़ाइल परिवर्तन का निर्माण करेगा स्थापित करें।
नीचे @import "../../styles.less"; (या जहां भी आपकी स्टाइलशीट है) बूटस्ट्रैप पर नीचे जोड़ें। यह आपको अपनी खुद की शैलियों के अंदर .gradient या .border-radius जैसे बूटस्ट्रैप मिश्रणों का उपयोग करने की अनुमति देता है।
अच्छा समाधान। यह वही है जो मैंने कुछ बदलावों के साथ किया था। मेरा जवाब देखो। एक टिप्पणी में रखना बहुत लंबा था। –
मुझे आपके समाधान को भी पसंद है, जोएल। ढांचे के कोड बनाम अपने कोड का अच्छा अलगाव। – jstam
चूंकि मिश्रित संदर्भ चर के संदर्भ में, क्या मुझे एक अतिरिक्त कस्टम-चर की आवश्यकता होगी। चर के बीच .less और mixins.less आयात? ताकि मैं @baseFontSize जैसे चर को संशोधित कर सकूं। मुझे यह जानने के लिए भी पर्याप्त जानकारी नहीं है कि क्या यह मेरे ऊपर एक ही नाम के चर को घोषित करेगा। – AaronLS