बूस्ट्रैप 5 ग्रिड: मध्यम उपकरण
- पिछला पृष्ठ BS5 ग्रिड स्माल
- अगला पृष्ठ BS5 ग्रिड लार्ज
मध्यम उपकरण ग्रिड इंस्टेंस
| एक्सस्माल | स्माल | मध्यम | लार्ज | एक्सट्रा लार्ज | XXL | |
|---|---|---|---|---|---|---|
| क्लास पूर्वसूचक | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| स्क्रीन चौड़ाई | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
पिछले अध्याय में, हमने एक ग्रिड इंस्टेंस दिखाया है, जिसमें छोटे उपकरणों के लिए क्लास शामिल हैं।हमने दो div (स्तंभ) इस्तेमाल किए हैं और उन्हें 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>विश्व प्राकृतिक संस्थान (WWF), 29 अप्रैल 1961 को स्थापित, उसका चिह्न एक बगुलदंड है ...</p>
</div>
<div class="col-sm-9 col-md-6">
<p>1980 में, WWF आधिकारिक तौर पर चीन में आया, चीन सरकार के आमंत्रण पर चीन में बगुलदंड और उसके आवास की सुरक्षा कार्य करने के लिए आया ...</p>
</div>
</div>
</div>
ध्यान दें:निश्चित करें कि कुल 12 से बड़ा या बराबर नहीं हो (सभी 12 उपलब्ध स्तम्भों का उपयोग नहीं करना चाहिए):
बस Medium
इस उदाहरण में, हम केवल .col-md-6 क्लास (बिना .col-sm-*）。इसका मतलब है कि मध्यम, बड़ा, अत्यधिक बड़ा और XXL उपकरण 50% / 50% विभाजन करेंगे क्योंकि इस क्लास फैल जाएगी। लेकिन, छोटे और अत्यधिक छोटे उपकरणों के लिए ऊर्ध्वगामी ढेर होंगे (100% चौड़ाई):
उदाहरण
<div class="row">
<div class="col-md-6">
<p>विश्व प्राकृतिक संस्थान (WWF), 29 अप्रैल 1961 को स्थापित, उसका चिह्न एक बगुलदंड है ...</p>
</div>
<div class="col-md-6">
<p>1980 में, WWF आधिकारिक तौर पर चीन में आया, चीन सरकार के आमंत्रण पर चीन में बगुलदंड और उसके आवास की सुरक्षा कार्य करने के लिए आया ...</p>
</div>
</div>
स्वचालित विन्यास स्तम्भ
बूटस्ट्रैप 5 में, सभी उपकरणों के लिए समान चौड़ाई के स्तम्भ बनाने के लिए एक सरल तरीका है: बस .col-md-* संख्या को हटाएँ और केवल col एलीमेंट पर इस्तेमाल करें .col-md क्लास। बूटस्ट्रैप उतने स्तम्भों की पहचान करेगा और हर स्तम्भ को एक-सा एक चौड़ाई मिलेगी。
यदि स्क्रीन आकार768px से कमऔर स्तम्भ के स्तरीय ढेर होंगे:
<!-- दो स्तम्भ: मध्यम और बड़े उपकरणों में 50% चौड़ाई --> <div class="row"> <div class="col-md">1 of 2</div> <div class="col-md">2 of 2</div> </div> <!-- चार स्तम्भ: मध्यम और बड़े उपकरणों में 25% चौड़ाई --> <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>
अगला अध्याय बड़े उपकरणों के लिए अलग-अलग विभाजन प्रतिशत जोड़ने के तरीके दिखाएगा。
- पिछला पृष्ठ BS5 ग्रिड स्माल
- अगला पृष्ठ BS5 ग्रिड लार्ज
