बूटस्ट्रैप ग्रिड उदाहरण
नीचे हमने बुनियादी बूटस्ट्रैप ग्रिड लेआउट के कुछ उदाहरण एकत्र किए हैं।
तीन समान कॉलम
निम्न उदाहरण दिखाता है कि टैबलेट से शुरू होने वाले तीन समान-चौड़ाई वाले कॉलम और बड़े डेस्कटॉप पर स्केलिंग कैसे प्राप्त करें। मोबाइल फ़ोन पर, कॉलम स्वचालित रूप से स्टैक हो जाएंगे:
उदाहरण
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
तीन असमान कॉलम
निम्नलिखित उदाहरण दिखाता है कि टैबलेट से शुरू होने वाले तीन विभिन्न-चौड़ाई वाले कॉलम कैसे प्राप्त करें और बड़े डेस्कटॉप पर स्केलिंग करें:
उदाहरण
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</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>
कोई गटर नहीं
.row-no-guttersएक पंक्ति और उसके स्तंभों से गटर निकालने के लिए कक्षा का उपयोग करें :
उदाहरण
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
दो नेस्टेड कॉलम के साथ दो कॉलम
निम्न उदाहरण दिखाता है कि टैबलेट से शुरू होने वाले दो कॉलम और बड़े डेस्कटॉप पर स्केलिंग कैसे प्राप्त करें, बड़े कॉलम के भीतर अन्य दो कॉलम (बराबर चौड़ाई) के साथ (मोबाइल फोन पर, ये कॉलम और उनके नेस्टेड कॉलम स्टैक हो जाएंगे):
उदाहरण
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
मिश्रित: मोबाइल और डेस्कटॉप
बूटस्ट्रैप ग्रिड सिस्टम में चार वर्ग हैं: xs (फ़ोन), sm (टैबलेट), md (डेस्कटॉप), और lg (बड़ा डेस्कटॉप)। अधिक गतिशील और लचीले लेआउट बनाने के लिए कक्षाओं को जोड़ा जा सकता है।
युक्ति: प्रत्येक वर्ग बढ़ता है, इसलिए यदि आप xs और sm के लिए समान चौड़ाई निर्धारित करना चाहते हैं, तो आपको केवल xs निर्दिष्ट करने की आवश्यकता है।
उदाहरण
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
युक्ति: याद रखें कि ग्रिड कॉलम को एक पंक्ति में बारह तक जोड़ना चाहिए। इसके अलावा, कॉलम व्यूपोर्ट से कोई फर्क नहीं पड़ता।
मिश्रित: मोबाइल, टैबलेट और डेस्कटॉप
उदाहरण
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
फ्लोट साफ़ करें
.clearfixअसमान सामग्री के साथ अजीब रैपिंग को रोकने के लिए विशिष्ट ब्रेकपॉइंट्स पर फ्लोट्स (कक्षा के साथ) साफ़ करें:
उदाहरण
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
ऑफसेटिंग कॉलम
.col-md-offset-*कक्षाओं का उपयोग करके कॉलम को दाईं ओर ले जाएं । ये वर्ग किसी स्तंभ के बाएँ हाशिया को * स्तंभों से बढ़ाते हैं:
उदाहरण
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
पुश एंड पुल - कॉलम ऑर्डरिंग बदलें
ग्रिड कॉलम के क्रम को .col-md-push-*और
.col-md-pull-*कक्षाओं के साथ बदलें:
उदाहरण
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>