पात्राणि

ते कथं कार्यं कुर्वन्ति

Containers Bootstrap इत्यस्मिन् सर्वाधिकं मूलभूतं layout element अस्ति तथा च अस्माकं default grid system इत्यस्य उपयोगं कुर्वन् आवश्यकम् अस्ति | पात्राणां उपयोगः तेषां अन्तः सामग्रीं समाहितं कर्तुं, पैड् कर्तुं, (कदाचित्) केन्द्रीकृत्य च भवति । यद्यपि पात्राणि नेस्ट् कर्तुं शक्यन्ते तथापि अधिकांशविन्यासेषु नेस्टेड् पात्रस्य आवश्यकता नास्ति ।

बूटस्ट्रैप् त्रीणि भिन्नानि पात्राणि सह आगच्छति:

• .containermax-width, यत् प्रत्येकं प्रतिक्रियाशीलविरामबिन्दौ a सेट् करोति
• .container-{breakpoint}, यत् width: 100%निर्दिष्टभङ्गबिन्दुपर्यन्तं भवति
• .container-fluid, यत् width: 100%सर्वेषु भङ्गबिन्दुषु भवति

अधोलिखिता सारणी दर्शयति यत् प्रत्येकं पात्रस्य max-widthमूलस्य तुलनां कृत्वा .containerप्रत्येकं .container-fluidभङ्गबिन्दुं पारं कथं भवति।

तान् क्रियायां दृष्ट्वा अस्माकं Grid उदाहरणे तुलनां कुर्वन्तु |

पूर्वनिर्धारितं पात्रम्

अस्माकं पूर्वनिर्धारितवर्गः .containerएकः प्रतिक्रियाशीलः, नियत-विस्तार-पात्रः अस्ति, अर्थात् max-widthप्रत्येकस्मिन् breakpoint मध्ये तस्य परिवर्तनम् ।

<div class="container">
  <!-- Content here -->
</div>

प्रतिक्रियाशील पात्र

प्रतिक्रियाशीलपात्राणि भवन्तं निर्दिष्टविरामबिन्दुपर्यन्तं शतप्रतिशतविस्तृतं वर्गं निर्दिष्टुं शक्नुवन्ति, तदनन्तरं वयं max-widthउच्चतरविरामबिन्दुषु प्रत्येकस्य कृते s प्रयोजयामः । यथा, यावत् भङ्गबिन्दुः न प्राप्यते .container-smतावत् आरभ्यतुं 100% विस्तृतः अस्ति, यत्र , , , तथा च इत्यनेन सह स्केल अप करिष्यति ।smmdlgxlxxl

<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>

सस्स

यथा उपरि दर्शितं, Bootstrap पूर्वनिर्धारितपात्रवर्गाणां श्रृङ्खलां जनयति यत् भवतां इष्टानां विन्यासानां निर्माणे सहायकं भवति । भवान् एतान् पूर्वनिर्धारितपात्रवर्गान् अनुकूलितुं शक्नोति Sass मानचित्रं (found in _variables.scss) परिवर्त्य यत् तान् शक्तिं ददाति:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sass इत्यस्य अनुकूलनस्य अतिरिक्तं, भवान् अस्माकं Sass mixin इत्यनेन स्वकीयानि containers अपि निर्मातुम् अर्हति ।

// 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 मानचित्रं चर च कथं परिवर्तयितव्यम् इति विषये अधिकसूचनार्थं उदाहरणार्थं च कृपया Grid documentation इत्यस्य Sass विभागं पश्यन्तु ।