बूटस्ट्रैप 4 कंटेनर
कंटेनरों
आपने पिछले अध्याय से सीखा है कि बूटस्ट्रैप को साइट सामग्री को लपेटने के लिए एक युक्त तत्व की आवश्यकता होती है।
कंटेनरों का उपयोग उनके अंदर की सामग्री को पैड करने के लिए किया जाता है, और दो कंटेनर वर्ग उपलब्ध हैं:
.containerवर्ग एक उत्तरदायी निश्चित चौड़ाई वाला कंटेनर प्रदान करता है- व्यूपोर्ट की पूरी चौड़ाई में फैले
.container-fluidवर्ग एक पूर्ण चौड़ाई वाला कंटेनर प्रदान करता है
फिक्स्ड कंटेनर
.containerप्रतिक्रियाशील, निश्चित-चौड़ाई वाला कंटेनर बनाने के लिए कक्षा का उपयोग करें ।
max-widthध्यान दें कि विभिन्न स्क्रीन आकारों पर इसकी चौड़ाई ( ) बदल जाएगी:
|
अतिरिक्त छोटा <576px |
छोटा 576px |
मध्यम 768px |
बड़ा 992px |
अतिरिक्त बड़ा ≥1200px |
|
|---|---|---|---|---|---|
| अधिकतम चौड़ाई | 100% | 540px | 720px | 960px | 1140पीएक्स |
नीचे दिया गया उदाहरण खोलें और ब्राउज़र विंडो का आकार बदलें यह देखने के लिए कि कंटेनर की चौड़ाई अलग-अलग ब्रेकप्वाइंट पर बदल जाएगी:
उदाहरण
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
द्रव कंटेनर
एक पूर्ण चौड़ाई वाला कंटेनर बनाने के लिए कक्षा का उपयोग करें .container-fluid, जो हमेशा स्क्रीन की पूरी चौड़ाई को फैलाएगा ( widthहमेशा है 100%):
उदाहरण
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
कंटेनर पैडिंग
डिफ़ॉल्ट रूप से, कंटेनर में 15px बाएँ और दाएँ पैडिंग होते हैं, जिसमें कोई ऊपर या नीचे पैडिंग नहीं होती है। इसलिए, हम अक्सर स्पेसिंग यूटिलिटीज का उपयोग करते हैं , जैसे अतिरिक्त पैडिंग और मार्जिन उन्हें और भी बेहतर दिखाने के लिए। उदाहरण के लिए, .pt-3इसका अर्थ है "16px का शीर्ष पैडिंग जोड़ें":
उदाहरण
<div class="container pt-3"></div>
आप हमारे बीएस4 यूटिलिटीज चैप्टर में स्पेसिंग यूटिलिटीज के बारे में बहुत कुछ जानेंगे ।
कंटेनर सीमा और रंग
अन्य उपयोगिताओं, जैसे कि बॉर्डर और रंग, का भी अक्सर कंटेनरों के साथ उपयोग किया जाता है:
उदाहरण
मेरा पहला बूटस्ट्रैप पेज
इस कंटेनर में एक बॉर्डर और कुछ अतिरिक्त पैडिंग और मार्जिन हैं।
मेरा पहला बूटस्ट्रैप पेज
इस कंटेनर में एक गहरा पृष्ठभूमि रंग और एक सफेद टेक्स्ट है, और कुछ अतिरिक्त पैडिंग और मार्जिन हैं।
मेरा पहला बूटस्ट्रैप पेज
इस कंटेनर में एक नीला पृष्ठभूमि रंग और एक सफेद टेक्स्ट, और कुछ अतिरिक्त पैडिंग और मार्जिन हैं।
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
आप हमारे बीएस4 कलर्स चैप्टर और बीएस4 यूटिलिटीज चैप्टर में रंगों और बॉर्डर यूटिलिटीज के बारे में बहुत कुछ जानेंगे ।
उत्तरदायी कंटेनर
.container-sm|md|lg|xlआप उत्तरदायी कंटेनर बनाने के लिए कक्षाओं का भी उपयोग कर सकते हैं ।
max-widthविभिन्न स्क्रीन आकार/व्यूपोर्ट पर कंटेनर का परिवर्तन होगा :
| कक्षा |
अतिरिक्त छोटा <576px |
छोटा 576px |
मध्यम 768px |
बड़ा 992px |
अतिरिक्त बड़ा ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140पीएक्स |
.container-md |
100% | 100% | 720px | 960px | 1140पीएक्स |
.container-lg |
100% | 100% | 100% | 960px | 1140पीएक्स |
.container-xl |
100% | 100% | 100% | 100% | 1140पीएक्स |
उदाहरण
<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>
क्या तुम्हें पता था?
W3.CSS बूटस्ट्रैप 4 का एक उत्कृष्ट विकल्प है।
W3.CSS छोटा, तेज़ और उपयोग में आसान है।
यदि आप W3.CSS सीखना चाहते हैं, तो हमारे W3.CSS ट्यूटोरियल पर जाएँ ।