बूटस्ट्रैप सीएसएस टेम्पलेट को अनुकूलित करना

108

मैं अभी ट्विटर से बूटस्ट्रैप के साथ शुरुआत कर रहा हूं और सोच रहा हूं कि अनुकूलन के लिए 'सर्वोत्तम अभ्यास' क्या है। मैं एक ऐसी प्रणाली विकसित करना चाहता हूं जो एक सीएसएस टेम्पलेट (बूटस्ट्रैप या अन्य) की सभी शक्ति का लाभ उठाएगा, पूरी तरह से (और आसानी से) परिवर्तनीय हो, टिकाऊ हो (यानी - जब बूटस्ट्रैप का अगला संस्करण ट्विटर से जारी होता है, तो मैं डॉन ' t को शुरू करना है।

उदाहरण के लिए, मैं पृष्ठभूमि चित्रों को शीर्ष नेविगेशन में जोड़ना चाहता हूं। ऐसा लगता है कि इस बारे में जाने के 3 तरीके हैं:

बूटस्ट्रैप.css में .topbar कक्षाओं को संशोधित करें। मुझे यह विशेष रूप से पसंद नहीं है क्योंकि मेरे पास बहुत सारे .topbar आइटम होंगे और मैं जरूरी नहीं कि उन सभी को उसी तरह से संशोधित करूं।
मेरी पृष्ठभूमि छवियों के साथ नई कक्षाएं बनाएं और दोनों शैलियों (मेरे तत्व के लिए नया और बूटस्ट्रैप) को लागू करें। यह शैली के टकराव पैदा कर सकता है, जो कि .topbar वर्ग को अलग-अलग वर्गों में छीनने से बचा जा सकता है और फिर केवल उन टुकड़ों का उपयोग करके जो मेरे कस्टम वर्ग द्वारा कदम नहीं उठाए जाते हैं। फिर से इसके लिए अधिक काम करने की आवश्यकता है जितना मुझे लगता है कि यह आवश्यक होना चाहिए और जब यह लचीला हो, तो यह मुझे बूटस्ट्रैप को अपडेट करने की अनुमति नहीं देगा। जब ट्विटर अगली किस्त जारी करता है।
अनुकूलन प्राप्त करने के लिए .LESS में चर का उपयोग करें। ऑफहैंड यह एक अच्छे दृष्टिकोण की तरह लगता है, लेकिन इसका उपयोग नहीं किया जाता है। मुझे लगता है कि ग्राहक पर सीएसएस संकलन और कोड स्थिरता के बारे में चिंता है।

हालांकि मैं बूटस्ट्रैप का उपयोग कर रहा हूं, लेकिन यह प्रश्न किसी भी सीएसएस टेम्पलेट के लिए सामान्यीकृत किया जा सकता है।

इनपुट के लिए अग्रिम धन्यवाद।

css twitter-bootstrap bootswatch

— ऐनी
स्रोत

हाय @Pabluez, हाँ आपने उत्तर दिया, नीचे देखें। जवाब में देरी के लिए क्षमा करें - मैं व्यस्त व्यस्त रहा हूँ।

— ऐनी

मेरा मानना है कि यह लेख आपको गर्वपर्वात

— blog

1

यह थ्रेड जानकारीपूर्ण है stackoverflow.com/questions/10451317/…

— Zim

127

सबसे अच्छी बात है।

स्थानीय रूप से जीथब और क्लोन से 1. कांटा ट्विटर-बूटस्ट्रैप।

वे वास्तव में जल्दी से पुस्तकालय / रूपरेखा बदल रहे हैं (वे आंतरिक रूप से विचलन करते हैं। कुछ पुस्तकालय पसंद करते हैं, मैं कहूंगा कि यह एक रूपरेखा है, क्योंकि जब आप इसे अपने पृष्ठ पर लोड करते हैं, तो अपना लेआउट बदलें)। खैर ... फोर्किंग / क्लोनिंग आपको नए आने वाले संस्करणों को आसानी से लाने देगा।

2. bootstrap.css फ़ाइल को संशोधित न करें

जब आप बूटस्ट्रैप को अपग्रेड करना चाहते हैं (और आपको इसे करने की आवश्यकता होगी) यह आपके जीवन को जटिल बनाने वाला है।

3. जब भी आप मूल बूटस्ट्रैप सामान चाहते हैं, तो अपनी स्वयं की सीएसएस फ़ाइल बनाएं और अधिलेखित करें

यदि वे के साथ एक topbar सेट करते हैं, तो कहते हैं, color: black;लेकिन आप इसे सफेद कर देते हैं, इस topbar के लिए एक नया बहुत विशिष्ट चयनकर्ता बनाएं और इस नियम का उपयोग विशिष्ट topbar पर करें। उदाहरण के लिए एक तालिका के लिए, यह होगा <table class="zebra-striped mycustomclass">। यदि आप अपनी css फ़ाइल की घोषणा करते हैं bootstrap.css, तो यह जो कुछ भी आप चाहते हैं उसे अधिलेखित कर देगा।

— Pabluez
स्रोत

15

+1 अच्छा जवाब। बस उसके तीसरे बिंदु पर जोड़ने के लिए: आप या तो पुरानी कक्षा के अलावा आवेदन करने के लिए एक नया वर्ग बना सकते हैं, या केवल उन गुणों को अधिलेखित / जोड़ सकते हैं जिन्हें आप बदलना चाहते हैं।

— Wex

यही कारण है कि मैं mycustomcss के साथ क्या मतलब था ... मैं इसे mycustomclass को संपादित करने वाला हूं, इसके अलावा ज़ेबरा-धारीदार (बूटस्ट्रैप-क्लास)

— पबल्यूज़

1

क्या कोई ऐसी चीज है जिससे आप इसे जोड़ सकते हैं कि यह "नया" कम / कैसे करें? यानी: आप एक "बूटस्ट्रैप" शैली को कैसे उपवर्गित कर सकते हैं? सभी वंश वृद्धि। मैं अभी तक मेरे सिर के आसपास है कि क्या यह एक मिश्रण है, और विस्तार, या एक ?? माफ़ करना

— एलेक्स ग्रे

1

+ 1 उत्तर के लिए धन्यवाद। मैं यह कर रहा हूं, और यह काम करता है लेकिन यह सबसे स्थायी उत्तर की तरह महसूस नहीं करता है। यदि मुझे एक अद्यतन बूटस्ट्रैप.css फ़ाइल मिलती है, तो मुझे किसी भी परिवर्तन के लिए अपने कस्टम ओवरराइड वर्गों को बदलना पड़ सकता है। @Alexgray की तरह, मैं इसे कम या मिश्रण के साथ करने का एक तरीका समझना चाहूंगा। या, बिना बूटस्ट्रैप लागू किए सैंडबॉक्स बनाने का एक बेहतर तरीका भी है ताकि मैं बूटस्ट्रैप को ओवरराइड किए बिना अपनी शैलियों का उपयोग कर सकूं। अगर किसी के पास कोई अच्छा ट्यूटोरियल है, तो उसे पास करें

— ऐनी

2

यदि आप केवल अपनी सीएसएस फ़ाइल में परिवर्तन जोड़ने जा रहे हैं, तो बूटस्ट्रैप के लिए क्या करना है?

31

अपडेट 2019 - बूटस्ट्रैप 4

मैं 4.x के लिए इस बूटस्ट्रैप कस्टमाइज़ेशन प्रश्न पर दोबारा गौर कर रहा हूं, जो अब LESS के बजाय SASS का उपयोग करता है । सामान्य तौर पर, बूटस्ट्रैप को अनुकूलित करने के 2 तरीके हैं ...

1. सरल सीएसएस ओवरराइड

कस्टमाइज़ करने का एक तरीका बस बूटस्ट्रैप सीएसएस को ओवरराइड करने के लिए सीएसएस का उपयोग करना है। स्थिरता के लिए, सीएसएस अनुकूलन को एक अलग custom.cssफ़ाइल में रखा जाता है , ताकि bootstrap.cssअनमॉडिफाइड रहे। के संदर्भ में custom.cssइस प्रकार के बादbootstrap.css काम करने के लिए ओवरराइड के लिए ...

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

कस्टम सीएसएस में जो भी परिवर्तन आवश्यक हैं, बस जोड़ें। उदाहरण के लिए...

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

पहले ( bootstrap.css)

बाद ( custom.css) के साथ

अनुकूलन करते समय, आपको सीएसएस विशिष्टता को समझना चाहिए । के custom.cssरूप में के रूप में विशिष्ट हैं कि चयनकर्ताओं का उपयोग करने की आवश्यकता में ओवरराइड करता है bootstrap.css।

ध्यान दें !importantकि कस्टम CSS में उपयोग करने की कोई आवश्यकता नहीं है , जब तक कि आप बूटस्ट्रैप उपयोगिता वर्गों में से किसी एक को ओवरराइड नहीं कर रहे हैं । सीएसएस विशिष्टता हमेशा एक सीएसएस वर्ग के लिए दूसरे को ओवरराइड करने के लिए काम करती है।

2. SASS का उपयोग कर कस्टमाइज़ करें

यदि आप SASS से परिचित हैं (और आपको इस विधि का उपयोग करना चाहिए), तो आप अपने साथ बूटस्ट्रैप को अनुकूलित कर सकते हैं custom.scss। बूटस्ट्रैप डॉक्स में एक खंड है जो इसे समझाता है, हालांकि डॉक्स यह नहीं समझाता है कि आपके मौजूदा चर का उपयोग कैसे किया जाए custom.scss। उदाहरण के लिए, चलिए बॉडी बैकग्राउंड-कलर को बदलते हैं#eeeeee और बूटस्ट्रैप के वैरिएबल में ब्लू रेफेरुअल कलर को बदलते / बदलते हैं ...primary$purple

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

यह नई कस्टम कक्षाएं बनाने के लिए भी काम करता है । उदाहरण के लिए, यहाँ मैं जोड़ने के purpleजो बनाता विषय रंग के सभी के लिए सीएसएस btn-purple, text-purple, bg-purple, alert-purple, आदि ...

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

https://www.codeply.com/go/7XonykXFvP

SASS के साथ आपको उन्हें काम करने के लिए अनुकूलन के बाद @import बूटस्ट्रैप करना होगा ! एक बार SASS को CSS में संकलित किया जाता है ( इसे SASS कंपाइलर नोड-एसएएस, गल्प-एसएएस, एनपीएम वेबपैक आदि का उपयोग करके किया जाना चाहिए ), परिणामस्वरूप सीएसएस अनुकूलित बूटस्ट्रैप है। यदि आप SASS से परिचित नहीं हैं, तो आप बूटस्ट्रैप को इस थीम बिल्डर जैसे कि मैंने बनाया का उपयोग करके अनुकूलित कर सकते हैं ।

कस्टम बूटस्ट्रैप डेमो (SASS)

नोट: 3.x के विपरीत, बूटस्ट्रैप 4.x एक आधिकारिक कस्टमाइज़र उपकरण प्रदान नहीं करता है। हालाँकि, आप ग्रिड को केवल सीएसएस डाउनलोड कर सकते हैं या बूटस्ट्रैप 4 सीएसएस को फिर से बनाने के लिए एक और 4.x कस्टम बिल्ड टूल का उपयोग कर सकते हैं ।

संबंधित:
SASS के साथ बूटस्ट्रैप 4 को कैसे विस्तारित / संशोधित (अनुकूलित)
करें बूटस्ट्रैप प्राथमिक रंग कैसे बदलें?
बूटस्ट्रैप को कस्टमाइज़ करने के लिए बूटस्ट्रैप 4 में रंग शैलियों का नया सेट कैसे बनाएं

— Zim
स्रोत

Noice - पृष्ठभूमि, सीमा, नए कस्टम बटन के लिए फ़ॉन्ट के लिए एक कस्टम रंग सेट करने के बारे में कैसे?

— Digout

क्या यह सामान्य है कि उत्पन्न सीएसएस फ़ाइल लगभग 160 Kb (संकुचित 130Kb) है? उदाहरण के लिए, क्या प्राथमिक रंग को ओवरराइड करना संभव है?

— इवगेनी

@Zim मैं आपके द्वारा बनाई गई थीम बिल्डर की सराहना करता हूं!

— करीम जिरौदी

नोट: संकलन के बाद ऑटोप्रिफ़िशर का उपयोग करना याद रखें

— kanlukasz

20

मुझे लगता है कि आधिकारिक तौर पर पसंदीदा तरीका अब कम का उपयोग करना है, और या तो बूटस्ट्रैप .css (कम। Js का उपयोग करके), या recompile bootstrap.css (नोड या कम संकलक का उपयोग करके) को ओवरराइड करें।

से बूटस्ट्रैप डॉक्स , यहाँ कैसे गतिशील bootstrap.css शैलियों को ओवरराइड करने के लिए:

नवीनतम Less.js डाउनलोड करें और इसमें (और बूटस्ट्रैप) पथ को शामिल करें <head>।
 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>
.Less फ़ाइलों को फिर से जोड़ने के लिए, बस उन्हें सहेजें और अपना पृष्ठ पुनः लोड करें। Less.js उन्हें संकलित करता है और उन्हें स्थानीय भंडारण में संग्रहीत करता है।

या यदि आप अपने कस्टम शैलियों (उत्पादन वातावरण के लिए) के साथ एक नए बूटस्ट्रैप को संकलित करना पसंद करते हैं:

नोड कमांड लाइन टूल को नोड के माध्यम से स्थापित करें और निम्न कमांड चलाएं:
$ lessc ./less/bootstrap.less > bootstrap.css

— सममित
स्रोत

यह पसंदीदा तरीका है :)

— श्रीवत्स

10

दिसंबर में पबल्यूज़ के जवाब के बाद से, अब बूटस्ट्रैप को अनुकूलित करने का एक बेहतर तरीका है।

का प्रयोग करें: अपने बूटस्ट्रैप. css उत्पन्न करने के लिए बूटस्वाच

बूटस्वाच नवीनतम संस्करण से सामान्य ट्विटर बूटस्ट्रैप का निर्माण करता है (जो भी आप बूटस्ट्रैप निर्देशिका में स्थापित करते हैं), लेकिन इसके अनुकूलन को भी आयात करता है। कस्टम सीएसएस को बनाए रखते हुए, अपने HTML के बारे में कुछ भी बदलने के बिना बूटस्ट्रैप के नवीनतम संस्करण का उपयोग करना आसान बनाता है। आप बस filesrap.css बोलबाला बोलबाला कर सकते हैं।

— mdashx
स्रोत

क्या आप इसका उपयोग करने के लिए सर्वोत्तम तरीके से विस्तृत कर सकते हैं। मैंने बूटस्वाच डाउनलोड किया और ग्रन्ट स्वैच: थीम का उपयोग करके अपनी सीएसएस का निर्माण किया लेकिन मैं अभी भी हैरान हूँ कि मुझे कौन सी फाइलें कहाँ रखनी चाहिए। मैं एक ऐसी स्थिति में जाने की कोशिश कर रहा हूं, जहां मैं बूटस्ट्रैप या बूटवॉच थीम का एक अद्यतन संस्करण डाउनलोड कर सकता हूं और इसका उपयोग कर सकता हूं, लेकिन फिर भी अपने अनुकूलित चर का उपयोग कर सकता हूं। (मैं VisualStudio2013 प्रो में काम कर रहा हूँ अगर यह एक फर्क पड़ता है)। मैं संकलन करने के लिए जावास्क्रिप्ट का उपयोग नहीं करना चाहता। अभी के लिए, मैं बिल्ड कमांड चलाने के साथ ठीक हूं। बाद में, मैं कोशिश करूँगा और स्वचालित करने के लिए एक अच्छा तरीका ढूंढूँगा। धन्यवाद मार्क

— mark1234

5

आप बूटस्ट्रैप टेम्पलेट का उपयोग कर सकते हैं

http://www.initializr.com/

जिसमें सभी बूटस्ट्रैप। रहित फाइलें शामिल हैं। फिर आप चर को बदल सकते हैं / कम फ़ाइलों को अपडेट कर सकते हैं जैसा आप चाहते हैं और यह स्वचालित रूप से सीएसएस को संकलित करेगा। जब तैनात कम फ़ाइल css के लिए संकलित करें।

— टॉम
स्रोत

3

मेरी राय में सबसे अच्छा विकल्प एक कस्टम LESS फाइल को संकलित करना है जिसमें bootstrap.less, एक कस्टम वैरिएबल्स। फाइल और अपने स्वयं के नियम शामिल हैं:

आपके रूट फ़ोल्डर में क्लोन बूटस्ट्रैप: git clone https://github.com/twbs/bootstrap.git
इसे "बूटस्ट्रैप" नाम दें
एक पैकेज बनाएँ। json फ़ाइल: https://gist.github.com/jide/8440609
एक Gruntfile.js बनाएँ: https://gist.github.com/jide/8440502
एक "कम" फ़ोल्डर बनाएँ
बूटस्ट्रैप / कम / चर "कम" फ़ोल्डर में कॉपी करें
फ़ॉन्ट पथ बदलें: @icon-font-path: "../bootstrap/fonts/";
"कम" फ़ोल्डर में एक कस्टम स्टाइल.लेस फ़ाइल बनाएँ, जो बूटस्ट्रैप और आपके कस्टम चर को आयात करती है। बिना फ़ाइल: https://gist.github.com/jide/8440619
Daud npm install
Daud grunt watch

अब आप अपनी इच्छानुसार चर को संशोधित कर सकते हैं, अपनी कस्टम शैली में बिना बूटस्ट्रैप नियमों को ओवरराइड कर सकते हैं। और यदि किसी दिन आप बूटस्ट्रैप को अद्यतन करना चाहते हैं, तो आप पूरे बूटस्ट्रैप फ़ोल्डर को बदल सकते हैं!

EDIT: मैंने इस तकनीक का उपयोग करके एक बूटस्ट्रैप बॉयलरप्लेट बनाया: https://github.com/jide/bootstrap-boilerplate

— jide
स्रोत

3

मैंने हाल ही में एक पोस्ट लिखा है कि मैं पिछले दो वर्षों से इसे उडेसिटी में कैसे कर रहा हूं । इस पद्धति का मतलब है कि हम बूटस्ट्रैप को अद्यतन करने में सक्षम हैं, जब भी हम बिना मर्ज के संघर्ष, काम को बाहर फेंकना आदि चाहते थे।

उदाहरण के साथ पोस्ट अधिक गहराई में जाती है, लेकिन मूल विचार यह है:

बूटस्ट्रैप की एक प्राचीन प्रतिलिपि रखें और इसे बाहरी रूप से अधिलेखित करें।
अपने खुद के चर को शामिल करने के लिए एक फ़ाइल (बूटस्ट्रैप के variables.less) को संशोधित करें।
अपनी साइट फ़ाइल @include bootstrap.less बनाएं और फिर अपने ओवरराइड करें।

इसका मतलब यह है कि LESS का उपयोग करना, और क्लाइंट को शिपिंग करने से पहले इसे CSS पर संकलित करना (क्लाइंट-साइड LESS अगर फ़िंक हो, और मैं आमतौर पर इससे बचता हूं), लेकिन यह स्थिरता / उन्नयन के लिए अच्छा है, और कम संकलन प्राप्त करना वास्तव में बहुत आसान है । लिंक किए गए गितुब कोड में ग्रंट का उपयोग करके एक उदाहरण है, लेकिन इसे प्राप्त करने के कई तरीके हैं - यहां तक कि GUI यदि आपकी चीज है।

इस समाधान का उपयोग करते हुए, आपके उदाहरण की समस्या दिखेगी:

अपने वैरिएबल्स में @ navbar-inverse-bg (बूटस्ट्रैप नहीं) के साथ नेव बार कलर बदलें
अपने बूटस्ट्रैप_ओवरडाइड्स पर अपनी खुद की नौसेना बार शैलियों को जोड़ें। आपको जो भी जाना चाहिए, उसे ओवरराइट करना।
ख़ुशी।

जब आपके बूटस्ट्रैप को अपग्रेड करने का समय आता है, तो आप बस प्राचीन बूटस्ट्रैप कॉपी को स्वैप करते हैं और सब कुछ अभी भी काम करेगा (यदि बूटस्ट्रैप ब्रेकिंग परिवर्तन करता है, तो आपको अपने ओवरराइड को अपडेट करने की आवश्यकता होगी, लेकिन आपको वैसे भी करना होगा)

वॉक-थ्रू के साथ ब्लॉग पोस्ट यहाँ है ।

जीथब पर कोड उदाहरण यहाँ है ।

— betaorbust
स्रोत

0

बूटस्ट्रैप के साथ LESS का उपयोग करें ...

LESS का उपयोग कैसे करें, इसके लिए यहां बूटस्ट्रैप डॉक्स हैं

(वे पिछले उत्तर से चले गए हैं)

— Twelve24
स्रोत

3

यदि दस्तावेज़ चले गए हैं, तो यह दर्शाने के लिए अन्य उत्तरों को संपादित करें कि

— डेडचेक्स

विडंबना यह है कि इस उत्तर में लिंक मृत है।

— zacharydl