बूस्ट्रैप 5 ग्रिड: अधिकतम डिवाइस

एक्स्ट्रा लार्ज उपकरण ग्रिड उदाहरण

एक्स्स्माल स्माल मध्यम लार्ज एक्स्ट्रा लार्ज XXL
क्लास पूर्वसूचक .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
स्क्रीन चौड़ाई <576px >=576px >=768px >=992px >=1200px >=1400px

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

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

बड़े उपकरणों पर 20% / 80% विभाजन की डिजाइन को बेहतर हो सकती है。

एक्स्ट्रा लार्ज उपकरणों को स्क्रीन चौड़ाई के रूप में परिभाषित किया जाता है 1200 पिक्सल से अधिक。

xlarge उपकरणों के लिए हम .col-xl-* क्लासः

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

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

उदाहरण

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>विश्व प्राकृतिक अधिकार फाउंडेशन (WWF), 29 अप्रैल 1961 को स्थापित, उसका प्रतीक एक बैंगाल तिगरी है ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>1980 में, WWF आधिकारिक तौर पर चीन में आया, चीन सरकार के आमंत्रण पर चीन में बैंगाल तिगरी और उसके आवास की सुरक्षा कार्य करने के लिए आया ...</p>
    </div>
  </div>
</div>

खुद से प्रयास करें

ध्यान:सुनिश्चित करें कि कुल हमेशा 12 हो।

XLarge का उपयोग करते हैं

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

उदाहरण

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>विश्व प्राकृतिक अधिकार फाउंडेशन (WWF), 29 अप्रैल 1961 को स्थापित, उसका प्रतीक एक बैंगाल तिगरी है ...</p>
    </div>
    <div class="col-xl-6">
      <p>1980 में, WWF आधिकारिक तौर पर चीन में आया, चीन सरकार के आमंत्रण पर चीन में बैंगाल तिगरी और उसके आवास की सुरक्षा कार्य करने के लिए आया ...</p>
    </div>
  </div>
</div>

खुद से प्रयास करें

स्वचालित विन्यास स्तम्भ

ब्रॉस्टक 5 में, सभी डिवाइसों के लिए समान चौड़ाई वाले स्तम्भ बनाने के लिए एक सरल तरीका है: केवल .col-xl-* संख्या को हटाएं और केवल col एलीमेंट पर इस्तेमाल करें .col-xl क्लास। ब्रॉस्टक उसे पहचानेगा कि कितने स्तम्भ हैं और प्रत्येक स्तम्भ को एकसी चौड़ाई मिलेगी。

यदि स्क्रीन आकार1200px से कमकी ओर से स्तम्भ अनुक्रमित बैठेंगे:

<!-- दो स्तम्भ: अधिकांश डिवाइसों में 50% चौड़ाई है -->
<div class="row">
  <div class="col-xl">1 of 2</div>
  <div class="col-xl">2 of 2</div>
</div>
<!-- चार स्तम्भ: अधिकांश डिवाइसों में 25% चौड़ाई है -->
<div class="row">
  <div class="col-xl">1 of 4</div>
  <div class="col-xl">2 of 4</div>
  <div class="col-xl">3 of 4</div>
  <div class="col-xl">4 of 4</div>
</div>

खुद से प्रयास करें