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

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

बूटस्ट्रैप का ग्रिड सिस्टम पूरे पृष्ठ में 12 कॉलम तक की अनुमति देता है।

यदि आप सभी 12 स्तंभों का अलग-अलग उपयोग नहीं करना चाहते हैं, तो आप व्यापक स्तंभ बनाने के लिए स्तंभों को एक साथ समूहित कर सकते हैं:

बूटस्ट्रैप का ग्रिड सिस्टम उत्तरदायी है, और स्क्रीन आकार के आधार पर कॉलम स्वचालित रूप से पुन: व्यवस्थित हो जाएंगे।

ग्रिड कक्षाएं

बूटस्ट्रैप ग्रिड सिस्टम में चार वर्ग हैं:

• xs(फ़ोन के लिए - 768px से कम चौड़ी स्क्रीन)
• sm(टैबलेट के लिए - 768px के बराबर या उससे अधिक चौड़ी स्क्रीन)
• md(छोटे लैपटॉप के लिए - 992px के बराबर या उससे अधिक चौड़ी स्क्रीन)
• lg (लैपटॉप और डेस्कटॉप के लिए - 1200px के बराबर या उससे अधिक चौड़ी स्क्रीन)

अधिक गतिशील और लचीले लेआउट बनाने के लिए उपरोक्त कक्षाओं को जोड़ा जा सकता है।

बूटस्ट्रैप ग्रिड की मूल संरचना

बूटस्ट्रैप ग्रिड की मूल संरचना निम्नलिखित है:

प्रथम; एक पंक्ति बनाएँ ( <div class="row">)। .col-*-*फिर, वांछित संख्या में कॉलम (उपयुक्त वर्गों के साथ टैग) जोड़ें । ध्यान दें कि इन नंबरों .col-*-*को हमेशा प्रत्येक पंक्ति के लिए 12 तक जोड़ना चाहिए।

नीचे हमने बुनियादी बूटस्ट्रैप ग्रिड लेआउट के कुछ उदाहरण एकत्र किए हैं।

तीन समान कॉलम

निम्न उदाहरण दिखाता है कि टैबलेट से शुरू होने वाले तीन समान-चौड़ाई वाले कॉलम और बड़े डेस्कटॉप पर स्केलिंग कैसे प्राप्त करें। 768px से कम चौड़े मोबाइल फ़ोन या स्क्रीन पर , कॉलम अपने आप स्टैक हो जाएंगे:

दो असमान कॉलम

निम्न उदाहरण दिखाता है कि टैबलेट से शुरू होने वाले और बड़े डेस्कटॉप पर स्केलिंग करने वाले दो विभिन्न-चौड़ाई वाले कॉलम कैसे प्राप्त करें: