बूस्ट्रैप 5 ग्रिड: स्माल डिवाइस

छोटे उपकरण ग्रिड उदाहरण

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

हमारे पास दो स्तम्भों वाला एक साधारण लेआउट है। छोटे उपकरणों के लिए हम 25% / 75% का स्तम्भ विभाजन चाहते हैं。

छोटे उपकरण एक स्क्रीन चौड़ाई के रूप में परिभाषित किए जाते हैं576 पिक्सल से 767 पिक्सल तक.

छोटे उपकरणों के लिए हम .col-sm-* वर्ग

हम दो स्तम्भों में नीचे दिए गए वर्ग को जोड़ेंगे:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

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

उदाहरण

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

स्वयं को प्रयास करें

ध्यान:समग्रता 12 के बराबर या कम होनी चाहिए (सभी 12 से उपयोग करने की आवश्यकता नहीं है):

33.3% / 66.6% के विभाजन के लिए आपको .col-sm-4 और .col-sm-850% / 50% के विभाजन के लिए आपको .col-sm-6 और .col-sm-6):

उदाहरण

बाटर्स: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>विश्व प्राकृतिक विश्वस्त (WWF), 29 अप्रैल 1961 को स्थापित, उसका प्रतीक एक बड़ा पंडा है ...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>1980 में, WWF आधिकारिक तौर पर चीन में आया, चीन सरकार के आमंत्रण पर चीन में चीनी पंडा और उसके आवास की सुरक्षा कार्य करने के लिए आया ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>विश्व प्राकृतिक विश्वस्त (WWF), 29 अप्रैल 1961 को स्थापित, उसका प्रतीक एक बड़ा पंडा है ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>1980 में, WWF आधिकारिक तौर पर चीन में आया, चीन सरकार के आमंत्रण पर चीन में चीनी पंडा और उसके आवास की सुरक्षा कार्य करने के लिए आया ...</p>
    </div>
  </div>
</div>

स्वयं को प्रयास करें

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

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

यदि स्क्रीन आकार576px से कमस्तम्भ आड़ा स्टैक करेगा:

<!-- दो स्तम्भ: सभी स्क्रीनों पर 50% चौड़ाई, सिवाय अत्यधिक छोटे डिवाइस (100% चौड़ाई) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- चार स्तम्भ: सभी स्क्रीनों पर 25% चौड़ाई, सिवाय अत्यधिक छोटे डिवाइस (100% चौड़ाई) -->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

स्वयं को प्रयास करें

अगले चैप्टर में मध्यम डिवाइस के लिए विभिन्न विभाजन प्रतिशत कैसे जोड़ा जाएगा, दिखाया जाएगा。