कंटेनर

ते कसे काम करतात

कंटेनर हे बूटस्ट्रॅपमधील सर्वात मूलभूत लेआउट घटक आहेत आणि आमची डीफॉल्ट ग्रिड सिस्टीम वापरताना आवश्यक आहेत . कंटेनरचा वापर त्यांच्यामधील सामग्री समाविष्ट करण्यासाठी, पॅड करण्यासाठी आणि (कधीकधी) मध्यभागी ठेवण्यासाठी केला जातो. कंटेनर नेस्टेड केले जाऊ शकतात, परंतु बहुतेक लेआउट्सना नेस्टेड कंटेनरची आवश्यकता नसते.

बूटस्ट्रॅप तीन वेगवेगळ्या कंटेनरसह येतो:

• .container, जे max-widthप्रत्येक प्रतिसादात्मक ब्रेकपॉइंटवर सेट करते
• .container-fluid, जे width: 100%सर्व ब्रेकपॉइंट्सवर आहे
• .container-{breakpoint}, जे width: 100%निर्दिष्ट ब्रेकपॉइंटपर्यंत आहे

खालील सारणी स्पष्ट करते की प्रत्येक कंटेनरची मूळ आणि प्रत्येक ब्रेकपॉइंटशी कशी max-widthतुलना होते ..container.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>

सस

वर दर्शविल्याप्रमाणे, बूटस्ट्रॅप तुम्हाला हवे असलेले लेआउट तयार करण्यात मदत करण्यासाठी पूर्वनिर्धारित कंटेनर वर्गांची मालिका व्युत्पन्न करते. तुम्ही या पूर्वनिर्धारित कंटेनर वर्गांना सामर्थ्य देणारा 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 विभागाचा संदर्भ घ्या .