बूटस्ट्रैप ग्रिड - बड़े उपकरण
बूटस्ट्रैप ग्रिड उदाहरण: बड़े उपकरण
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=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% विभाजन के रूप में बेहतर हो सकता है।
युक्ति: बड़े उपकरणों को 1200 पिक्सेल और उससे अधिक की स्क्रीन चौड़ाई वाले के रूप में परिभाषित किया गया है ।
बड़े उपकरणों के लिए हम .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% विभाजन होगा:
उदाहरण
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
नोट: सुनिश्चित करें कि योग हमेशा 12 तक जुड़ता है।
केवल बड़े का उपयोग करना
नीचे दिए गए उदाहरण में, हम केवल .col-lg-6वर्ग (बिना .col-md-*और/या .col-sm-*) निर्दिष्ट करते हैं। इसका मतलब है कि बड़े डिवाइस 50%/50% विभाजित हो जाएंगे। हालांकि, मध्यम और छोटे उपकरणों के लिए, यह लंबवत रूप से स्टैक करेगा (100% चौड़ाई):
उदाहरण
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-lg-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>