बुटस्ट्र्याप ग्रिड उदाहरणहरू

आधारभूत ग्रिड लेआउटहरू तपाईंलाई बुटस्ट्र्याप ग्रिड प्रणाली भित्र निर्माणसँग परिचित गराउन।

पाँच ग्रिड तहहरू

बुटस्ट्र्याप ग्रिड प्रणालीमा पाँच तहहरू छन्, हामीले समर्थन गर्ने यन्त्रहरूको प्रत्येक दायराका लागि एउटा। प्रत्येक टियर न्यूनतम भ्यूपोर्ट साइजमा सुरु हुन्छ र ओभरराइड नगरेसम्म ठूला यन्त्रहरूमा स्वचालित रूपमा लागू हुन्छ।

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