बूटस्ट्रैप ग्रिड - मध्यम उपकरण

बूटस्ट्रैप ग्रिड उदाहरण: मध्यम उपकरण

	Extra small	Small	Medium	Large
Class prefix	`.col-xs`	`.col-sm`	`.col-md`	`.col-lg`
Screen width	<768px	>=768px	>=992px	>=1200px

पिछले अध्याय में, हमने छोटे उपकरणों के लिए कक्षाओं के साथ एक ग्रिड उदाहरण प्रस्तुत किया था। हमने दो डिव (कॉलम) का इस्तेमाल किया और हमने उन्हें 25%/75% का विभाजन दिया:

लेकिन मध्यम उपकरणों पर डिजाइन 50%/50% विभाजन के रूप में बेहतर हो सकता है।

युक्ति: मध्यम उपकरणों को स्क्रीन की चौड़ाई 992 पिक्सेल से 1199 पिक्सेल तक के रूप में परिभाषित किया गया है ।

मध्यम उपकरणों के लिए हम .col-md-*कक्षाओं का उपयोग करेंगे।

अब हम मध्यम उपकरणों के लिए कॉलम की चौड़ाई जोड़ेंगे:

अब बूटस्ट्रैप कहने जा रहा है "छोटे आकार में, उन कक्षाओं को देखें जिनमें -sm- है और उनका उपयोग करें। मध्यम आकार में, -md- वाली कक्षाओं को देखें और उनका उपयोग करें"।

निम्न उदाहरण के परिणामस्वरूप छोटे उपकरणों पर 25%/75% विभाजन और मध्यम (और बड़े) उपकरणों पर 50%/50% विभाजन होगा। अतिरिक्त छोटे उपकरणों पर, यह स्वचालित रूप से ढेर हो जाएगा (100%):

उदाहरण

<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
</div>
</div>

नोट: सुनिश्चित करें कि योग हमेशा 12 तक जुड़ता है।

केवल माध्यम का उपयोग करना

नीचे दिए गए उदाहरण में, हम केवल .col-md-6वर्ग (बिना .col-sm-*) निर्दिष्ट करते हैं। इसका मतलब है कि मध्यम और बड़े उपकरण 50%/50% विभाजित हो जाएंगे - क्योंकि वर्ग बड़ा हो जाता है। हालांकि, छोटे उपकरणों के लिए, यह लंबवत रूप से स्टैक करेगा (100% चौड़ाई):

उदाहरण

<div class="row">
  <div class="col-md-6" style="background-color:yellow;">
    <p>Lorem ipsum...</p>
  </div>
<div class="col-md-6" style="background-color:pink;">
    <p>Sed ut perspiciatis...</p>
  </div>
</div>

अगला अध्याय दिखाता है कि बड़े उपकरणों के लिए एक अलग विभाजन प्रतिशत कैसे जोड़ा जाए।

❮ पहले का अगला ❯

बूटस्ट्रैप 3 ट्यूटोरियल