ग्रीड प्रणाली
बारा कॉलम सिस्टीम, पाच डीफॉल्ट रिस्पॉन्सिव्ह टियर, Sass व्हेरिएबल्स आणि मिक्सिन्स आणि डझनभर पूर्वनिर्धारित क्लासेसमुळे सर्व आकार आणि आकारांचे लेआउट तयार करण्यासाठी आमचे शक्तिशाली मोबाइल-फर्स्ट फ्लेक्सबॉक्स ग्रिड वापरा.
हे कसे कार्य करते
बूटस्ट्रॅपची ग्रिड प्रणाली सामग्री लेआउट आणि संरेखित करण्यासाठी कंटेनर, पंक्ती आणि स्तंभांची मालिका वापरते. हे flexbox सह तयार केले आहे आणि पूर्णपणे प्रतिसाद देणारे आहे. खाली एक उदाहरण आहे आणि ग्रिड कसे एकत्र येतात याचे सखोल स्वरूप आहे.
फ्लेक्सबॉक्ससाठी नवीन किंवा अपरिचित? पार्श्वभूमी, शब्दावली, मार्गदर्शक तत्त्वे आणि कोड स्निपेटसाठी ही CSS ट्रिक्स फ्लेक्सबॉक्स मार्गदर्शक वाचा .
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
वरील उदाहरण आमच्या पूर्वनिर्धारित ग्रिड वर्गांचा वापर करून लहान, मध्यम, मोठ्या आणि अतिरिक्त मोठ्या उपकरणांवर तीन समान-रुंदीचे स्तंभ तयार करते. ते स्तंभ पृष्ठामध्ये पालकासह मध्यभागी असतात .container
.
तो खंडित करणे, ते कसे कार्य करते ते येथे आहे:
- कंटेनर तुमच्या साइटची सामग्री मध्यभागी आणि क्षैतिजरित्या पॅड करण्यासाठी एक साधन प्रदान करतात.
.container
रिस्पॉन्सिव्ह पिक्सेल रुंदीसाठी किंवा सर्व व्ह्यूपोर्ट आणि डिव्हाइस आकारांसाठी.container-fluid
वापरा .width: 100%
- पंक्ती स्तंभांसाठी आवरण आहेत. प्रत्येक स्तंभामध्ये क्षैतिज
padding
(ज्याला गटर म्हणतात) त्यांच्या दरम्यानची जागा नियंत्रित केली जाते. हेpadding
नंतर पंक्तींवर नकारात्मक मार्जिनसह प्रतिवाद केले जाते. अशा प्रकारे, तुमच्या स्तंभातील सर्व सामग्री दृष्यदृष्ट्या डाव्या बाजूला खाली संरेखित केली जाते. - ग्रिड लेआउटमध्ये, सामग्री स्तंभांमध्ये ठेवली जाणे आवश्यक आहे आणि फक्त स्तंभ हे पंक्तींचे तात्काळ मूल असू शकतात.
- फ्लेक्सबॉक्सचे आभार, निर्दिष्ट नसलेले ग्रिड स्तंभ
width
समान रुंदीच्या स्तंभ म्हणून स्वयंचलितपणे लेआउट करतील. उदाहरणार्थ, विलची चार उदाहरणे.col-sm
आपोआप लहान ब्रेकपॉईंटपासून 25% रुंद होतील. अधिक उदाहरणांसाठी स्वयं-लेआउट स्तंभ विभाग पहा . - स्तंभ वर्ग तुम्हाला प्रति पंक्ती संभाव्य १२ पैकी किती स्तंभ वापरू इच्छिता हे सूचित करतात. म्हणून, जर तुम्हाला तीन समान-रुंदीचे स्तंभ हवे असतील, तर तुम्ही वापरू शकता
.col-4
. - स्तंभ
width
s टक्केवारीत सेट केले जातात, त्यामुळे ते नेहमी त्यांच्या मूळ घटकाच्या तुलनेत द्रव आणि आकाराचे असतात. padding
वैयक्तिक स्तंभांमध्ये गटर तयार करण्यासाठी स्तंभ क्षैतिज असतात, तथापि, तुम्ही वर सहmargin
पंक्ती आणि स्तंभांमधून काढू शकता .padding
.no-gutters
.row
- ग्रिड रिस्पॉन्सिव्ह करण्यासाठी, पाच ग्रिड ब्रेकपॉइंट्स आहेत, प्रत्येक रिस्पॉन्सिव्ह ब्रेकपॉइंटसाठी एक : सर्व ब्रेकपॉइंट्स (अतिरिक्त लहान), लहान, मध्यम, मोठे आणि अतिरिक्त मोठे.
- ग्रिड ब्रेकपॉइंट्स किमान रुंदीच्या मीडिया क्वेरीवर आधारित असतात, म्हणजे ते त्या एका ब्रेकपॉइंटवर आणि त्यावरील सर्वांवर लागू होतात (उदा.
.col-sm-4
लहान, मध्यम, मोठ्या आणि अतिरिक्त मोठ्या उपकरणांना लागू होते, परंतु प्रथमxs
ब्रेकपॉइंट नाही). - अधिक सिमेंटिक मार्कअपसाठी तुम्ही पूर्वनिर्धारित ग्रिड वर्ग (जसे
.col-4
) किंवा Sass मिक्सिन वापरू शकता .
फ्लेक्सबॉक्सच्या सभोवतालच्या मर्यादा आणि दोषांबद्दल जागरूक रहा , जसे की फ्लेक्स कंटेनर म्हणून काही HTML घटक वापरण्यास असमर्थता .
ग्रिड पर्याय
बूटस्ट्रॅप बहुतेक आकार परिभाषित करण्यासाठी em
s किंवा s वापरत असताना, ग्रिड ब्रेकपॉइंट्स आणि कंटेनर रुंदीसाठी s वापरतात. कारण व्ह्यूपोर्टची रुंदी पिक्सेलमध्ये आहे आणि फॉन्ट आकारानुसार बदलत नाही .rem
px
सुलभ सारणीसह बूटस्ट्रॅप ग्रिड प्रणालीचे पैलू एकाधिक उपकरणांवर कसे कार्य करतात ते पहा.
अतिरिक्त लहान <576px |
लहान ≥576px |
मध्यम ≥768px |
मोठा ≥992px |
अतिरिक्त मोठा ≥1200px |
|
---|---|---|---|---|---|
कमाल कंटेनर रुंदी | काहीही नाही (स्वयं) | 540px | 720px | 960px | 1140px |
वर्ग उपसर्ग | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# स्तंभ | 12 | ||||
गटर रुंदी | 30px (स्तंभाच्या प्रत्येक बाजूला 15px) | ||||
नेस्टेबल | होय | ||||
स्तंभ क्रमवारी | होय |
स्वयं-लेआउट स्तंभ
सारख्या सुस्पष्ट क्रमांकित वर्गाशिवाय सहज स्तंभ आकारासाठी ब्रेकपॉइंट-विशिष्ट स्तंभ वर्ग वापरा .col-sm-6
.
समान-रुंदी
उदाहरणार्थ, येथे दोन ग्रिड लेआउट आहेत जे प्रत्येक डिव्हाइस आणि व्ह्यूपोर्टवर लागू होतात, पासून xs
ते xl
. तुम्हाला आवश्यक असलेल्या प्रत्येक ब्रेकपॉईंटसाठी कितीही युनिट-कमी वर्ग जोडा आणि प्रत्येक स्तंभ समान रुंदीचा असेल.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
समान-रुंदी मल्टी-लाइन
.w-100
तुम्हाला जेथे स्तंभ नवीन ओळीत मोडायचे आहेत तेथे टाकून एकापेक्षा जास्त ओळींचा विस्तार करणारे समान-रुंदीचे स्तंभ तयार करा . .w-100
काही रिस्पॉन्सिव्ह डिस्प्ले युटिलिटीज मिक्स करून ब्रेक्स रिस्पॉन्सिव्ह बनवा .
सफारी फ्लेक्सबॉक्स बग होता ज्याने हे स्पष्ट flex-basis
किंवा स्पष्ट न करता कार्य करण्यापासून प्रतिबंधित केले border
. जुन्या ब्राउझर आवृत्त्यांसाठी उपाय आहेत, परंतु तुमचे लक्ष्य ब्राउझर बग्गी आवृत्त्यांमध्ये येत नसल्यास ते आवश्यक नसावेत.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
एका स्तंभाची रुंदी सेट करत आहे
फ्लेक्सबॉक्स ग्रिड स्तंभांसाठी स्वयं-लेआउटचा अर्थ असा आहे की तुम्ही एका स्तंभाची रुंदी सेट करू शकता आणि त्याभोवती आपोआप सिबलिंग कॉलमचा आकार बदलू शकता. तुम्ही पूर्वनिर्धारित ग्रिड वर्ग (खाली दर्शविल्याप्रमाणे), ग्रिड मिक्सन्स किंवा इनलाइन रुंदी वापरू शकता. लक्षात ठेवा की मध्यभागी स्तंभाची रुंदी कितीही असली तरीही इतर स्तंभांचा आकार बदलेल.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
व्हेरिएबल रुंदी सामग्री
col-{breakpoint}-auto
त्यांच्या सामग्रीच्या नैसर्गिक रुंदीवर आधारित स्तंभांना आकार देण्यासाठी वर्ग वापरा .
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
प्रतिसाद देणारे वर्ग
बूटस्ट्रॅपच्या ग्रिडमध्ये जटिल प्रतिसादात्मक मांडणी तयार करण्यासाठी पूर्वनिर्धारित वर्गांच्या पाच स्तरांचा समावेश आहे. तुम्हाला योग्य वाटत असले तरी अतिरिक्त लहान, लहान, मध्यम, मोठ्या किंवा अतिरिक्त मोठ्या उपकरणांवर तुमच्या स्तंभांचा आकार सानुकूलित करा.
सर्व ब्रेकपॉइंट्स
सर्वात लहान उपकरणांपासून ते मोठ्या उपकरणांपर्यंत समान असलेल्या ग्रिडसाठी, .col
आणि .col-*
वर्ग वापरा. जेव्हा आपल्याला विशेषतः आकाराच्या स्तंभाची आवश्यकता असेल तेव्हा क्रमांकित वर्ग निर्दिष्ट करा; अन्यथा, चिकटून राहण्यास मोकळ्या मनाने .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
क्षैतिज करण्यासाठी स्टॅक केलेले
वर्गांचा एकच संच वापरून .col-sm-*
, तुम्ही एक मूलभूत ग्रिड प्रणाली तयार करू शकता जी स्टॅक केलेली सुरू होते आणि लहान ब्रेकपॉइंट ( sm
) वर क्षैतिज होते.
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
मिसळा आणि जुळवा
तुमचे स्तंभ फक्त काही ग्रिड स्तरांमध्ये स्टॅक करू इच्छित नाहीत? आवश्यकतेनुसार प्रत्येक स्तरासाठी वेगवेगळ्या वर्गांचे संयोजन वापरा. हे सर्व कसे कार्य करते याच्या चांगल्या कल्पनांसाठी खालील उदाहरण पहा.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
गटार
ब्रेकपॉइंट-विशिष्ट पॅडिंग आणि नकारात्मक मार्जिन युटिलिटी वर्गांद्वारे गटर्स प्रतिसादात्मकपणे समायोजित केले जाऊ शकतात. दिलेल्या पंक्तीतील गटर बदलण्यासाठी, s वर नकारात्मक मार्जिन युटिलिटी .row
आणि जुळणारी पॅडिंग युटिलिटी जोडा. पुन्हा जुळणारी पॅडिंग उपयुक्तता वापरून, अवांछित ओव्हरफ्लो टाळण्यासाठी किंवा पालकांना देखील समायोजित .col
करण्याची आवश्यकता असू शकते..container
.container-fluid
lg
मोठ्या ( ) ब्रेकपॉइंटवर आणि त्यावरील बूटस्ट्रॅप ग्रिड सानुकूलित करण्याचे येथे एक उदाहरण आहे . आम्ही .col
सह पॅडिंग वाढविले आहे, त्यास पॅरेंटसह .px-lg-5
प्रतिवाद केला आहे आणि नंतर रॅपर सह समायोजित केले आहे ..mx-lg-n5
.row
.container
.px-lg-5
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
पंक्ती स्तंभ
.row-cols-*
तुमची सामग्री आणि लेआउट सर्वोत्तम रेंडर करणार्या स्तंभांची संख्या द्रुतपणे सेट करण्यासाठी प्रतिसाद देणारे वर्ग वापरा . सामान्य .col-*
वर्ग वैयक्तिक स्तंभांवर लागू होतात (उदा. ), पंक्ती स्तंभ वर्ग शॉर्टकट म्हणून .col-md-4
पालकांवर सेट केले जातात ..row
मूलभूत ग्रिड लेआउट द्रुतपणे तयार करण्यासाठी किंवा तुमचे कार्ड लेआउट नियंत्रित करण्यासाठी या पंक्ती स्तंभ वर्गांचा वापर करा.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
तुम्ही सोबत असलेले Sass मिक्सिन देखील वापरू शकता row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
संरेखन
स्तं���ांना अनुलंब आणि क्षैतिजरित्या संरेखित करण्यासाठी फ्लेक्सबॉक्स संरेखन उपयुक्तता वापरा. इंटरनेट एक्सप्लोरर 10-11 फ्लेक्स आयटमच्या अनुलंब संरेखनास समर्थन देत नाही जेव्हा फ्लेक्स कंटेनरमध्ये min-height
खाली दर्शविल्याप्रमाणे असते. अधिक तपशीलांसाठी फ्लेक्सबग #3 पहा.
अनुलंब संरेखन
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
क्षैतिज संरेखन
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
गटारी नाहीत
आमच्या पूर्वनिर्धारित ग्रिड वर्गांमधील स्तंभांमधील गटर सह काढले जाऊ शकतात .no-gutters
. हे सर्व तात्कालिक मुलांच्या स्तंभांमधील नकारात्मक margin
s .row
आणि क्षैतिज काढून टाकते.padding
या शैली तयार करण्यासाठी स्त्रोत कोड येथे आहे. लक्षात ठेवा की कॉलम ओव्हरराइड्स फक्त पहिल्या मुलांच्या कॉलमसाठी स्कोप केले जातात आणि विशेषता निवडक द्वारे लक्ष्यित केले जातात . हे अधिक विशिष्ट सिलेक्टर व्युत्पन्न करत असताना, कॉलम पॅडिंग अजूनही स्पेसिंग युटिलिटीसह सानुकूलित केले जाऊ शकते .
एज-टू-एज डिझाइनची आवश्यकता आहे? .container
पालक किंवा ड्रॉप करा .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
सराव मध्ये, ते कसे दिसते ते येथे आहे. लक्षात ठेवा तुम्ही हे इतर सर्व पूर्वनिर्धारित ग्रिड वर्गांसह वापरणे सुरू ठेवू शकता (स्तंभ रुंदी, प्रतिसादात्मक स्तर, पुनर्क्रमण आणि अधिकसह).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
स्तंभ लपेटणे
एका ओळीत 12 पेक्षा जास्त स्तंभ ठेवल्यास, अतिरिक्त स्तंभांचा प्रत्येक गट, एक युनिट म्हणून, नवीन ओळीवर गुंडाळला जाईल.
9 + 4 = 13 > 12 पासून, हा 4-स्तंभ-रुंद div नवीन ओळीवर एक संलग्न एकक म्हणून गुंडाळला जातो.
त्यानंतरचे स्तंभ नवीन ओळीवर चालू राहतात.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
स्तंभ तुटतो
फ्लेक्सबॉक्समध्ये नवीन ओळीत स्तंभ तोडण्यासाठी एक लहान हॅक आवश्यक आहे: width: 100%
तुम्हाला जेथे नवीन ओळीत तुमचे स्तंभ गुंडाळायचे आहेत तेथे एक घटक जोडा. साधारणपणे हे एकाधिक .row
s सह पूर्ण केले जाते, परंतु प्रत्येक अंमलबजावणी पद्धत यासाठी जबाबदार असू शकत नाही.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
तुम्ही हा ब्रेक आमच्या रिस्पॉन्सिव्ह डिस्प्ले युटिलिटीजसह विशिष्ट ब्रेकपॉइंट्सवर देखील लागू करू शकता .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
पुनर्क्रमण
वर्ग ऑर्डर करा
तुमच्या सामग्रीचा व्हिज्युअल क्रम.order-
नियंत्रित करण्यासाठी वर्ग वापरा . हे वर्ग प्रतिसादात्मक आहेत, त्यामुळे तुम्ही ब्रेकपॉइंट (उदा., ) सेट करू शकता. सर्व पाच ग्रिड स्तरांवर समर्थन समाविष्ट करते .order
.order-1.order-md-2
1
12
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
.order-first
प्रतिसादात्मक आणि वर्ग देखील आहेत जे अनुक्रमे आणि ( ), लागू करून घटक .order-last
बदलतात . हे वर्ग आवश्यकतेनुसार क्रमांकित वर्गांमध्ये देखील मिसळले जाऊ शकतात .order
order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
ऑफसेटिंग स्तंभ
तुम्ही ग्रिड कॉलम्स दोन प्रकारे ऑफसेट करू शकता: आमचे रिस्पॉन्सिव्ह .offset-
ग्रिड क्लासेस आणि आमच्या मार्जिन युटिलिटीज . ग्रिड वर्गांचा आकार स्तंभांशी जुळण्यासाठी केला जातो तर मार्जिन द्रुत मांडणीसाठी अधिक उपयुक्त असतात जेथे ऑफसेटची रुंदी व्हेरिएबल असते.
ऑफसेट वर्ग
.offset-md-*
वर्ग वापरून स्तंभ उजवीकडे हलवा . *
हे वर्ग स्तंभाचे डावे मार्जिन स्तंभांनुसार वाढवतात . उदाहरणार्थ, चार स्तंभांवर .offset-md-4
हलते ..col-md-4
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
प्रतिसादात्मक ब्रेकपॉइंट्सवर कॉलम क्लिअरिंग व्यतिरिक्त, तुम्हाला ऑफसेट रीसेट करण्याची आवश्यकता असू शकते. हे ग्रिड उदाहरणामध्ये कृतीत पहा .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
मार्जिन उपयुक्तता
v4 मध्ये flexbox वर जाल्याने, तुम्ही मार्जिन युटिलिटीज वापरू शकता जसे की .mr-auto
सिबलिंग कॉलम एकमेकांपासून दूर नेणे.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
घरटी
तुमची सामग्री डीफॉल्ट ग्रिडसह नेस्ट करण्यासाठी, विद्यमान स्तंभामध्ये नवीन .row
आणि स्तंभांचा संच जोडा . नेस्टेड पंक्तींमध्ये 12 किंवा त्यापेक्षा कमी जोडणाऱ्या स्तंभांचा संच समाविष्ट असावा (आपण सर्व 12 उपलब्ध स्तंभ वापरणे आवश्यक नाही)..col-sm-*
.col-sm-*
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
सास मिक्सन्स
बूटस्ट्रॅपचे स्त्रोत Sass फाइल्स वापरताना, तुमच्याकडे सानुकूल, अर्थपूर्ण आणि प्रतिसादात्मक पृष्ठ लेआउट तयार करण्यासाठी Sass व्हेरिएबल्स आणि मिक्सन्स वापरण्याचा पर्याय आहे. आमचे पूर्वनिर्धारित ग्रिड वर्ग हेच व्हेरिएबल्स आणि मिक्सन्स वापरतात जेणेकरुन वापरण्यास-तयार वर्गांचा एक संपूर्ण संच जलद प्रतिसादात्मक मांडणीसाठी प्रदान केला जाईल.
चल
व्हेरिएबल्स आणि नकाशे स्तंभांची संख्या, गटरची रुंदी आणि मीडिया क्वेरी पॉइंट ज्यावर फ्लोटिंग कॉलम सुरू करायचे ते निर्धारित करतात. आम्ही वरील दस्तऐवजीकरण पूर्वनिर्धारित ग्रिड वर्ग व्युत्पन्न करण्यासाठी, तसेच खाली सूचीबद्ध केलेल्या सानुकूल मिश्रणांसाठी वापरतो.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
मिक्सन्स
वैयक्तिक ग्रिड स्तंभांसाठी सिमेंटिक CSS व्युत्पन्न करण्यासाठी ग्रिड व्हेरिएबल्सच्या संयोगाने मिक्सिन्सचा वापर केला जातो.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
उदाहरण वापर
तुम्ही व्हेरिएबल्स तुमच्या स्वतःच्या सानुकूल मूल्यांमध्ये बदलू शकता किंवा फक्त त्यांच्या डीफॉल्ट मूल्यांसह मिक्सिन वापरू शकता. दरम्यानच्या अंतरासह दोन-स्तंभ लेआउट तयार करण्यासाठी डीफॉल्ट सेटिंग्ज वापरण्याचे येथे एक उदाहरण आहे.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
ग्रिड सानुकूलित करणे
आमचे अंगभूत ग्रिड Sass व्हेरिएबल्स आणि नकाशे वापरून, पूर्वनिर्धारित ग्रिड वर्ग पूर्णपणे सानुकूलित करणे शक्य आहे. स्तरांची संख्या, मीडिया क्वेरीचे परिमाण आणि कंटेनर रुंदी बदला—नंतर पुन्हा संकलित करा.
स्तंभ आणि गटर
Sass व्हेरिएबल्सद्वारे ग्रिड कॉलम्सची संख्या सुधारली जाऊ शकते. स्तंभ गटरसाठी रुंदी सेट $grid-columns
करताना प्रत्येक वैयक्तिक स्तंभाची रुंदी (टक्केवारी) व्युत्पन्न करण्यासाठी वापरली जाते .$grid-gutter-width
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
ग्रिड स्तर
स्तंभांच्या पलीकडे जाऊन, तुम्ही ग्रिड स्तरांची संख्या देखील सानुकूलित करू शकता. तुम्हाला फक्त चार ग्रिड टियर हवे असल्यास, तुम्ही यासारखे काहीतरी अपडेट $grid-breakpoints
कराल $container-max-widths
:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Sass व्हेरिएबल्स किंवा नकाशांमध्ये कोणतेही बदल करताना, तुम्हाला तुमचे बदल सेव्ह करून पुन्हा कंपाइल करणे आवश्यक आहे. असे केल्याने स्तंभ रुंदी, ऑफसेट आणि ऑर्डरिंगसाठी पूर्वनिर्धारित ग्रिड वर्गांचा अगदी नवीन संच आउटपुट होईल. सानुकूल ब्रेकपॉइंट वापरण्यासाठी प्रतिसादात्मक दृश्यमानता उपयुक्तता देखील अद्यतनित केल्या जातील. px
(नाही rem
, em
, किंवा %
) मध्ये ग्रिड मूल्ये सेट केल्याचे सुनिश्चित करा .