बूटस्ट्रैप 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% का विभाजन दिया:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
लेकिन मध्यम उपकरणों पर डिजाइन 50%/50% विभाजन के रूप में बेहतर हो सकता है।
मध्यम उपकरणों को स्क्रीन की चौड़ाई 768 पिक्सेल से 991 पिक्सेल तक के रूप में परिभाषित किया गया है ।
मध्यम उपकरणों के लिए हम .col-md-*
कक्षाओं का उपयोग करेंगे:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
अब बूटस्ट्रैप कहने जा रहा है "छोटे आकार में, उन कक्षाओं को देखें जिनमें -sm- है और उनका उपयोग करें। मध्यम आकार में, -md- वाली कक्षाओं को देखें और उनका उपयोग करें"।
निम्न उदाहरण के परिणामस्वरूप छोटे उपकरणों पर 25%/75% विभाजन और मध्यम (और बड़े और बड़े) उपकरणों पर 50%/50% विभाजन होगा। अतिरिक्त छोटे उपकरणों पर, यह स्वचालित रूप से ढेर हो जाएगा (100%):
उदाहरण
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
नोट: सुनिश्चित करें कि योग 12 या उससे कम तक जुड़ता है (यह आवश्यक नहीं है कि आप सभी 12 उपलब्ध कॉलमों का उपयोग करें):
केवल माध्यम का उपयोग करना
नीचे दिए गए उदाहरण में, हम केवल .col-md-6
वर्ग (बिना .col-sm-*
) निर्दिष्ट करते हैं। इसका मतलब है कि मध्यम, बड़े और अतिरिक्त बड़े उपकरण 50%/50% विभाजित हो जाएंगे - क्योंकि वर्ग बढ़ता है। हालांकि, छोटे और अतिरिक्त छोटे उपकरणों के लिए, यह लंबवत रूप से स्टैक करेगा (100% चौड़ाई):
उदाहरण
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
ऑटो लेआउट कॉलम
बूटस्ट्रैप 4 में, सभी उपकरणों के लिए समान चौड़ाई के कॉलम बनाने का एक आसान तरीका है: बस संख्या को हटा दें .col-md-*
और केवल .col-md
निर्दिष्ट संख्या में
कॉल तत्वों पर वर्ग का उपयोग करें । बूटस्ट्रैप यह पहचान लेगा कि कितने कॉलम हैं, और प्रत्येक कॉलम को समान चौड़ाई मिलेगी।
यदि स्क्रीन का आकार 768px से कम है , तो कॉलम क्षैतिज रूप से ढेर हो जाएंगे:
<!-- Two columns: 50% width on medium and up-->
<div class="row">
<div class="col-md">1 of
2</div>
<div class="col-md">2 of 2</div>
</div>
<!-- Four
columns: 25% width on medium and up -->
<div class="row">
<div class="col-md">1 of 4</div>
<div class="col-md">2 of 4</div>
<div class="col-md">3
of 4</div>
<div class="col-md">4 of 4</div>
</div>
अगला अध्याय दिखाता है कि बड़े उपकरणों के लिए एक अलग विभाजन प्रतिशत कैसे जोड़ा जाए।