ग्रीड प्रणाली
बारा कॉलम सिस्टीम, पाच डीफॉल्ट रिस्पॉन्सिव्ह टियर, Sass व्हेरिएबल्स आणि मिक्सिन्स आणि डझनभर पूर्वनिर्धारित क्लासेसमुळे सर्व आकार आणि आकारांचे लेआउट तयार करण्यासाठी आमचे शक्तिशाली मोबाइल-फर्स्ट फ्लेक्सबॉक्स ग्रिड वापरा.
बूटस्ट्रॅपची ग्रिड प्रणाली सामग्री लेआउट आणि संरेखित करण्यासाठी कंटेनर, पंक्ती आणि स्तंभांची मालिका वापरते. हे flexbox सह तयार केले आहे आणि पूर्णपणे प्रतिसाद देणारे आहे. खाली एक उदाहरण आणि ग्रिड कसे एकत्र येतात याचे सखोल स्वरूप आहे.
फ्लेक्सबॉक्ससाठी नवीन किंवा अपरिचित? पार्श्वभूमी, शब्दावली, मार्गदर्शक तत्त्वे आणि कोड स्निपेट्ससाठी हे CSS ट्रिक्स फ्लेक्सबॉक्स मार्गदर्शक वाचा .
वरील उदाहरण आमच्या पूर्वनिर्धारित ग्रिड वर्गांचा वापर करून लहान, मध्यम, मोठ्या आणि अतिरिक्त मोठ्या उपकरणांवर तीन समान-रुंदीचे स्तंभ तयार करते. ते स्तंभ पृष्ठामध्ये पालकासह मध्यभागी असतात .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
. तुम्हाला आवश्यक असलेल्या प्रत्येक ब्रेकपॉईंटसाठी कितीही युनिट-कमी वर्ग जोडा आणि प्रत्येक स्तंभ समान रुंदीचा असेल.
समान-रुंदीचे स्तंभ एकाधिक ओळींमध्ये मोडले जाऊ शकतात, परंतु सफारी फ्लेक्सबॉक्स बग होता ज्याने यास स्पष्ट flex-basis
किंवा border
. जुन्या ब्राउझर आवृत्त्यांसाठी उपाय आहेत, परंतु तुम्ही अद्ययावत असल्यास ते आवश्यक नसावेत.
फ्लेक्सबॉक्स ग्रिड स्तंभांसाठी स्वयं-लेआउटचा अर्थ असा आहे की तुम्ही एका स्तंभाची रुंदी सेट करू शकता आणि त्याभोवती आपोआप सिबलिंग कॉलमचा आकार बदलू शकता. तुम्ही पूर्वनिर्धारित ग्रिड वर्ग (खाली दर्शविल्याप्रमाणे), ग्रिड मिक्सन्स किंवा इनलाइन रुंदी वापरू शकता. लक्षात ठेवा की मध्यभागी स्तंभाची रुंदी कितीही असली तरीही इतर स्तंभांचा आकार बदलेल.
col-{breakpoint}-auto
त्यांच्या सामग्रीच्या नैसर्गिक रुंदीवर आधारित स्तंभांना आकार देण्यासाठी वर्ग वापरा .
.w-100
तुम्हाला स्तंभांना नवीन ओळीत खंडित करायचे आहे तेथे समाविष्ट करून एकापेक्षा जास्त पंक्तींचा विस्तार करणारे समान-रुंदीचे स्तंभ तयार करा . .w-100
काही रिस्पॉन्सिव्ह डिस्प्ले युटिलिटीज मिक्स करून ब्रेक्स रिस्पॉन्सिव्ह बनवा .
बूटस्ट्रॅपच्या ग्रिडमध्ये जटिल प्रतिसादात्मक मांडणी तयार करण्यासाठी पूर्वनिर्धारित वर्गांच्या पाच स्तरांचा समावेश आहे. तुम्हाला योग्य वाटत असले तरी अतिरिक्त लहान, लहान, मध्यम, मोठ्या किंवा अतिरिक्त मोठ्या उपकरणांवर तुमच्या स्तंभांचा आकार सानुकूलित करा.
सर्वात लहान उपकरणांपासून ते मोठ्या उपकरणांपर्यंत समान असलेल्या ग्रिडसाठी, .col
आणि .col-*
वर्ग वापरा. जेव्हा आपल्याला विशेषतः आकाराच्या स्तंभाची आवश्यकता असेल तेव्हा क्रमांकित वर्ग निर्दिष्ट करा; अन्यथा, चिकटून राहण्यास मोकळ्या मनाने .col
.
वर्गांचा एकच संच वापरून .col-sm-*
, तुम्ही एक मूलभूत ग्रिड प्रणाली तयार करू शकता जी स्टॅक केलेली सुरू होते आणि लहान ब्रेकपॉइंट ( sm
) वर क्षैतिज होते.
तुमचे स्तंभ फक्त काही ग्रिड स्तरांमध्ये स्टॅक करू इच्छित नाहीत? आवश्यकतेनुसार प्रत्येक स्तरासाठी वेगवेगळ्या वर्गांचे संयोजन वापरा. हे सर्व कसे कार्य करते याच्या चांगल्या कल्पनांसाठी खालील उदाहरण पहा.
स्तंभ अनुलंब आणि क्षैतिजरित्या संरेखित करण्यासाठी फ्लेक्सबॉक्स संरेखन उपयुक्तता वापरा.
आमच्या पूर्वनिर्धारित ग्रिड वर्गांमधील स्तंभांमधील गटर सह काढले जाऊ शकतात .no-gutters
. हे सर्व तात्कालिक मुलांच्या स्तंभांमधील नकारात्मक margin
s .row
आणि क्षैतिज काढून टाकते.padding
या शैली तयार करण्यासाठी स्त्रोत कोड येथे आहे. लक्षात ठेवा की कॉलम ओव्हरराइड्स फक्त पहिल्या मुलांच्या कॉलमसाठी स्कोप केले जातात आणि विशेषता निवडक द्वारे लक्ष्यित केले जातात . हे अधिक विशिष्ट सिलेक्टर व्युत्पन्न करत असताना, कॉलम पॅडिंग अजूनही स्पेसिंग युटिलिटीसह सानुकूलित केले जाऊ शकते .
एज-टू-एज डिझाइनची आवश्यकता आहे? .container
पालक किंवा ड्रॉप करा .container-fluid
.
सराव मध्ये, ते कसे दिसते ते येथे आहे. लक्षात ठेवा तुम्ही हे इतर सर्व पूर्वनिर्धारित ग्रिड वर्गांसह वापरणे सुरू ठेवू शकता (स्तंभ रुंदी, प्रतिसादात्मक स्तर, पुनर्क्रमण आणि अधिकसह).
एका ओळीत 12 पेक्षा जास्त स्तंभ ठेवल्यास, अतिरिक्त स्तंभांचा प्रत्येक गट, एक युनिट म्हणून, नवीन ओळीवर गुंडाळला जाईल.
9 + 4 = 13 > 12 पासून, हा 4-स्तंभ-रुंद div नवीन ओळीवर एक संलग्न एकक म्हणून गुंडाळला जातो.
त्यानंतरचे स्तंभ नवीन ओळीवर चालू राहतात.
फ्लेक्सबॉक्समध्ये नवीन ओळीत स्तंभ तोडण्यासाठी एक लहान हॅक आवश्यक आहे: width: 100%
तुम्हाला जेथे नवीन ओळीत तुमचे स्तंभ गुंडाळायचे आहेत तेथे एक घटक जोडा. साधारणपणे हे एकाधिक .row
s सह पूर्ण केले जाते, परंतु प्रत्येक अंमलबजावणी पद्धत यासाठी जबाबदार असू शकत नाही.
तुम्ही हा ब्रेक आमच्या रिस्पॉन्सिव्ह डिस्प्ले युटिलिटीजसह विशिष्ट ब्रेकपॉइंट्सवर देखील लागू करू शकता .
तुमच्या सामग्रीचा व्हिज्युअल क्रम.order-
नियंत्रित करण्यासाठी वर्ग वापरा . हे वर्ग प्रतिसादात्मक आहेत, त्यामुळे तुम्ही ब्रेकपॉइंट (उदा., ) सेट करू शकता. सर्व पाच ग्रिड स्तरांवर समर्थन समाविष्ट करते .order
.order-1.order-md-2
1
12
.order-first
प्रतिसादात्मक आणि वर्ग देखील आहेत जे अनुक्रमे आणि ( ), लागू करून घटक .order-last
बदलतात . हे वर्ग आवश्यकतेनुसार क्रमांकित वर्गांमध्ये देखील मिसळले जाऊ शकतात .order
order: -1
order: 13
order: $columns + 1
.order-*
तुम्ही ग्रिड कॉलम्स दोन प्रकारे ऑफसेट करू शकता: आमचे रिस्पॉन्सिव्ह .offset-
ग्रिड क्लासेस आणि आमच्या मार्जिन युटिलिटीज . ग्रिड वर्गांचा आकार स्तंभांशी जुळण्यासाठी केला जातो तर मार्जिन द्रुत मांडणीसाठी अधिक उपयुक्त असतात जेथे ऑफसेटची रुंदी व्हेरिएबल असते.
.offset-md-*
वर्ग वापरून स्तंभ उजवीकडे हलवा . *
हे वर्ग स्तंभाचे डावे मार्जिन स्तंभांनुसार वाढवतात . उदाहरणार्थ, चार स्तंभांवर .offset-md-4
हलते ..col-md-4
प्रतिसादात्मक ब्रेकपॉइंट्सवर कॉलम क्लिअरिंग व्यतिरिक्त, तुम्हाला ऑफसेट रीसेट करण्याची आवश्यकता असू शकते. हे ग्रिड उदाहरणामध्ये कृतीत पहा .
v4 मध्ये flexbox वर जाल्याने, तुम्ही मार्जिन युटिलिटीज वापरू शकता जसे की .mr-auto
सिबलिंग कॉलम्स एकमेकांपासून दूर नेणे.
तुमची सामग्री डीफॉल्ट ग्रिडसह नेस्ट करण्यासाठी, विद्यमान स्तंभामध्ये नवीन .row
आणि स्तंभांचा संच जोडा . नेस्टेड पंक्तींमध्ये 12 किंवा त्यापेक्षा कमी जोडणाऱ्या स्तंभांचा संच समाविष्ट असावा (आपण सर्व 12 उपलब्ध स्तंभ वापरणे आवश्यक नाही)..col-sm-*
.col-sm-*
बूटस्ट्रॅपच्या स्त्रोत Sass फाइल्स वापरताना, तुमच्याकडे सानुकूल, अर्थपूर्ण आणि प्रतिसादात्मक पृष्ठ लेआउट तयार करण्यासाठी Sass व्हेरिएबल्स आणि मिक्सिन वापरण्याचा पर्याय आहे. आमचे पूर्वनिर्धारित ग्रिड वर्ग हेच व्हेरिएबल्स आणि मिक्सन्स वापरतात जेणेकरुन वापरण्यास-तयार वर्गांचा एक संपूर्ण संच जलद प्रतिसादात्मक मांडणीसाठी प्रदान केला जाईल.
व्हेरिएबल्स आणि नकाशे स्तंभांची संख्या, गटरची रुंदी आणि मीडिया क्वेरी पॉइंट ज्यावर फ्लोटिंग कॉलम सुरू करायचे ते निर्धारित करतात. आम्ही वरील दस्तऐवजीकरण पूर्वनिर्धारित ग्रिड वर्ग व्युत्पन्न करण्यासाठी, तसेच खाली सूचीबद्ध केलेल्या सानुकूल मिश्रणांसाठी वापरतो.
वैयक्तिक ग्रिड स्तंभांसाठी सिमेंटिक CSS व्युत्पन्न करण्यासाठी ग्रिड व्हेरिएबल्सच्या संयोगाने मिक्सिन्सचा वापर केला जातो.
तुम्ही व्हेरिएबल्स तुमच्या स्वतःच्या सानुकूल मूल्यांमध्ये बदलू शकता किंवा फक्त त्यांच्या डीफॉल्ट मूल्यांसह मिक्सिन वापरू शकता. दरम्यानच्या अंतरासह दोन-स्तंभ लेआउट तयार करण्यासाठी डीफॉल्ट सेटिंग्ज वापरण्याचे येथे एक उदाहरण आहे.
आमचे अंगभूत ग्रिड Sass व्हेरिएबल्स आणि नकाशे वापरून, पूर्वनिर्धारित ग्रिड वर्ग पूर्णपणे सानुकूलित करणे शक्य आहे. स्तरांची संख्या, मीडिया क्वेरीचे परिमाण आणि कंटेनर रुंदी बदला—नंतर पुन्हा संकलित करा.
Sass व्हेरिएबल्सद्वारे ग्रिड कॉलम्सची संख्या सुधारली जाऊ शकते. स्तंभ गटरसाठी रुंदी सेट $grid-columns
करताना प्रत्येक वैयक्तिक स्तंभाची रुंदी (टक्केवारी) व्युत्पन्न करण्यासाठी वापरली जाते .$grid-gutter-width
स्तंभांच्या पलीकडे जाऊन, तुम्ही ग्रिड स्तरांची संख्या देखील सानुकूलित करू शकता. तुम्हाला फक्त चार ग्रिड टियर हवे असल्यास, तुम्ही यासारखे काहीतरी अपडेट $grid-breakpoints
कराल $container-max-widths
:
Sass व्हेरिएबल्स किंवा नकाशांमध्ये कोणतेही बदल करताना, तुम्हाला तुमचे बदल सेव्ह करून पुन्हा कंपाइल करणे आवश्यक आहे. असे केल्याने स्तंभ रुंदी, ऑफसेट आणि ऑर्डरिंगसाठी पूर्वनिर्धारित ग्रिड वर्गांचा अगदी नवीन संच आउटपुट होईल. सानुकूल ब्रेकपॉइंट्स वापरण्यासाठी प्रतिसादात्मक दृश्यमानता उपयुक्तता देखील अद्यतनित केल्या जातील. px
(नाही rem
, em
, किंवा %
) मध्ये ग्रिड मूल्ये सेट केल्याचे सुनिश्चित करा .