बूस्ट्रैप 5 कंटेनर

बूस्ट्रैप 5 कंटेनर

पिछले अध्याय में आपने सीखा, ब्रॉस्टाप को वेबसाइट सामग्री को रूपांतरित करने के लिए एक वैकल्पिक तत्व की आवश्यकता है।

हम कंटेनर में सामग्री भरते हैं और दो कंटेनर कक्ष हैं:

  • .container को रिस्पांसिव, स्थिर चौड़ाई वाले कंटेनर की प्रदान करता है
  • .container-fluid को व्यापक कंटेनर की पूरी दृश्यांतर चौड़ाई प्रदान करता है

स्थिर कंटेनर

का उपयोग .container को रिस्पांसिव, निर्धारित चौड़ाई वाले कंटेनर के लिए कला

ध्यान दें कि इसकी चौड़ाई (max-width): विभिन्न स्क्रीन आकारों पर परिवर्तित होता है:

एक्सट्रा स्माल
<576px 		स्माल
≥576px 		मीडियम
≥768px 		लार्ज
≥992px 		एक्स्ट्रा लार्ज
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

नीचे के उदाहरण को खोलें और ब्राउज़र विंडो का आकार संचालित करें, ताकि विभिन्न ब्रेकप्ट पर कंटेनर चौड़ाई के परिवर्तन को देख सकें:

उदाहरण

<div class="container">
  <h1>मेरा पहला Bootstrap पृष्ठ</h1>
  <p>यह कुछ पाठ है。</p>
</div>

आप खुद से प्रयोग करें

XXL ब्रेकप्ट (≥1400px) ब्रॉस्टाप 5 में नया है, जबकि ब्रॉस्टाप 4 में सबसे बड़ा ब्रेकप्ट Extra large (≥1200px) है।

फ्लुइड कंटेनर

का उपयोग .container-fluid को व्यापक कंटेनर के लिए कला, जो हमेशा पूरे स्क्रीन चौड़ाई को क्रमशः कवर करता है (width हमेशा 100%）：

उदाहरण

<div class="container-fluid">
  <h1>मेरा पहला Bootstrap पृष्ठ</h1>
  <p>यह कुछ पाठ है。</p>
</div>

आप खुद से प्रयोग करें

कंटेनर भर

मूलभूत रूप से, कंटेनर के पास बाईं-दाईं भर होते हैं (बाईं-दाईं आंतरिक मार्ग), शीर्ष और नीचे का भर नहीं होता (ऊपर-नीचे आंतरिक मार्ग)। इसलिए हम अक्सर spacing उपयोगी（उपयोगी हैं），जैसे अतिरिक्त भर और किनारा (मार्ग), इसे बेहतर दिखाने के लिए। उदाहरण में，.pt-5 का अर्थ है "एक बड़े डिवशीर्ष भर：

उदाहरण

<div class="container pt-5"></div>

आप खुद से प्रयोग करें

कंटेनर किनारा और रंग

कंटेनर के साथ उपयोग की गई अन्य टूल्स, जैसे किनारा और रंग, भी बार-बार इस्तेमाल की जाती हैं:

उदाहरण

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

आप खुद से प्रयोग करें

आप बाद के अध्यायों में रंग और किनारा टूल्स के बारे में अधिक जानेंगे。

रिस्पोन्सिव कंटेनर

आप इसके साथ एक और उपयोग कर सकते हैं .container-sm|md|lg|xl क्लास का उपयोग करके निर्धारित करती है कि कब कंटेनर को प्रतिक्रियाशील होना चाहिए।

कंटेनर की max-width विभिन्न स्क्रीन आकार/विन्दु पर बदलेगी:

क्लास एक्सट्रा स्माल
<576px		 स्माल
≥576px		 मीडियम
≥768px		 लार्ज
≥992px		 एक्सट्रा लार्ज
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

उदाहरण

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

आप खुद से प्रयोग करें