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

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

या उदाहरणांमध्ये .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-md-4
.col-md-4
.col-md-4

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

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

.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 (अतिरिक्त मोठे). अधिक गतिमान आणि लवचिक मांडणी तयार करण्यासाठी तुम्ही या वर्गांचे जवळपास कोणतेही संयोजन वापरू शकता.

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

.col-12 .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-12 .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