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