बूटस्ट्रॅप ग्रिड उदाहरणे

तुम्हाला बूटस्ट्रॅप ग्रिड सिस्टीममधील बिल्डिंगशी परिचित होण्यासाठी मूलभूत ग्रिड लेआउट.

या उदाहरणांमध्ये .themed-grid-colकाही थीम जोडण्यासाठी स्तंभांमध्ये वर्ग जोडला जातो. डीफॉल्टनुसार बूटस्ट्रॅपमध्ये उपलब्ध असलेला हा वर्ग नाही.

पाच ग्रिड स्तर

बूटस्ट्रॅप ग्रिड सिस्टीममध्ये पाच स्तर आहेत, आम्ही समर्थन करत असलेल्या प्रत्येक श्रेणीतील उपकरणांसाठी एक. प्रत्येक टियर किमान व्ह्यूपोर्ट आकाराने सुरू होतो आणि ओव्हरराइड केल्याशिवाय मोठ्या उपकरणांवर स्वयंचलितपणे लागू होतो.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

तीन समान स्तंभ

डेस्कटॉपपासून सुरू होणारे तीन समान-रुंदीचे स्तंभ मिळवा आणि मोठ्या डेस्कटॉपवर स्केलिंग करा . मोबाइल डिव्हाइसेस, टॅब्लेट आणि खाली, स्तंभ आपोआप स्टॅक होतील.

.col-md-4
.col-md-4
.col-md-4

तीन समान स्तंभ पर्यायी

वर्ग वापरून .row-cols-*, तुम्ही समान स्तंभांसह सहजपणे ग्रिड तयार करू शकता.

.colचे मूल .row-cols-md-3
.colचे मूल .row-cols-md-3
.colचे मूल .row-cols-md-3

तीन असमान स्तंभ

डेस्कटॉपपासून सुरू होणारे तीन स्तंभ मिळवा आणि विविध रुंदीच्या मोठ्या डेस्कटॉपवर स्केलिंग करा . लक्षात ठेवा, एका क्षैतिज ब्लॉकसाठी ग्रिड स्तंभांनी बारा जोडले पाहिजेत. त्याहून अधिक, आणि स्तंभ स्टॅकिंग सुरू करतात, व्ह्यूपोर्ट काहीही असो.

.col-md-3
.col-md-6
.col-md-3

दोन स्तंभ

डेस्कटॉपपासून सुरू होणारे दोन स्तंभ मिळवा आणि मोठ्या डेस्कटॉपवर स्केलिंग करा .

.col-md-8
.col-md-4

पूर्ण रुंदी, एकल स्तंभ

पूर्ण-रुंदीच्या घटकांसाठी कोणतेही ग्रिड वर्ग आवश्यक नाहीत.

दोन नेस्टेड स्तंभांसह दोन स्तंभ

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

मोबाइल डिव्हाइस आकार, टॅब्लेट आणि खाली, हे स्तंभ आणि त्यांचे नेस्टेड स्तंभ स्टॅक होतील.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

मिश्रित: मोबाइल आणि डेस्कटॉप

बूटस्ट्रॅप v4 ग्रिड सिस्टीममध्ये वर्गांचे पाच स्तर आहेत: xs (अतिरिक्त लहान, हा वर्ग इन्फिक्स वापरला जात नाही), sm (लहान), md (मध्यम), lg (मोठा), आणि xl (अतिरिक्त मोठा). अधिक गतिमान आणि लवचिक मांडणी तयार करण्यासाठी तुम्ही या वर्गांचे जवळपास कोणतेही संयोजन वापरू शकता.

वर्गांचा प्रत्येक स्तर वाढतो, याचा अर्थ जर तुम्ही md, lg आणि xl साठी समान रुंदी सेट करण्याची योजना आखत असाल, तर तुम्हाला फक्त md निर्दिष्ट करणे आवश्यक आहे.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

मिश्रित: मोबाइल, टॅबलेट आणि डेस्कटॉप

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

गटार

.gx-*वर्गांसह, क्षैतिज गटर समायोजित केले जाऊ शकतात .

.col.gx-4गटर सह
.col.gx-4गटर सह
.col.gx-4गटर सह
.col.gx-4गटर सह
.col.gx-4गटर सह
.col.gx-4गटर सह

.gy-*उभ्या गटरांवर नियंत्रण ठेवण्यासाठी वर्गांचा वापर करा .

.col.gy-4गटर सह
.col.gy-4गटर सह
.col.gy-4गटर सह
.col.gy-4गटर सह
.col.gy-4गटर सह
.col.gy-4गटर सह

.g-*वर्गांसह, दोन्ही दिशांमधील गटर समायोजित केले जाऊ शकतात .

.col.g-3गटर सह
.col.g-3गटर सह
.col.g-3गटर सह
.col.g-3गटर सह
.col.g-3गटर सह
.col.g-3गटर सह

कंटेनर

बूटस्ट्रॅप v4.4 मध्ये जोडलेले अतिरिक्त वर्ग विशिष्ट ब्रेकपॉइंटपर्यंत 100% रुंद कंटेनर्सना परवानगी देतात. v5 नवीन xxlब्रेकपॉइंट जोडते.

.कंटेनर
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.कंटेनर-द्रव