बूटस्ट्रैप 4 ग्रिड
बूटस्ट्रैप 4 ग्रिड सिस्टम
बूटस्ट्रैप का ग्रिड सिस्टम फ्लेक्सबॉक्स के साथ बनाया गया है और पूरे पृष्ठ में 12 कॉलम तक की अनुमति देता है।
यदि आप सभी 12 स्तंभों का अलग-अलग उपयोग नहीं करना चाहते हैं, तो आप व्यापक स्तंभ बनाने के लिए स्तंभों को एक साथ समूहित कर सकते हैं:
| अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 | अवधि 1 |
| अवधि 4 | अवधि 4 | अवधि 4 | |||||||||
| अवधि 4 | अवधि 8 | ||||||||||
| अवधि 6 | अवधि 6 | ||||||||||
| अवधि 12 | |||||||||||
ग्रिड सिस्टम उत्तरदायी है, और स्क्रीन आकार के आधार पर कॉलम स्वचालित रूप से पुन: व्यवस्थित हो जाएंगे।
सुनिश्चित करें कि योग 12 या उससे कम तक जुड़ता है (यह आवश्यक नहीं है कि आप सभी 12 उपलब्ध कॉलम का उपयोग करें)।
ग्रिड कक्षाएं
बूटस्ट्रैप 4 ग्रिड सिस्टम में पाँच वर्ग हैं:
.col-(अतिरिक्त छोटे उपकरण - स्क्रीन की चौड़ाई 576px से कम).col-sm-(छोटे उपकरण - स्क्रीन की चौड़ाई 576px के बराबर या उससे अधिक).col-md-(मध्यम उपकरण - स्क्रीन की चौड़ाई 768px के बराबर या उससे अधिक).col-lg-(बड़े उपकरण - स्क्रीन की चौड़ाई 992px के बराबर या उससे अधिक).col-xl-(xबड़ा उपकरण - स्क्रीन की चौड़ाई 1200px के बराबर या उससे अधिक)
अधिक गतिशील और लचीले लेआउट बनाने के लिए उपरोक्त कक्षाओं को जोड़ा जा सकता है।
युक्ति: प्रत्येक वर्ग बढ़ता है, इसलिए यदि आप
smऔर के लिए समान चौड़ाई निर्धारित करना चाहते हैं, तो mdआपको केवल निर्दिष्ट करने की आवश्यकता है sm।
बूटस्ट्रैप 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>
<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>
पहला उदाहरण: एक पंक्ति बनाएं ( <div
class="row">)। फिर, वांछित संख्या में कॉलम (उपयुक्त
.col-*-*वर्गों वाले टैग) जोड़ें। पहला तारा (*) प्रतिक्रिया का प्रतिनिधित्व करता है: sm, md, lg या xl, जबकि दूसरा तारा एक संख्या का प्रतिनिधित्व करता है, जिसे प्रत्येक पंक्ति के लिए 12 तक जोड़ना चाहिए।
दूसरा उदाहरण: प्रत्येक में एक संख्या जोड़ने के बजाय col, बूटस्ट्रैप को लेआउट को संभालने दें, समान चौड़ाई वाले कॉलम बनाने के लिए: "col"प्रत्येक कॉलम में दो तत्व = 50% चौड़ाई। तीन कॉल्स = 33.33% प्रत्येक कॉलम की चौड़ाई। चार कॉलम = 25% चौड़ाई, आदि। आप .col-sm|md|lg|xlकॉलम को उत्तरदायी बनाने के लिए भी उपयोग कर सकते हैं।
नीचे हमने बुनियादी बूटस्ट्रैप 4 ग्रिड लेआउट के कुछ उदाहरण एकत्र किए हैं।
तीन समान कॉलम
निम्न उदाहरण दिखाता है कि सभी उपकरणों और स्क्रीन चौड़ाई पर तीन समान-चौड़ाई वाले कॉलम कैसे बनाएं:
उदाहरण
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
उत्तरदायी कॉलम
निम्न उदाहरण दिखाता है कि टैबलेट से शुरू होने वाले और अतिरिक्त बड़े डेस्कटॉप तक स्केलिंग करने के लिए चार समान-चौड़ाई वाले कॉलम कैसे बनाएं। 576px से कम चौड़े मोबाइल फ़ोन या स्क्रीन पर, कॉलम स्वचालित रूप से एक दूसरे के ऊपर ढेर हो जाएंगे :
उदाहरण
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
दो असमान उत्तरदायी कॉलम
निम्न उदाहरण दिखाता है कि टैबलेट से शुरू होने वाले दो विभिन्न-चौड़ाई वाले कॉलम कैसे प्राप्त करें और बड़े अतिरिक्त डेस्कटॉप पर स्केलिंग करें:
उदाहरण
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
युक्ति: आप इस ट्यूटोरियल में बाद में बूटस्ट्रैप 4 ग्रिड के बारे में और जानेंगे।