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

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

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