कंटेनर के बा
कंटेनर बूटस्ट्रैप के एगो मौलिक बिल्डिंग ब्लॉक हवे जेह में कौनों दिहल गइल डिवाइस भा व्यूपोर्ट के भीतर आपके सामग्री के समाहित, पैड आ संरेखित कइल जाला।
उ लोग कईसे काम करेला
कंटेनर बूटस्ट्रैप में सबसे बेसिक लेआउट तत्व ह आ हमनी के डिफ़ॉल्ट ग्रिड सिस्टम के इस्तेमाल करत घरी एकर जरूरत होला . कंटेनर सभ के इस्तेमाल सामग्री के अपना भीतर रखे, पैड करे आ (कबो-कबो) केंद्रित करे खातिर कइल जाला। जबकि कंटेनर सभ के नेस्ट कइल जा सके ला, ज्यादातर लेआउट सभ में नेस्टेड कंटेनर के जरूरत ना पड़े ला।
बूटस्ट्रैप तीन अलग-अलग कंटेनर के संगे आवेला:
.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 के बा | 1140px के बा | 1320px के बा |
.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 के बा |
.container-fluid |
100% के बा। | 100% के बा। | 100% के बा। | 100% के बा। | 100% के बा। | 100% के बा। |
डिफ़ॉल्ट कंटेनर बा
हमनी के डिफ़ॉल्ट .containerक्लास एगो रिस्पांसिव, फिक्स-विड्थ कंटेनर हवे, मतलब max-widthहर ब्रेकपॉइंट पर एकर बदलाव।
<div class="container">
<!-- Content here -->
</div>
रिस्पांसिव कंटेनर के बा
max-widthरिस्पांसिव कंटेनर रउआँ के एगो क्लास निर्दिष्ट करे के अनुमति देला जवन 100% चौड़ा होखे जबले कि निर्दिष्ट ब्रेकपॉइंट पर ना पहुँच जाला, एकरे बाद हमनी के हर उच्च ब्रेकपॉइंट खातिर 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 खंड देखल जाय ।