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