ट्विटर बूटस्ट्रैप अनुकूलन सर्वोत्तम व्यवहार [बंद]

Question

मैं बूटस्ट्रैप के साथ काम कर रहा हूँ 2.0.3 लेस का उपयोग करते हुए। मैं इसे बड़े पैमाने पर कस्टमाइज़ करना चाहता हूं, लेकिन जब भी संभव हो पुस्तकालयों में बदलाव अक्सर हो तो मैं स्रोत में बदलाव करने से बचना चाहता हूं। मैं कम से कम नया हूँ इसलिए मुझे नहीं पता कि इसका संकलन पूरी तरह से कैसे काम करता है। LESS या LESS आधारित रूपरेखा के साथ काम करने के लिए कुछ सर्वोत्तम अभ्यास क्या हैं?

Comments

भविष्य की ओर से बधाई! बूटस्ट्रैप अनुकूलन "सर्वोत्तम प्रथाओं" SASS आधारित 3.x और 4.x में बदल गया है: stackoverflow.com/a/50410667/171456

— Zim

Answer 1

मेरा समाधान jstam के समान है, लेकिन मैं जब संभव हो तो स्रोत फ़ाइलों में परिवर्तन करने से बचता हूं। यह देखते हुए कि बूटस्ट्रैप में परिवर्तन बार-बार होगा, मैं नवीनतम स्रोतों को नीचे खींचने और अपने संशोधनों को अलग-अलग फाइलों में रखकर न्यूनतम परिवर्तन करने में सक्षम होना चाहता हूं। बेशक, यह पूरी तरह से बुलेट प्रूफ नहीं है।

1. मूल निर्देशिका के लिए bootstrap.less और variables.less की प्रतिलिपि बनाएँ। Bootstrap.less को theme.less या जो भी आप चाहते हैं उसका नाम बदलें। आपकी निर्देशिका निर्देशिका संरचना इस तरह दिखनी चाहिए:

   /Website            
        theme.less
        variables.less
        /Bootstrap
        ...

2. उप-निर्देशिका बूटस्ट्रैप को इंगित करने के लिए theme.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";

   ...

3. अपने सीएसएस ओवरराइड्स को थीम में जोड़ें। जहां वे शामिल हैं उसके तुरंत बाद फाइल।

   ...
   // 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;
   }
   
   ...

4. अपने HTML पृष्ठों में bootstrap.less के बजाय theme.less से लिंक करें।

जब भी कोई नया संस्करण सामने आता है, तो आपके परिवर्तन सुरक्षित होने चाहिए। जब भी कोई नया संस्करण सामने आता है, आपको अपने कस्टम बूटस्ट्रैप फ़ाइलों के बीच एक अंतर भी करना चाहिए। चर और आयात बदल सकते हैं।

Comments

क्या # ३ का कोई विशेष कारण है? यदि सभी आयात के बाद आपके सभी कस्टम सीएसएस नीचे दिखाई देते हैं, तो इसके बजाय प्रत्येक आयात के बाद आपस में जुड़े हुए हैं?

— एरोनल्स

@AaronLS: यह भी काम करना चाहिए। मुझे लगता है कि नंबर 3 इसे व्यवस्थित रखने के लिए है।

— जोनाटन लिटके

@joelrodgers mixins.less को सीधे संपादित क्यों नहीं किया जाना चाहिए?

— जो इसाक्सन

आपको क्या लगता है कि bootstrap.less के अंदर एक खाली चर-custom.less फ़ाइल (@import के माध्यम से) शामिल है? तब हर कोई डिफॉल्ट बूटस्ट्रैप वैरिएबल को कस्टमाइज़ कर सकेगा और इसे सुरक्षित रूप से अपडेट कर सकेगा। वैसे भी मुझे लगता है कि यह सुविधा बिल्कुल बूटस्ट्रैप में शामिल होनी चाहिए।

— adriendenat

Answer 2

यह एक ऐसी चीज है जिससे मैंने संघर्ष किया है। एक ओर मैं अपने स्वयं के रंगों और सेटिंग्स के साथ चर.विहीन फ़ाइल को अत्यधिक अनुकूलित करना चाहता हूं। दूसरी ओर, मैं बूटस्ट्रैप फ़ाइलों को अपग्रेड प्रक्रिया को आसान बनाने के लिए थोड़ा बदलना चाहता हूं।

मेरा समाधान (अभी के लिए) एक addon 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";

...

इस तरह अगर मैं बूटस्ट्रैप रंग, फोंट को रीसेट करना चाहता हूं या अतिरिक्त मिश्रणों को जोड़ सकता हूं जो मैं कर सकता हूं। मेरा कोड अलग है बाकी बूटस्ट्रैप आयात के भीतर संकलित किया जाएगा। यह सही नहीं है, लेकिन यह एक स्टॉपगैप है जो मेरे लिए अच्छी तरह से काम करता है।

Comments

अच्छा समाधान। ठीक यही मैंने कुछ बदलावों के साथ किया। मेरे उत्तर को देखो। यह एक टिप्पणी में डाल करने के लिए बहुत लंबा था।

— जोएल रोडर्स

मुझे आपका समाधान भी पसंद है, जोएल। फ्रेमवर्क के कोड के अनुसार आपके कोड का अच्छा पृथक्करण।

— jstam

चूंकि मिक्सिन्स वेरिएबल्स का संदर्भ देता है, तो क्या मुझे एक अतिरिक्त कस्टम-वैरिएबल्स की आवश्यकता होगी। ताकि मैं @baseFontSize जैसे चरों को संशोधित कर सकूं। मुझे यह जानने के लिए भी पर्याप्त नहीं है कि क्या यह फिर से उसी नाम के एक चर को घोषित करने पर मुझ पर झपटेगा।

— एरोनल्स

मैंने पाया कि यह सबसे उपयोगी समाधान है क्योंकि बूटस्ट्रैप की एक नई प्रति के अनुसार, हमें बस एक पंक्ति फिर से जोड़नी होगी bootstrap.less, हमारी अनुकूलित फ़ाइल को हथियाना VS संभावित रूप से कई पंक्तियों को बदलना अगर कोर कम फ़ाइल नाम बदलते हैं, आदि ... मैंने उपयोग किया इस समाधान, grunt का उपयोग कर मेरे minified जेएस recompiled और सभी हुड में अच्छा है! बिना किसी अनुकूल !importantकथन के काम करने वाले अनुकूलन !

— ट्विनकब

Answer 3

मेरी तरफ से, मेरे पास एक फ़ाइल है, जिसका theme.lessआयात इसके साथ boostrap.lessकिया गया है, और नीचे बस मैं ओवरराइड करता हूं (भले ही यह LESS का उपयोग करने में खराब लगता हो, लेकिन अच्छी तरह से, इसे बनाए रखना आसान है) चर मान जिसे मैं अपडेट नहीं करना चाहता हूं ।

यह चर में कस्टम मान रखने के लिए अच्छी तरह से काम करता है variables.less

उसके बाद मैं theme.lessबंद के बजाय अपनी फ़ाइल संकलित करता हूंbootstrap.less

उदाहरण theme.less:

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;  

Comments

यह 1 का तरीका है) बूटस्ट्रैप कोड की एक प्रति है जिसे 2 बार अपडेट किया जा सकता है) अपनी स्वयं की कस्टम सेटिंग्स को लागू करने में सक्षम है। फ़ोल्डर संरचना के विवरण के लिए stackoverflow.com/questions/13809895/… देखें ।

— जेरोमियन फ्रेंच

मैंने यह सुनिश्चित करने के लिए अपने कम कोड से पहले इसे डालना सुनिश्चित किया कि बूटस्ट्रैप इसे ओवरराइड नहीं कर रहा था।

— अराम कोचरन

यह मेरे लिए बहुत अच्छा काम किया। मैंने बस कोआला को theme.less पर बताया और यह हर बार जब मैं बचाता हूं तो संकलन करता हूं।

— उल्ल 3

मामले में किसी को एस.ए.एस.एस. संस्करण का उपयोग कर रहा है, के लिए बाहर देखने के डिफ़ॉल्ट!

— prasanthv

Answer 4

एक कहीं बेहतर (IMHO) दृष्टिकोण से क्यू लेने के लिए है Bootswatch GitHub बुलाया परियोजना 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 देखें।

एक बोनस के रूप में, आरईएडीएमई यह भी सुझाव देता है कि आप उस watchrमणि को स्थापित करें जो एक .lessफाइल में बदलाव होने पर स्वचालित रूप से प्रोजेक्ट का निर्माण करेगा ।

Answer 5

यदि (और केवल IF) आपके पास समय है तो आप इसे कर सकते हैं जैसा कि मैं करता हूं। मैं फ्रेमवर्क का अपना संशोधित संस्करण रखता हूं और रूपरेखा के हर अपडेट के साथ मैं डॉक्स पढ़ता हूं और संशोधनों के लिए स्रोत की जांच करता हूं।

यह समाधान पहली नज़र में कम आदर्श लग सकता है, लेकिन मेरे पास ऐसा करने के लिए मेरे कारण हैं। मैं एक के साथ काम नहीं करता हूं, लेकिन कई रूपरेखाओं, सर्वोत्तम प्रथाओं, रीसेट / सामान्यीकरण शैली की चादरें आदि का एक समामेलन करता हूं और मुझे हमेशा यकीन है कि कोई भी अद्यतन मौजूदा परियोजनाओं को किसी भी तरह से नहीं बदलेगा, जिसे मैंने नहीं देखा।

मैं निम्नलिखित कारणों से अपने स्वयं के कस्टम ढांचे के साथ काम कर रहा हूं।

1. मैं हर छोटे से स्ट्रिप करता हूं मुझे सामान मॉड्यूलर और छोटा रखने की आवश्यकता नहीं है
2. मैं क्लाइंट जॉब्स के लिए अपने ढांचे का उपयोग करता हूं और a) जानना चाहता हूं कि वास्तव में मैं क्या काम कर रहा हूं जबकि b) क्लाइंट को बेचने वाली हर चीज का मालिक हूं। मैं केवल रूपरेखाओं को कॉपी और उपयोग नहीं करता, लेकिन उन्हें समझने और पुनः बनाने की कोशिश करता हूं
3. मैं सीएमएस के साथ संयोजन में अपने ढांचे का उपयोग करता हूं और बस एक रूपरेखा को एक परियोजना में नहीं छोड़ सकता / भूल सकता हूं / खरोंच से शुरू कर सकता हूं

Comments

हां, मैं समझता हूं, लेकिन मेरे लिए चीजें इतनी तेजी से बदल रही हैं कि यह सब वेब प्रौद्योगिकी का ध्यान रखने के लिए थोड़ा भारी हो रहा है।

— जोएल रॉजर्स

जैसा कि उल्लेख किया गया है: मेरा दृष्टिकोण केवल उन लोगों के लिए है जो कई रूपरेखाओं के वर्तमान विकास पर नजर रखते हैं। मैं ऐसा इसलिए करता हूं क्योंकि मुझे विकास के शीर्ष पर रहना है और तकनीकी चुनौतियों के लिए अलग-अलग दृष्टिकोण हैं। मुझे लगता है कि यह फ्रेमवर्क डेवलपर्स के लिए बेहतर है, फिर फ्रीलांसरों कि "बस काम पूरा करना चाहते हैं"।

— सभी बिट्स बराबर

Answer 6

मैं जोएल के समान समाधान के लिए आया था:

कस्टम कम फ़ाइलें

जैसा कि ऊपर वर्णित किया गया है: मैं सभी कम फ़ाइलों के लिए स्थानीय प्रतियां बना रहा हूं जिन्हें मैं अनुकूलित कर रहा हूं: जैसे: "चर-प्रथा-प्रथा।", "अलर्ट-प्रथागत।", "बटन- custom.less"। इसलिए मैं कुछ मानकों का उपयोग कर सकता हूं और मेरे अपने जोड़ हैं। नकारात्मक पक्ष यह है: जब बूटस्ट्रैप अपडेट होगा तो यह माइग्रेट करना वास्तव में कठिन है।

लेकिन वहाँ कुछ और है:

शैलियाँ ओवरराइड करें

जब मैं काम-प्रवाह की तलाश करता हूं तो अक्सर लोगों को केवल शैलियों को ओवरराइड करने का सुझाव देता हूं। इसलिए आप मानक कम फ़ाइलों को पहले आयात करते हैं और फिर नीचे अपनी कस्टम घोषणाएँ जोड़ते हैं। यहां उल्टा है: एक नए संस्करण में अपडेट करना आसान है। नकारात्मक पक्ष यह है: संकलित सीएसएस फ़ाइल में सभी ओवरराइड शामिल हैं। कुछ CSS चयनकर्ताओं को दो बार परिभाषित किया गया है। इसलिए ब्राउज़र को यह पता लगाने के लिए कुछ उठाने की आवश्यकता है कि वास्तव में क्या लागू किया जाए। यह वास्तव में साफ नहीं है।

मैं सोच रहा हूं कि इस तरह की दोहरी घोषणाओं को हल करने के लिए प्रीप्रोसेसर पर्याप्त चतुर क्यों नहीं हैं? क्या कोई बेहतर कार्य-प्रवाह है जो मुझे याद आ रहा है?

Comments

मुझे लगता है कि आप बिंदु हैं, लेकिन आप हमेशा ऑनलाइन या स्थानीय रूप से सीएसएस सफाई उपयोगिता चला सकते हैं। यहां उनकी एक सूची दी गई है: stackoverflow.com/questions/135657/… आप शायद किसी भी उत्पाद में चलने वाले कम संकलक को नहीं चाहते हैं।

— 1942 में जोएल रोडर्स

उत्तर के लिए thx, धूल-मुझे उपकरण हैं कि पता नहीं था। अच्छा, मैं इसे खोदूँगा। वास्तव में मैं स्थानीय स्तर पर वैसे भी कम संकलक (कोडकिट) का उपयोग करता हूं। सीएसएस को दो बार संकलित नहीं करना चाहते हैं।

— फ्रैंक ल्मेर

Answer 7

बस @import "../../styles.less";बूटस्ट्रैप जोड़ें (या जहां भी आपकी स्टाइलशीट है) नीचे की ओर बूटस्ट्रैप करें। यह आपको बूटस्ट्रैप मिश्रणों का उपयोग करने की अनुमति देता है जैसे कि .gradientया .border-radiusअपनी खुद की शैलियों के अंदर।