बूटस्ट्रैप एक उत्तरदायी 12-स्तंभ ग्रिड पर बनाया गया है। हमने उस प्रणाली के आधार पर निश्चित और द्रव-चौड़ाई वाले लेआउट भी शामिल किए हैं।
बूटस्ट्रैप के हिस्से के रूप में प्रदान किया गया डिफ़ॉल्ट ग्रिड सिस्टम 940px चौड़ा, 12-स्तंभ ग्रिड है ।
इसमें विभिन्न उपकरणों और संकल्पों के लिए चार प्रतिक्रियाशील विविधताएं भी हैं: फोन, टैबलेट पोर्ट्रेट, टेबल लैंडस्केप और छोटे डेस्कटॉप, और बड़े वाइडस्क्रीन डेस्कटॉप।
- <div वर्ग = "पंक्ति" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
जैसा कि यहां दिखाया गया है, दो "स्तंभों" के साथ एक बुनियादी लेआउट बनाया जा सकता है, प्रत्येक में हमारे ग्रिड सिस्टम के हिस्से के रूप में परिभाषित 12 मूलभूत स्तंभों की संख्या होती है।
- <div वर्ग = "पंक्ति" >
- <div class = "span4" > ... </div>
- <div class = "span4 ऑफ़सेट4" > ... </div>
- </div>
बूटस्ट्रैप में स्थिर (गैर-द्रव) ग्रिड प्रणाली के साथ, घोंसला बनाना आसान है। अपनी सामग्री को नेस्ट करने के लिए, मौजूदा कॉलम में बस एक नया .row
और कॉलम का सेट जोड़ें ।.span*
.span*
नेस्टेड पंक्तियों में स्तंभों का एक समूह शामिल होना चाहिए जो इसके पैरेंट के स्तंभों की संख्या तक जुड़ जाए। उदाहरण के लिए, दो नेस्टेड .span3
कॉलम को एक के भीतर रखा जाना चाहिए .span6
।
- <div वर्ग = "पंक्ति" >
- <div class = "span12" >
- कॉलम का स्तर 1
- <div वर्ग = "पंक्ति" >
- <div class = "span6" > लेवल 2 </div>
- <div class = "span6" > लेवल 2 </div>
- </div>
- </div>
- </div>
फ्लुइड ग्रिड सिस्टम स्तंभ की चौड़ाई के लिए निश्चित पिक्सेल के बजाय पर्सेंट का उपयोग करता है। इसमें हमारे फिक्स्ड ग्रिड सिस्टम के समान ही प्रतिक्रियाशील विविधताएं हैं, जो मुख्य स्क्रीन रिज़ॉल्यूशन और उपकरणों के लिए उचित अनुपात सुनिश्चित करती हैं।
बस में बदलकर किसी भी पंक्ति को तरल बना .row
लें .row-fluid
। कॉलम बिल्कुल वही रहते हैं, जिससे फिक्स्ड और फ्लुइड लेआउट के बीच फ़्लिप करना बहुत आसान हो जाता है।
- <div class = "पंक्ति-द्रव" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
द्रव ग्रिड के साथ घोंसला बनाना थोड़ा अलग है: नेस्टेड स्तंभों की संख्या को पैरेंट से मेल खाने की आवश्यकता नहीं है। इसके बजाय, आपके कॉलम प्रत्येक स्तर पर रीसेट हो जाते हैं क्योंकि प्रत्येक पंक्ति पैरेंट कॉलम का 100% हिस्सा लेती है।
- <div class = "पंक्ति-द्रव" >
- <div class = "span12" >
- कॉलम का स्तर 1
- <div class = "पंक्ति-द्रव" >
- <div class = "span6" > लेवल 2 </div>
- <div class = "span6" > लेवल 2 </div>
- </div>
- </div>
- </div>
चर | डिफ़ॉल्ट मान | विवरण |
---|---|---|
@gridColumns |
12 | स्तंभों की संख्या |
@gridColumnWidth |
60px | प्रत्येक कॉलम की चौड़ाई |
@gridGutterWidth |
20px | स्तंभों के बीच नकारात्मक स्थान |
@siteWidth |
सभी स्तंभों और गटरों का परिकलित योग | .container-fixed() मिक्सिन की चौड़ाई निर्धारित करने के लिए कॉलम और गटर की संख्या गिनता है |
बूटस्ट्रैप में निर्मित डिफ़ॉल्ट 940px ग्रिड सिस्टम को अनुकूलित करने के लिए कुछ चर हैं, ऊपर प्रलेखित। ग्रिड के लिए सभी चर चर में संग्रहीत हैं। रहित।
ग्रिड को संशोधित करने का अर्थ है तीन @grid*
चर बदलना और बूटस्ट्रैप को पुन: संकलित करना। ग्रिड वेरिएबल्स को वेरिएबल्स में बदलें। कम और पुन: संकलित करने के लिए प्रलेखित चार तरीकों में से एक का उपयोग करें । यदि आप अधिक कॉलम जोड़ रहे हैं, तो उन लोगों के लिए CSS जोड़ना सुनिश्चित करें जो grid.less में हैं।
ग्रिड का अनुकूलन केवल डिफ़ॉल्ट स्तर, 940px ग्रिड पर काम करता है। बूटस्ट्रैप के प्रतिक्रियाशील पहलुओं को बनाए रखने के लिए, आपको ग्रिड को responsive.less में भी अनुकूलित करना होगा।
किसी एक वेबसाइट या पेज के लिए डिफ़ॉल्ट और सरल 940px-चौड़ा, केंद्रित लेआउट जो एक <div class="container">
.
- <शरीर>
- <div क्लास = "कंटेनर" >
- ...
- </div>
- </body>
<div class="container-fluid">
लचीली पृष्ठ संरचना, न्यूनतम और अधिकतम-चौड़ाई, और एक बाएं हाथ की साइडबार देता है। यह ऐप्स और डॉक्स के लिए बहुत अच्छा है।
- <div class = "कंटेनर-फ्लुइड" >
- <div class = "पंक्ति-द्रव" >
- <div class = "span2" >
- <!--साइडबार सामग्री-->
- </div>
- <div class = "span10" >
- <!--शारीरिक सामग्री-->
- </div>
- </div>
- </div>
बूटस्ट्रैप आपकी परियोजनाओं को विभिन्न उपकरणों और स्क्रीन रिज़ॉल्यूशन पर अधिक उपयुक्त बनाने में मदद करने के लिए एक फ़ाइल में मुट्ठी भर मीडिया प्रश्नों का समर्थन करता है। यहाँ क्या शामिल है:
लेबल | लेआउट चौड़ाई | स्तंभ की चौड़ाई | नाले की चौड़ाई |
---|---|---|---|
स्मार्टफोन्स | 480px और नीचे | द्रव स्तंभ, कोई निश्चित चौड़ाई नहीं | |
पोर्ट्रेट टैबलेट | 480px से 768px | द्रव स्तंभ, कोई निश्चित चौड़ाई नहीं | |
लैंडस्केप टैबलेट | 768px से 979px | 42px | 20px |
चूक | 980px और ऊपर | 60px | 20px |
बड़ा प्रदर्शन | 1210px और ऊपर | 70px | 30px |
यह सुनिश्चित करने के लिए कि डिवाइस रिस्पॉन्सिव पेज ठीक से प्रदर्शित करें, व्यूपोर्ट मेटा टैग शामिल करें।
- <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाना = 1.0" >
मीडिया क्वेरीज़ कई स्थितियों-अनुपात, चौड़ाई, प्रदर्शन प्रकार, आदि के आधार पर कस्टम सीएसएस की अनुमति देती हैं-लेकिन आमतौर पर min-width
और के आसपास केंद्रित होती हैं max-width
।
बूटस्ट्रैप में इन मीडिया प्रश्नों को स्वचालित रूप से शामिल नहीं किया जाता है, लेकिन उन्हें समझना और जोड़ना बहुत आसान है और इसके लिए न्यूनतम सेटअप की आवश्यकता होती है। बूटस्ट्रैप की प्रतिक्रियाशील विशेषताओं को शामिल करने के लिए आपके पास कुछ विकल्प हैं:
क्यों न सिर्फ इसे शामिल करें? सच कहा जाए, तो जरूरी नहीं कि हर चीज रिस्पॉन्सिव हो। डेवलपर्स को इस सुविधा को हटाने के लिए प्रोत्साहित करने के बजाय, हम इसे सक्षम करने के लिए सबसे अच्छा समझते हैं।
- // लैंडस्केप फोन और डाउन
- @मीडिया ( अधिकतम - चौड़ाई : 480px ) { ... }
- // लैंडस्केप फोन टू पोर्ट्रेट टैबलेट
- @मीडिया ( अधिकतम - चौड़ाई : 768px ) { ... }
- // लैंडस्केप और डेस्कटॉप के लिए पोर्ट्रेट टैबलेट
- @मीडिया ( न्यूनतम - चौड़ाई : 768px ) और ( अधिकतम - चौड़ाई : 980px ) { ... }
- // बड़ा डेस्कटॉप
- @मीडिया ( न्यूनतम - चौड़ाई : 1200px ) { .. }