कन्टेनरहरू

तिनीहरूले कसरी काम गर्छन्

कन्टेनरहरू बुटस्ट्र्यापमा सबैभन्दा आधारभूत लेआउट तत्व हुन् र हाम्रो पूर्वनिर्धारित ग्रिड प्रणाली प्रयोग गर्दा आवश्यक हुन्छ । कन्टेनरहरू समावेश गर्न प्रयोग गरिन्छ, प्याड, र (कहिलेकाहीँ) तिनीहरू भित्र सामग्री केन्द्रित। जबकि कन्टेनरहरू नेस्ट गर्न सकिन्छ, धेरै लेआउटहरूलाई नेस्टेड कन्टेनर आवश्यक पर्दैन।

बुटस्ट्र्याप तीन फरक कन्टेनरहरूसँग आउँछ:

• .container, जसले max-widthप्रत्येक उत्तरदायी ब्रेकपोइन्टमा सेट गर्दछ
• .container-{breakpoint}, जुन width: 100%निर्दिष्ट ब्रेकपोइन्ट सम्म हुन्छ
• .container-fluid, जुन width: 100%सबै ब्रेकपोइन्टहरूमा छ

तलको तालिकाले प्रत्येक कन्टेनरले मूल र प्रत्येक ब्रेकपोइन्टमा कसरी max-widthतुलना गर्छ भनेर देखाउँछ।.container.container-fluid

तिनीहरूलाई कार्यमा हेर्नुहोस् र तिनीहरूलाई हाम्रो ग्रिड उदाहरणमा तुलना गर्नुहोस् ।

पूर्वनिर्धारित कन्टेनर

हाम्रो पूर्वनिर्धारित .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 सेक्सनलाई सन्दर्भ गर्नुहोस् ।