पात्रां
कंटेनर हे Bootstrap चो एक मुळावो बिल्डिंग ब्लॉक आसा जो दिल्ल्या डिव्हायसा भितर वा व्यूपोर्टा भितर तुमची सामुग्री आसता, पॅड करता आनी संरेखित करता.
ते कशे काम करतात
कंटेनर हे बूटस्ट्रॅपांतले सगळ्यांत मुळावे मांडावळ घटक आसात आनी आमची मुलभूत ग्रिड प्रणाली वापरतना तांकां जाय पडटात . कंटेनरांचो उपेग तातूंत आशय दवरपाखातीर, पॅड करपाखातीर आनी (केन्ना केन्नाय) केंद्रीत करपाखातीर करतात. कंटेनरांक नेस्ट करूं येता, जाल्यार चडशा मांडावळींक नेस्टेड कंटेनराची गरज नासता.
बूटस्ट्रॅप तीन वेगवेगळ्या कंटेनरां वांगडा येता:
.container
, जेंmax-width
दर एका प्रतिसाद दिवपी ब्रेकपॉइंटाचेर एक सेट करता.container-fluid
, जेंwidth: 100%
सगळ्या ब्रेकपॉइंटांचेर आसता.container-{breakpoint}
, जेंwidth: 100%
निर्दिश्ट केल्ल्या ब्रेकपॉइंट मेरेन आसता
सकयल दिल्लें कोश्टक दरेक कंटेनराची मूळ आनी दर एका ब्रेकपॉइंटाच्या आड कशी max-width
तुळा करता तें दाखयता..container
.container-fluid
त्यो कृतींत पळयात आनी आमच्या ग्रिड उदाहरणांत तांची तुळा करात .
अतिरिक्त ल्हान <576px |
ल्हान ≥576px |
मध्यम ≥768px आसा |
व्हड ≥992px |
एक्स-लार्ज ≥1200px |
XX- व्हड ≥1400px |
|
---|---|---|---|---|---|---|
.container |
१००% हें . | 540px आसा | 720px इतलें आसा | 960px आसा | 1140px आसा | 1320px आसा |
.container-sm |
१००% हें . | 540px आसा | 720px इतलें आसा | 960px आसा | 1140px आसा | 1320px आसा |
.container-md |
१००% हें . | १००% हें . | 720px इतलें आसा | 960px आसा | 1140px आसा | 1320px आसा |
.container-lg |
१००% हें . | १००% हें . | १००% हें . | 960px आसा | 1140px आसा | 1320px आसा |
.container-xl |
१००% हें . | १००% हें . | १००% हें . | १००% हें . | 1140px आसा | 1320px आसा |
.container-xxl |
१००% हें . | १००% हें . | १००% हें . | १००% हें . | १००% हें . | 1320px आसा |
.container-fluid |
१००% हें . | १००% हें . | १००% हें . | १००% हें . | १००% हें . | १००% हें . |
मुलभूत कंटेनर
आमचो मुलभूत .container
वर्ग प्रतिसाद दिवपी, थारावीक-रुंदायेचो कंटेनर आसा, म्हळ्यार max-width
दरेक ब्रेकपॉइंटाचेर ताचे बदल.
<div class="container">
<!-- Content here -->
</div>
प्रतिसाद दिवपी पात्रां
प्रतिसाद दिवपी कंटेनर तुमकां निर्दिश्ट केल्लो ब्रेकपॉइंट मेरेन पावमेरेन 100% रुंद आशिल्लो वर्ग निर्देशीत करपाक परवानगी दितात, ताचे उपरांत आमी 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>
सास
वयर दाखयल्ले प्रमाणें, तुमकां जाय आशिल्लीं मांडावळी तयार करपाक मदत करपाक बूटस्ट्रॅप पूर्वनिर्धारीत कंटेनर वर्गांची माळ तयार करता. _variables.scss
तुमी हे पूर्वनिर्धारीत कंटेनर वर्ग पसंतीचे करूंक शकतात, तांकां शक्त दिवपी Sass नकासो (तांत मेळटा) बदलून :
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Sass सानुकूल करपा वांगडाच, तुमी आमच्या Sass mixin वरवीं तुमचे स्वताचे कंटेनर तयार करूंक शकतात.
// 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 दस्तावेजीकरणाचो Sass विभाग पळयात .