बूटस्ट्रैप ग्रिड सिस्टम
बूटस्ट्रैप ग्रिड सिस्टम
बूटस्ट्रैप का ग्रिड सिस्टम पूरे पृष्ठ में 12 कॉलम तक की अनुमति देता है।
यदि आप सभी 12 स्तंभों का अलग-अलग उपयोग नहीं करना चाहते हैं, तो आप व्यापक स्तंभ बनाने के लिए स्तंभों को एक साथ समूहित कर सकते हैं:
| अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 |
| अवधि 4 | अवधि 4 | अवधि 4 | |||||||||
| अवधि 4 | अवधि 8 | ||||||||||
| अवधि 6 | अवधि 6 | ||||||||||
| अवधि 12 | |||||||||||
बूटस्ट्रैप का ग्रिड सिस्टम उत्तरदायी है, और स्क्रीन के आकार के आधार पर कॉलम फिर से व्यवस्थित होंगे: एक बड़ी स्क्रीन पर यह तीन स्तंभों में व्यवस्थित सामग्री के साथ बेहतर दिख सकता है, लेकिन एक छोटी स्क्रीन पर यह बेहतर होगा कि सामग्री आइटम स्टैक्ड हों एक दूसरे के ऊपर।
युक्ति: याद रखें कि ग्रिड कॉलम को एक पंक्ति में बारह तक जोड़ना चाहिए। इसके अलावा, कॉलम व्यूपोर्ट से कोई फर्क नहीं पड़ता।
ग्रिड कक्षाएं
बूटस्ट्रैप ग्रिड सिस्टम में चार वर्ग हैं:
xs(फ़ोन के लिए - 768px से कम चौड़ी स्क्रीन)sm(टैबलेट के लिए - 768px के बराबर या उससे अधिक चौड़ी स्क्रीन)md(छोटे लैपटॉप के लिए - 992px के बराबर या उससे अधिक चौड़ी स्क्रीन)lg(लैपटॉप और डेस्कटॉप के लिए - 1200px के बराबर या उससे अधिक चौड़ी स्क्रीन)
अधिक गतिशील और लचीले लेआउट बनाने के लिए उपरोक्त कक्षाओं को जोड़ा जा सकता है।
युक्ति: प्रत्येक वर्ग बढ़ता है, इसलिए यदि आप xs और sm के लिए समान चौड़ाई निर्धारित करना चाहते हैं, तो आपको केवल xs निर्दिष्ट करने की आवश्यकता है।
ग्रिड सिस्टम नियम
कुछ बूटस्ट्रैप ग्रिड सिस्टम नियम:
- पंक्तियों को उचित संरेखण और पैडिंग के लिए एक
.container(निश्चित-चौड़ाई) या (पूर्ण-चौड़ाई) के भीतर रखा जाना चाहिए.container-fluid - स्तंभों के क्षैतिज समूह बनाने के लिए पंक्तियों का उपयोग करें
- सामग्री को कॉलम के भीतर रखा जाना चाहिए, और केवल कॉलम पंक्तियों के तत्काल बच्चे हो सकते हैं
- पूर्वनिर्धारित कक्षाएं जैसे
.rowऔर.col-sm-4जल्दी से ग्रिड लेआउट बनाने के लिए उपलब्ध हैं - कॉलम पैडिंग के माध्यम से गटर (स्तंभ सामग्री के बीच अंतराल) बनाते हैं। उस पैडिंग को नकारात्मक मार्जिन के माध्यम से पहले और आखिरी कॉलम के लिए पंक्तियों में ऑफसेट किया जाता है
.rows - ग्रिड कॉलम 12 उपलब्ध कॉलमों की संख्या निर्दिष्ट करके बनाए जाते हैं जिन्हें आप फैलाना चाहते हैं। उदाहरण के लिए, तीन बराबर कॉलम तीन का उपयोग करेंगे
.col-sm-4 - कॉलम की चौड़ाई प्रतिशत में है, इसलिए वे हमेशा अपने मूल तत्व के सापेक्ष तरल और आकार के होते हैं
बूटस्ट्रैप ग्रिड की मूल संरचना
बूटस्ट्रैप ग्रिड की मूल संरचना निम्नलिखित है:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
इसलिए, अपना इच्छित लेआउट बनाने के लिए, एक कंटेनर ( <div
class="container">) बनाएं। इसके बाद, एक पंक्ति बनाएं ( <div
class="row">)। फिर, वांछित संख्या में कॉलम (उपयुक्त
.col-*-*वर्गों वाले टैग) जोड़ें। ध्यान दें कि इन नंबरों .col-*-*को हमेशा प्रत्येक पंक्ति के लिए 12 तक जोड़ना चाहिए।
ग्रिड विकल्प
निम्न तालिका सारांशित करती है कि बूटस्ट्रैप ग्रिड सिस्टम कई उपकरणों में कैसे काम करता है:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
उदाहरण
अगला अध्याय विभिन्न उपकरणों के लिए ग्रिड सिस्टम के उदाहरण दिखाता है: