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