कन्टेनरहरू
कन्टेनरहरू बुटस्ट्र्यापको आधारभूत निर्माण ब्लक हुन् जसमा दिइएको यन्त्र वा भ्युपोर्ट भित्र तपाईंको सामग्री समावेश, प्याड र पङ्क्तिबद्ध हुन्छ।
तिनीहरूले कसरी काम गर्छन्
कन्टेनरहरू बुटस्ट्र्यापमा सबैभन्दा आधारभूत लेआउट तत्व हुन् र हाम्रो पूर्वनिर्धारित ग्रिड प्रणाली प्रयोग गर्दा आवश्यक हुन्छ । कन्टेनरहरू समावेश गर्न प्रयोग गरिन्छ, प्याड, र (कहिलेकाहीँ) तिनीहरू भित्र सामग्री केन्द्रित। जबकि कन्टेनरहरू नेस्ट गर्न सकिन्छ, धेरै लेआउटहरूलाई नेस्टेड कन्टेनर आवश्यक पर्दैन।
बुटस्ट्र्याप तीन फरक कन्टेनरहरूसँग आउँछ:
.container, जसलेmax-widthप्रत्येक उत्तरदायी ब्रेकपोइन्टमा सेट गर्दछ.container-fluid, जुनwidth: 100%सबै ब्रेकपोइन्टहरूमा छ.container-{breakpoint}, जुनwidth: 100%निर्दिष्ट ब्रेकपोइन्ट सम्म हुन्छ
तलको तालिकाले प्रत्येक कन्टेनरले मूल र प्रत्येक ब्रेकपोइन्टमा कसरी max-widthतुलना गर्छ भनेर देखाउँछ।.container.container-fluid
तिनीहरूलाई कार्यमा हेर्नुहोस् र तिनीहरूलाई हाम्रो ग्रिड उदाहरणमा तुलना गर्नुहोस् ।
| अतिरिक्त सानो <576px |
सानो ≥576px |
मध्यम ≥768px |
ठूलो ≥992px |
X-ठूलो ≥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>
उत्तरदायी कन्टेनरहरू
उत्तरदायी कन्टेनरहरूले निर्दिष्ट ब्रेकपोइन्ट नपुगेसम्म 100% चौडा वर्ग निर्दिष्ट गर्न अनुमति दिन्छ, त्यसपछि हामी max-widthप्रत्येक उच्च ब्रेकपोइन्टहरूको लागि s लागू गर्छौं। उदाहरणका लागि, ब्रेकपोइन्ट नपुगेसम्म .container-smसुरु गर्न १००% चौडा छ , जहाँ यो , , , र smसँग मापन हुनेछ ।mdlgxlxxl
<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 सेक्सनलाई सन्दर्भ गर्नुहोस् ।