पात्राणि
पात्राणि Bootstrap इत्यस्य मौलिकाः निर्माणखण्डाः सन्ति येषु दत्तयन्त्रस्य अथवा दृश्यपोर्टस्य अन्तः भवतः सामग्रीं समाविष्टं, पैड्, संरेखयति च ।
ते कथं कार्यं कुर्वन्ति
Containers Bootstrap इत्यस्मिन् सर्वाधिकं मूलभूतं layout element अस्ति तथा च अस्माकं default grid system इत्यस्य उपयोगं कुर्वन् आवश्यकम् अस्ति | पात्राणां उपयोगः तेषां अन्तः सामग्रीं समाहितं कर्तुं, पैड् कर्तुं, (कदाचित्) केन्द्रीकृत्य च भवति । यद्यपि पात्राणि नेस्ट् कर्तुं शक्यन्ते तथापि अधिकांशविन्यासेषु नेस्टेड् पात्रस्य आवश्यकता नास्ति ।
बूटस्ट्रैप् त्रीणि भिन्नानि पात्राणि सह आगच्छति:
.container
max-width
, यत् प्रत्येकं प्रतिक्रियाशीलविरामबिन्दौ a सेट् करोति.container-fluid
, यत्width: 100%
सर्वेषु भङ्गबिन्दुषु भवति.container-{breakpoint}
, यत्width: 100%
निर्दिष्टभङ्गबिन्दुपर्यन्तं भवति
अधोलिखिता सारणी दर्शयति यत् प्रत्येकं पात्रस्य max-width
मूलस्य तुलनां कृत्वा .container
प्रत्येकं .container-fluid
भङ्गबिन्दुं पारं कथं भवति।
तान् क्रियायां दृष्ट्वा अस्माकं Grid उदाहरणे तुलनां कुर्वन्तु |
अतिरिक्त लघु <576px |
लघु ≥576px |
मध्यम ≥768px |
बड़ा ≥992px |
X-बड़े ≥1200px |
XX-बड़े ≥1400px |
|
---|---|---|---|---|---|---|
.container |
१००% ९. | ५४०px | ७२०px इति | ९६०px इति | 1140px इति | १३२०px इति |
.container-sm |
१००% ९. | ५४०px | ७२०px इति | ९६०px इति | 1140px इति | १३२०px इति |
.container-md |
१००% ९. | १००% ९. | ७२०px इति | ९६०px इति | 1140px इति | १३२०px इति |
.container-lg |
१००% ९. | १००% ९. | १००% ९. | ९६०px इति | 1140px इति | १३२०px इति |
.container-xl |
१००% ९. | १००% ९. | १००% ९. | १००% ९. | 1140px इति | १३२०px इति |
.container-xxl |
१००% ९. | १००% ९. | १००% ९. | १००% ९. | १००% ९. | १३२०px इति |
.container-fluid |
१००% ९. | १००% ९. | १००% ९. | १००% ९. | १००% ९. | १००% ९. |
पूर्वनिर्धारितं पात्रम्
अस्माकं पूर्वनिर्धारितवर्गः .container
एकः प्रतिक्रियाशीलः, नियत-विस्तार-पात्रः अस्ति, अर्थात् max-width
प्रत्येकस्मिन् breakpoint मध्ये तस्य परिवर्तनम् ।
<div class="container">
<!-- Content here -->
</div>
प्रतिक्रियाशील पात्र
प्रतिक्रियाशीलपात्राणि भवन्तं निर्दिष्टविरामबिन्दुपर्यन्तं शतप्रतिशतविस्तृतं वर्गं निर्दिष्टुं शक्नुवन्ति, तदनन्तरं वयं max-width
उच्चतरविरामबिन्दुषु प्रत्येकस्य कृते 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>
सस्स
यथा उपरि दर्शितं, 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 विभागं पश्यन्तु ।