कंटेनरों
कंटेनर बूटस्ट्रैप का एक मूलभूत बिल्डिंग ब्लॉक है जिसमें किसी दिए गए डिवाइस या व्यूपोर्ट में आपकी सामग्री शामिल, पैड और संरेखित होती है।
वे कैसे काम करते हैं
कंटेनर बूटस्ट्रैप में सबसे बुनियादी लेआउट तत्व हैं और हमारे डिफ़ॉल्ट ग्रिड सिस्टम का उपयोग करते समय इसकी आवश्यकता होती है । कंटेनरों का उपयोग उनके भीतर सामग्री को रखने, पैड करने और (कभी-कभी) करने के लिए किया जाता है। जबकि कंटेनरों को नेस्ट किया जा सकता है, अधिकांश लेआउट के लिए नेस्टेड कंटेनर की आवश्यकता नहीं होती है।
बूटस्ट्रैप तीन अलग-अलग कंटेनरों के साथ आता है:
.containermax-width, जो प्रत्येक उत्तरदायी विराम बिंदु पर सेट करता है.container-fluid, जोwidth: 100%सभी विराम बिंदुओं पर है.container-{breakpoint}, जोwidth: 100%निर्दिष्ट विराम बिंदु तक है
नीचे दी गई तालिका दर्शाती है कि प्रत्येक कंटेनर की max-widthतुलना मूल .containerऔर .container-fluidप्रत्येक ब्रेकपॉइंट से कैसे की जाती है।
उन्हें क्रिया में देखें और हमारे ग्रिड उदाहरण में उनकी तुलना करें ।
| अतिरिक्त छोटा <576px |
छोटा 576px |
मध्यम 768px |
बड़ा 992px |
एक्स-लार्ज 1200px |
XX-बड़ा ≥1400px |
|
|---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140पीएक्स | 1320पीएक्स |
.container-sm |
100% | 540px | 720px | 960px | 1140पीएक्स | 1320पीएक्स |
.container-md |
100% | 100% | 720px | 960px | 1140पीएक्स | 1320पीएक्स |
.container-lg |
100% | 100% | 100% | 960px | 1140पीएक्स | 1320पीएक्स |
.container-xl |
100% | 100% | 100% | 100% | 1140पीएक्स | 1320पीएक्स |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320पीएक्स |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
डिफ़ॉल्ट कंटेनर
हमारा डिफ़ॉल्ट .containerवर्ग एक प्रतिक्रियाशील, निश्चित-चौड़ाई वाला कंटेनर है, जिसका अर्थ है max-widthकि प्रत्येक ब्रेकपॉइंट पर इसके परिवर्तन।
<div class="container">
<!-- Content here -->
</div>
उत्तरदायी कंटेनर
उत्तरदायी कंटेनर आपको एक वर्ग निर्दिष्ट करने की अनुमति देते हैं जो निर्दिष्ट ब्रेकपॉइंट तक पहुंचने तक 100% चौड़ा है, जिसके बाद हम max-widthप्रत्येक उच्च ब्रेकपॉइंट के लिए s लागू करते हैं। उदाहरण के लिए, ब्रेकपॉइंट तक पहुंचने .container-smतक शुरू करने के लिए 100% चौड़ा है , जहां यह , , , और के साथ बढ़ेगा ।smmdlgxlxxl
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
द्रव कंटेनर
.container-fluidव्यूपोर्ट की पूरी चौड़ाई में फैले एक पूर्ण चौड़ाई वाले कंटेनर के लिए उपयोग करें ।
<div class="container-fluid">
...
</div>
सास
जैसा कि ऊपर दिखाया गया है, बूटस्ट्रैप पूर्वनिर्धारित कंटेनर वर्गों की एक श्रृंखला उत्पन्न करता है जो आपको इच्छित लेआउट बनाने में मदद करता है। आप इन पूर्वनिर्धारित कंटेनर वर्गों को Sass मानचित्र (में पाया गया) को संशोधित करके अनुकूलित कर सकते हैं _variables.scssजो उन्हें शक्ति प्रदान करता है:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Sass को अनुकूलित करने के अलावा, आप हमारे Sass मिश्रण के साथ अपने स्वयं के कंटेनर भी बना सकते हैं।
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
हमारे Sass मानचित्रों और चरों को संशोधित करने के तरीके के बारे में अधिक जानकारी और उदाहरणों के लिए, कृपया ग्रिड दस्तावेज़ीकरण का Sass अनुभाग देखें ।