कंटेनर
कंटेनर बूटस्ट्रैप दा इक बुनियादी बिल्डिंग ब्लॉक ऐ जेह् ड़ा कुसै दित्ते गेदे डिवाइस जां व्यूपोर्ट दे अंदर तुंदी सामग्री गी शामल करदा ऐ, पैड करदा ऐ ते संरेखित करदा ऐ।
किवें कम्म करदे ने
कंटेनर बूटस्ट्रैप च सारें शा बुनियादी लेआउट तत्व न ते साढ़े डिफ़ॉल्ट ग्रिड सिस्टम दा इस्तेमाल करदे बेल्लै जरूरी न . कंटेनरें दा इस्तेमाल उंदे अंदर सामग्री गी समाहित करने, पैड करने, ते (कदें-कदें) केंद्रत करने लेई कीता जंदा ऐ। जदके कंटेनरें गी नेस्ट कीता जाई सकदा ऐ, तां मते सारे लेआउटें गी नेस्टेड कंटेनर दी लोड़ नेईं ऐ.
बूटस्ट्रैप त्रै बक्ख-बक्ख कंटेनरें कन्नै औंदा ऐ:
.container
, जेह् ड़ाmax-width
हर प्रतिक्रियाशील ब्रेकपॉइंट पर इक सेट करदा ऐ.container-fluid
, जो किwidth: 100%
हर ब्रेकपॉइंट पर है.container-{breakpoint}
, जेह् ड़ाwidth: 100%
निर्दिश्ट ब्रेकपॉइंट तगर ऐ
हेठ दित्ती गेदी तालिका च दस्सेआ गेआ ऐ जे हर इक कंटेनर दी max-width
तुलना मूल कन्नै .container
ते .container-fluid
हर ब्रेकपॉइंट दे पार किस चाल्ली कीती जंदी ऐ।
इन्हें गी एक्शन च दिक्खो ते साढ़े ग्रिड उदाहरण च उंदी तुलना करो .
अतिरिक्त छोटा <576px |
छोटे ≥576px ऐ |
मध्यम ≥768px ऐ |
बड़ा ≥992px ऐ |
एक्स-बड़े ≥1200px ऐ |
XX-बड़े ≥1400px ऐ |
|
---|---|---|---|---|---|---|
.container |
100% ऐ | 540पीएक्स ऐ | 720पीएक्स ऐ | 960पीएक्स ऐ | 1140पीएक्स ऐ | 1320पीएक्स ऐ |
.container-sm |
100% ऐ | 540पीएक्स ऐ | 720पीएक्स ऐ | 960पीएक्स ऐ | 1140पीएक्स ऐ | 1320पीएक्स ऐ |
.container-md |
100% ऐ | 100% ऐ | 720पीएक्स ऐ | 960पीएक्स ऐ | 1140पीएक्स ऐ | 1320पीएक्स ऐ |
.container-lg |
100% ऐ | 100% ऐ | 100% ऐ | 960पीएक्स ऐ | 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% चौड़ा ऐ , जित्थै एह् , , , ते sm
कन्नै स्केल करग ।md
lg
xl
xxl
<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
);
सस्स गी कस्टमाइज करने दे अलावा, तुस साढ़े सस्स मिक्सिन कन्नै अपने कंटेनर बी बनाई सकदे ओ।
// 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 खंड दा संदर्भ लैओ .