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