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