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