बूटस्ट्रैप 3 से केवल उत्तरदायी ग्रिड कैसे प्राप्त करें?


109

मुझे ट्विटर बूटस्ट्रैप का उपयोग करते हुए अपने वेब एप्लिकेशन में उत्तरदायी डिज़ाइन सुविधाओं को जोड़ना होगा। मैं बस उत्तरदायी व्यवहार चाहता हूं, मुझे टाइपोग्राफी, घटकों या बूटस्ट्रैप में शामिल किसी अन्य सामान में कोई दिलचस्पी नहीं है।

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

जवाबों:


159

Http://getbootstrap.com/customize/ पर जाएं और बीएस 3 फ्रेमवर्क से जो चाहें, उसे टॉगल करें और फिर "कंपाइल एंड डाउनलोड" पर क्लिक करें और आपको सीएसएस और जेएस मिलेगा जो आपने चुना था।

बूटस्ट्रैप कस्टमाइज़र

CSS को खोलें और सभी लेकिन ग्रिड को हटा दें। उनमें कुछ सामान्य सामान भी शामिल हैं। और आपको अपनी साइट की सभी शैलियों को बॉक्स-साइज़िंग में समायोजित करने की आवश्यकता होगी: बॉर्डर-बॉक्स - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp


धन्यवाद क्रिस्टीना। मैं उम्मीद कर रहा था कि ग्रिड शैलियों को प्राप्त करने का एक तरीका था।
मैनुअल ज़ापटा

8
नहीं, वे सहायक सामग्री को भी डाउनलोड करते हैं, सामान्य करते हैं और स्कैफ़ल्डिंग। रहित (जिसमें वैश्विक बॉर्डर-बॉक्स होता है) जिसमें आपको उन सभी चीजों को समायोजित करने की आवश्यकता होती है जिनमें पैडिंग होती है। जैसे कि पहले आपके बॉक्स में 10px की पैडिंग थी और कुल 200px था, लेकिन अंदर 180px था, इसलिए आपको चौड़ाई को 180px पर सेट करना था, अब आप चौड़ाई को 200px या कुछ नहीं और इसे ग्रिड कॉलम क्लास में चिपकाएँ।
क्रिस्टीना

box-sizingरीसेट जानकारी: css-tricks.com/... और paulirish.com/2012/box-sizing-border-box-ftw
कोस्टा

अभी भी है कि normalize.css
rab

@rab - इसका उत्तर में उल्लेख किया गया है। यदि आप चाहें तो इसे हटा दें, लेकिन यह उपयोगी है।
क्रिस्टीना

17

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



4

केवल बूटस्ट्रैप 3.3.5 ग्रिड के साथ ग्रन्ट बिल्ड बनाया गया:

https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid

~ 10KB न्यूनतम

यदि आपको बूटस्ट्रैप से कुछ अन्य भागों की आवश्यकता है, तो बस उन्हें /src/less/bootstrap.less में शामिल करें।


1

मैं इसके बजाय MDO के http://getpreboot.com/ का उपयोग करने का सुझाव दूंगा । V2 के रूप में, prebootबैकस् लाइन्स मिक्स / वैरिएबल बूटस्ट्रैप 3.0 ग्रिड सिस्टम बनाने के लिए उपयोग किया जाता है और सीएसएस जनरेटर का उपयोग करने की तुलना में अधिक हल्का वजन है। वास्तव में, यदि आप केवल इसमें शामिल preboot.lessहैं, कोई ओवरहेड नहीं है क्योंकि पूरी फाइल मिक्सिंस / चर से बनी है और इसलिए केवल पूर्व-संकलन में उपयोग की जाती है और अंतिम आउटपुट में नहीं।



0

यह प्रश्न पूछे जाने के बाद से कुछ समय हो गया है, लेकिन शायद अब आप बूटस्ट्रैप को पूरी तरह से छोड़ सकते हैं और CSS ग्रिड का उपयोग कर सकते हैं! (यह सरल, नट, अधिक लचीला और तेज है)। इस शांत लेख को देखें: बूटस्ट्रैप का उपयोग बंद करें - अपने घटक आधारित यूआई के लिए एक व्यावहारिक सीएसएस ग्रिड टेम्पलेट बनाएं


0

बूटस्ट्रैप 4 में, उनके गिटहब में पहले से ही अलग फाइलें हैं। आप उन्हें यहां पा सकते हैं

https://github.com/twbs/bootstrap/tree/main/dist/css
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.