बूटस्ट्रैप 4 ग्रिड स्टैक्ड-टू-हॉरिजॉन्टल
बूटस्ट्रैप 4 ग्रिड उदाहरण: स्टैक्ड-टू-हॉरिजॉन्टल
हम एक बुनियादी ग्रिड सिस्टम बनाएंगे जो बड़े उपकरणों पर क्षैतिज होने से पहले अतिरिक्त छोटे उपकरणों पर स्टैक्ड होना शुरू हो जाएगा।
निम्नलिखित उदाहरण एक साधारण "स्टैक्ड-टू-हॉरिजॉन्टल" दो-स्तंभ लेआउट दिखाता है, जिसका अर्थ है कि अतिरिक्त छोटी स्क्रीन को छोड़कर, सभी स्क्रीन पर 50%/50% विभाजन होगा, जिसे यह स्वचालित रूप से स्टैक करेगा (100%):
उदाहरण: स्टैक्ड-टू-हॉरिज़ॉन्टल
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
युक्ति: कक्षाओं में संख्याएँ .col-sm-*
इंगित करती हैं कि div को कितने कॉलमों को फैलाना चाहिए (12 में से)। तो, .col-sm-1
1 कॉलम, .col-sm-4
4 कॉलम,
6 कॉलम.col-sm-6
, इत्यादि
।
युक्ति: आप वर्ग को इसमें बदलकर किसी निश्चित-चौड़ाई वाले लेआउट को पूर्ण-चौड़ाई वाले लेआउट में बदल सकते हैं :.container
.container-fluid
उदाहरण: द्रव कंटेनर
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
ऑटो लेआउट कॉलम
बूटस्ट्रैप 4 में, सभी उपकरणों के लिए समान चौड़ाई के कॉलम बनाने का एक आसान तरीका है: बस संख्या को हटा दें और केवल निर्दिष्ट संख्या में
कॉल तत्वों पर वर्ग का उपयोग करें । बूटस्ट्रैप यह पहचान लेगा कि कितने कॉलम हैं, और प्रत्येक कॉलम को समान चौड़ाई मिलेगी। आकार वर्ग निर्धारित करता है कि कॉलम कब उत्तरदायी होना चाहिए :.col-size-*
.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>