बूटस्ट्रैप 4 ग्रिड - बड़ा
बड़ा ग्रिड उदाहरण
| Extra small | Small | Medium | Large | Extra Large | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
पिछले अध्याय में, हमने छोटे और मध्यम उपकरणों के लिए कक्षाओं के साथ एक ग्रिड उदाहरण प्रस्तुत किया था। हमने दो डिव (कॉलम) का उपयोग किया और हमने उन्हें छोटे उपकरणों पर 25%/75% का विभाजन दिया, और मध्यम उपकरणों पर 50%/50% का विभाजन दिया:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
लेकिन बड़े उपकरणों पर डिजाइन 33%/66% विभाजन के रूप में बेहतर हो सकता है।
बड़े उपकरणों को स्क्रीन की चौड़ाई 992 पिक्सेल से 1199 पिक्सेल तक के रूप में परिभाषित किया गया है ।
बड़े उपकरणों के लिए हम .col-lg-*कक्षाओं का उपयोग करेंगे:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
अब बूटस्ट्रैप कहने जा रहा है "छोटे आकार में, -sm- वाली कक्षाओं को देखें और उनका उपयोग करें। मध्यम आकार में, -md- वाली कक्षाओं को देखें और उनका उपयोग करें। बड़े आकार में, देखें -lg- शब्द के साथ कक्षाएं और उनका उपयोग करें"।
निम्न उदाहरण के परिणामस्वरूप छोटे उपकरणों पर 25%/75% विभाजन, मध्यम उपकरणों पर 50%/50% विभाजन, और बड़े और बड़े उपकरणों पर 33% / 66% विभाजन होगा। अतिरिक्त छोटे उपकरणों पर, यह स्वचालित रूप से ढेर हो जाएगा (100%):
उदाहरण
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
नोट: सुनिश्चित करें कि योग 12 या उससे कम तक जुड़ता है (यह आवश्यक नहीं है कि आप सभी 12 उपलब्ध कॉलमों का उपयोग करें):
केवल बड़े का उपयोग करना
नीचे दिए गए उदाहरण में, हम केवल .col-lg-6वर्ग (बिना .col-md-*और/या .col-sm-*) निर्दिष्ट करते हैं। इसका मतलब है कि बड़े और बड़े डिवाइस 50%/50% विभाजित हो जाएंगे। हालांकि, मध्यम, छोटे और अतिरिक्त छोटे उपकरणों के लिए, यह लंबवत रूप से स्टैक करेगा (100% चौड़ाई):
उदाहरण
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
ऑटो लेआउट कॉलम
बूटस्ट्रैप 4 में, सभी उपकरणों के लिए समान चौड़ाई के कॉलम बनाने का एक आसान तरीका है: बस संख्या को हटा दें .col-lg-*और केवल .col-lgनिर्दिष्ट संख्या में
कॉल तत्वों पर वर्ग का उपयोग करें । बूटस्ट्रैप यह पहचान लेगा कि कितने कॉलम हैं, और प्रत्येक कॉलम को समान चौड़ाई मिलेगी।
यदि स्क्रीन का आकार 992px से कम है , तो कॉलम क्षैतिज रूप से ढेर हो जाएंगे:
<!-- Two columns: 50% width on large and up-->
<div class="row">
<div class="col-lg">1 of
2</div>
<div class="col-lg">2 of 2</div>
</div>
<!-- Four
columns: 25% width on large and up -->
<div class="row">
<div class="col-lg">1 of 4</div>
<div class="col-lg">2 of 4</div>
<div class="col-lg">3
of 4</div>
<div class="col-lg">4 of 4</div>
</div>