बूस्ट्रैप 5 ग्रिड सिस्टम

ग्रिड सिस्टम

Bootstrap का ग्रिड सिस्टम flexbox से बना है, पृष्ठ पर 12 स्तम्भ तक की अनुमति है।

यदि आप 12 स्तम्भों को अलग-अलग नहीं इस्तेमाल करना चाहते हैं, तो इन स्तम्भों को एक साथ जोड़कर अधिक चौड़े स्तम्भ बनाया जा सकता है:

ग्रिड सिस्टम तुरंत प्रतिक्रियाशील है और स्तम्भ स्क्रीन आकार के अनुसार स्वचालित रूप से पुनर्व्यवस्थित होते हैं।

निश्चित करें कि कुल 12 से कम या बराबर है (सभी 12 उपलब्ध स्तम्भों का उपयोग नहीं करना है)।

ग्रिड क्लास

Bootstrap 5 ग्रिड सिस्टम में छह क्लासें प्रदान की जाती हैं:

  • .col- (अति-छोटे डिवाइस - स्क्रीन चौड़ाई 576px से कम है)
  • .col-sm- (छोटे डिवाइस - स्क्रीन चौड़ाई 576px या इससे अधिक है)
  • .col-md- (मध्यम डिवाइस - स्क्रीन चौड़ाई 768px या इससे अधिक है)
  • .col-lg- (बड़े डिवाइस - स्क्रीन चौड़ाई 992px या इससे अधिक है)
  • .col-xl- (अति-विशाल डिवाइस - स्क्रीन चौड़ाई 1200px या इससे अधिक है)
  • .col-xxl- (विशाल डिवाइस - स्क्रीन चौड़ाई 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" एलीमेंट = प्रत्येक स्तम्भ की 50% चौड़ाई, तीन स्तम्भ = प्रत्येक स्तम्भ की 33.33% चौड़ाई।चार स्तम्भ = 25% चौड़ाई आदि।आप इसके साथ भी उपयोग कर सकते हैं, "col" के रूप में: दो एक दूसरे के साथ, "col": .col-sm|md|lg|xl|xxl स्तम्भों को प्रतिक्रियाशील बनाएं।

ग्रिड विकल्प

नीचे दिए गए तालिका में ब्रॉस्टेप 5 ग्रिड सिस्टम कैसे विभिन्न स्क्रीन आकारों पर काम करता है का समीक्षा की जाती है:

अत्यधिक छोटा (<576px) छोटा (>=576px) मध्यम (>=768px) बड़ा (>=992px) अत्यधिक विशाल (>=1200px) विशाल (>=1400px)
क्लास पूर्वसर .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
ग्रिड व्यवहार सदैव होरिजन्टल सदैव होरिजन्टल, ब्रेकप्वाइंट के ऊपर सदैव होरिजन्टल, ब्रेकप्वाइंट के ऊपर सदैव होरिजन्टल, ब्रेकप्वाइंट के ऊपर सदैव होरिजन्टल, ब्रेकप्वाइंट के ऊपर सदैव होरिजन्टल, ब्रेकप्वाइंट के ऊपर
कंटेनर चौड़ाई नहीं (ऑटो) 540px 720px 960px 1140px 1320px
उपयोगी मोबाइल वर्गाकार मोबाइल होरिजन्टल पैडटॉप लैपटॉप लैपटॉप और डेस्कटॉप लैपटॉप और डेस्कटॉप
स्तम्भ का # 12 12 12 12 12 12
गटर चौड़ाई 1.5rem (स्तम्भ के प्रत्येक ओर .75rem ) 1.5rem (स्तम्भ के प्रत्येक ओर .75rem ) 1.5rem (स्तम्भ के प्रत्येक ओर .75rem ) 1.5rem (स्तम्भ के प्रत्येक ओर .75rem ) 1.5rem (स्तम्भ के प्रत्येक ओर .75rem ) 1.5rem (स्तम्भ के प्रत्येक ओर .75rem )
अंतर्निहित हाँ हाँ हाँ हाँ हाँ हाँ
आधार हाँ हाँ हाँ हाँ हाँ हाँ
स्तम्भ जोड़ीदारी हाँ हाँ हाँ हाँ हाँ हाँ