बूटस्ट्रैप 4 ग्रिड सिस्टम
बूटस्ट्रैप 4 ग्रिड सिस्टम
बूटस्ट्रैप का ग्रिड सिस्टम पूरे पृष्ठ में 12 कॉलम तक की अनुमति देता है।
यदि आप सभी 12 स्तंभों का अलग-अलग उपयोग नहीं करना चाहते हैं, तो आप व्यापक स्तंभ बनाने के लिए स्तंभों को एक साथ समूहित कर सकते हैं:
| अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 |
| अवधि 4 | अवधि 4 | अवधि 4 | |||||||||
| अवधि 4 | अवधि 8 | ||||||||||
| अवधि 6 | अवधि 6 | ||||||||||
| अवधि 12 | |||||||||||
बूटस्ट्रैप का ग्रिड सिस्टम उत्तरदायी है, और स्क्रीन के आकार के आधार पर कॉलम फिर से व्यवस्थित होंगे: एक बड़ी स्क्रीन पर यह तीन स्तंभों में व्यवस्थित सामग्री के साथ बेहतर दिख सकता है, लेकिन एक छोटी स्क्रीन पर यह बेहतर होगा कि सामग्री आइटम स्टैक्ड हों एक दूसरे के ऊपर।
ग्रिड कक्षाएं
बूटस्ट्रैप 4 ग्रिड सिस्टम में पाँच वर्ग हैं:
.col-(अतिरिक्त छोटे उपकरण - स्क्रीन की चौड़ाई 576px से कम).col-sm-(छोटे उपकरण - स्क्रीन की चौड़ाई 576px के बराबर या उससे अधिक).col-md-(मध्यम उपकरण - स्क्रीन की चौड़ाई 768px के बराबर या उससे अधिक).col-lg-(बड़े उपकरण - स्क्रीन की चौड़ाई 992px के बराबर या उससे अधिक).col-xl-(xबड़ा उपकरण - स्क्रीन की चौड़ाई 1200px के बराबर या उससे अधिक)
अधिक गतिशील और लचीले लेआउट बनाने के लिए उपरोक्त कक्षाओं को जोड़ा जा सकता है।
युक्ति: प्रत्येक वर्ग बढ़ता है, इसलिए यदि आप
smऔर के लिए समान चौड़ाई निर्धारित करना चाहते हैं, तो mdआपको केवल निर्दिष्ट करने की आवश्यकता है sm।
ग्रिड सिस्टम नियम
कुछ बूटस्ट्रैप 4 ग्रिड सिस्टम नियम:
- पंक्तियों को उचित संरेखण और पैडिंग के लिए एक
.container(निश्चित-चौड़ाई) या (पूर्ण-चौड़ाई) के भीतर रखा जाना चाहिए.container-fluid - स्तंभों के क्षैतिज समूह बनाने के लिए पंक्तियों का उपयोग करें
- सामग्री को कॉलम के भीतर रखा जाना चाहिए, और केवल कॉलम पंक्तियों के तत्काल बच्चे हो सकते हैं
- पूर्वनिर्धारित कक्षाएं जैसे
.rowऔर.col-sm-4जल्दी से ग्रिड लेआउट बनाने के लिए उपलब्ध हैं - कॉलम पैडिंग के माध्यम से गटर (स्तंभ सामग्री के बीच अंतराल) बनाते हैं। उस पैडिंग को नकारात्मक मार्जिन के माध्यम से पहले और आखिरी कॉलम के लिए पंक्तियों में ऑफसेट किया जाता है
.rows - ग्रिड कॉलम 12 उपलब्ध कॉलमों की संख्या निर्दिष्ट करके बनाए जाते हैं जिन्हें आप फैलाना चाहते हैं। उदाहरण के लिए, तीन बराबर कॉलम तीन का उपयोग करेंगे
.col-sm-4 - कॉलम की चौड़ाई प्रतिशत में है, इसलिए वे हमेशा अपने मूल तत्व के सापेक्ष तरल और आकार के होते हैं
- बूटस्ट्रैप 3 और बूटस्ट्रैप 4 के बीच सबसे बड़ा अंतर यह है कि बूटस्ट्रैप 4 अब फ्लोट के बजाय फ्लेक्सबॉक्स का उपयोग करता है। फ्लेक्सबॉक्स के साथ एक बड़ा फायदा यह है कि निर्दिष्ट चौड़ाई के बिना ग्रिड कॉलम स्वचालित रूप से "बराबर चौड़ाई कॉलम" (और बराबर ऊंचाई) के रूप में लेआउट करेंगे। उदाहरण: विल वाले तीन तत्व
.col-smछोटे ब्रेकपॉइंट और ऊपर से स्वचालित रूप से 33.33% चौड़े होंगे। युक्ति: यदि आप फ्लेक्सबॉक्स के बारे में अधिक जानना चाहते हैं, तो आप हमारे सीएसएस फ्लेक्सबॉक्स ट्यूटोरियल को पढ़ सकते हैं ।
ध्यान दें कि फ्लेक्सबॉक्स IE9 और पुराने संस्करणों में समर्थित नहीं है।
यदि आपको IE8-9 समर्थन की आवश्यकता है, तो बूटस्ट्रैप 3 का उपयोग करें। यह बूटस्ट्रैप का सबसे स्थिर संस्करण है, और यह अभी भी महत्वपूर्ण बग फिक्स और दस्तावेज़ परिवर्तनों के लिए टीम द्वारा समर्थित है। हालांकि इसमें कोई नया फीचर नहीं जोड़ा जाएगा।
बूटस्ट्रैप 4 ग्रिड की मूल संरचना
बूटस्ट्रैप 4 ग्रिड की मूल संरचना निम्नलिखित है:
<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
पहला उदाहरण: एक पंक्ति बनाएं ( <div
class="row">)। .col-*-*फिर, वांछित संख्या में कॉलम (उपयुक्त वर्गों के साथ टैग) जोड़ें
। पहला तारा (*) प्रतिक्रिया का प्रतिनिधित्व करता है: sm, md, lg या xl, जबकि दूसरा तारा एक संख्या का प्रतिनिधित्व करता है, जिसे हमेशा प्रत्येक पंक्ति के लिए 12 तक जोड़ना चाहिए।
दूसरा उदाहरण: प्रत्येक में एक संख्या जोड़ने के बजाय col, बूटस्ट्रैप को लेआउट को संभालने दें, समान चौड़ाई वाले कॉलम बनाने के लिए: "col"प्रत्येक कॉलम में दो तत्व = 50% चौड़ाई। तीन कॉल्स = 33.33% प्रत्येक कॉलम की चौड़ाई। चार कॉलम = 25% चौड़ाई, आदि। आप .col-sm|md|lg|xlकॉलम को उत्तरदायी बनाने के लिए भी उपयोग कर सकते हैं।
ग्रिड विकल्प
निम्न तालिका सारांशित करती है कि बूटस्ट्रैप 4 ग्रिड सिस्टम विभिन्न स्क्रीन आकारों में कैसे काम करता है:
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 |
| 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) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes |
उदाहरण
अगला अध्याय विभिन्न उपकरणों और स्क्रीन चौड़ाई के लिए ग्रिड सिस्टम के उदाहरण दिखाता है:
- खड़ी-से-क्षैतिज
- अतिरिक्त छोटा लेआउट
- छोटे उपकरण
- मध्यम उपकरण
- बड़े उपकरण
- अतिरिक्त बड़े उपकरण
- अधिक ग्रिड उदाहरण