बूटस्ट्रैप एक उत्तरदायी 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*
- <div वर्ग = "पंक्ति" >
- <div class = "span12" >
- कॉलम का स्तर 1
- <div वर्ग = "पंक्ति" >
- <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 से 940px | 44पीएक्स | 20px |
चूक | 940px और ऊपर | 60px | 20px |
बड़ा प्रदर्शन | 1210px और ऊपर | 70px | 30px |
मीडिया क्वेरीज़ कई स्थितियों-अनुपात, चौड़ाई, प्रदर्शन प्रकार, आदि के आधार पर कस्टम सीएसएस की अनुमति देती हैं-लेकिन आमतौर पर min-width
और के आसपास केंद्रित होती हैं max-width
।
बूटस्ट्रैप में इन मीडिया प्रश्नों को स्वचालित रूप से शामिल नहीं किया जाता है, लेकिन उन्हें समझना और जोड़ना बहुत आसान है और इसके लिए न्यूनतम सेटअप की आवश्यकता होती है। बूटस्ट्रैप की प्रतिक्रियाशील विशेषताओं को शामिल करने के लिए आपके पास कुछ विकल्प हैं:
क्यों न सिर्फ इसे शामिल करें? सच कहा जाए, तो जरूरी नहीं कि हर चीज रिस्पॉन्सिव हो। डेवलपर्स को इस सुविधा को हटाने के लिए प्रोत्साहित करने के बजाय, हम इसे सक्षम करने के लिए सबसे अच्छा समझते हैं।
- // लैंडस्केप फोन और डाउन
- @मीडिया ( अधिकतम - चौड़ाई : 480px ) { ... }
- // लैंडस्केप फोन से पोर्ट्रेट टैबलेट
- @मीडिया ( अधिकतम - चौड़ाई : 768px ) { ... }
- // लैंडस्केप और डेस्कटॉप के लिए पोर्ट्रेट टैबलेट
- @मीडिया ( न्यूनतम - चौड़ाई : 768px ) और ( अधिकतम - चौड़ाई : 940px ) { ... }
- // बड़ा डेस्कटॉप
- @मीडिया ( न्यूनतम - चौड़ाई : 1200px ) { .. }