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

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

यी उदाहरणहरूमा .themed-grid-colकक्षा केही विषयवस्तु थप्न स्तम्भहरूमा थपिएको छ। यो पूर्वनिर्धारित रूपमा बुटस्ट्र्यापमा उपलब्ध हुने वर्ग होइन।

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

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

तीन बराबर स्तम्भहरू

डेस्कटपबाट सुरु हुने र ठूला डेस्कटपहरूमा स्केलिङ गरी तीन बराबर-चौडाइका स्तम्भहरू प्राप्त गर्नुहोस् । मोबाइल उपकरणहरू, ट्याब्लेटहरू र तल, स्तम्भहरू स्वचालित रूपमा स्ट्याक हुनेछन्।

तीन बराबर स्तम्भ वैकल्पिक

कक्षाहरू प्रयोग गरेर .row-cols-*, तपाईं सजिलैसँग समान स्तम्भहरूसँग ग्रिड सिर्जना गर्न सक्नुहुन्छ।

तीन असमान स्तम्भहरू

डेस्कटपबाट सुरु हुने तीनवटा स्तम्भहरू प्राप्त गर्नुहोस् र विभिन्न चौडाइहरूको ठूला डेस्कटपहरूमा स्केलिङ गर्नुहोस् । याद गर्नुहोस्, ग्रिड स्तम्भहरूले एकल तेर्सो ब्लकको लागि बाह्र सम्म थप्नु पर्छ। त्यो भन्दा बढि, र स्तम्भहरू स्ट्याक गर्न थाल्छन् भ्यूपोर्ट कुनै फरक पर्दैन।

दुई स्तम्भहरू

डेस्कटपबाट सुरु हुने र ठूला डेस्कटपहरूमा स्केलिङ गरी दुईवटा स्तम्भहरू प्राप्त गर्नुहोस् ।

पूर्ण चौडाइ, एकल स्तम्भ

पूर्ण-चौडाइ तत्वहरूको लागि कुनै ग्रिड वर्गहरू आवश्यक छैन।

---

दुई नेस्टेड स्तम्भहरूसँग दुई स्तम्भहरू

कागजात अनुसार, नेस्टिङ सजिलो छ - अवस्थित स्तम्भ भित्र स्तम्भहरूको पङ्क्ति राख्नुहोस्। यसले तपाइँलाई डेस्कटपबाट सुरु हुने र ठूला डेस्कटपहरूमा मापन गर्ने दुईवटा स्तम्भहरू दिन्छ , अर्को दुई (समान चौडाइ) ठूलो स्तम्भ भित्र।

मोबाइल उपकरणको आकार, ट्याब्लेट र तल, यी स्तम्भहरू र तिनीहरूको नेस्टेड स्तम्भहरू स्ट्याक हुनेछन्।

---

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

बुटस्ट्र्याप v5 ग्रिड प्रणालीमा कक्षाका छवटा तहहरू छन्: xs (अतिरिक्त सानो, यो वर्ग इन्फिक्स प्रयोग गरिएको छैन), sm (सानो), md (मध्यम), lg (ठूलो), xl (x-ठूलो), र xxl (xx) - ठूलो)। थप गतिशील र लचिलो लेआउटहरू सिर्जना गर्न तपाईं यी वर्गहरूको लगभग कुनै पनि संयोजन प्रयोग गर्न सक्नुहुन्छ।

कक्षाको प्रत्येक तह मापन हुन्छ, यसको मतलब यदि तपाइँ md, lg, xl र xxl को लागि समान चौडाइहरू सेट गर्ने योजना बनाउनुहुन्छ भने, तपाइँ केवल md निर्दिष्ट गर्न आवश्यक छ।

---

मिश्रित: मोबाइल, ट्याब्लेट, र डेस्कटप

---

गटरहरू

कक्षाहरूको साथ .gx-*, तेर्सो गटरहरू समायोजन गर्न सकिन्छ।

.gy-*ठाडो नालीहरू नियन्त्रण गर्न कक्षाहरू प्रयोग गर्नुहोस् ।

कक्षाको साथ .g-*, दुवै दिशामा गटरहरू समायोजन गर्न सकिन्छ।

---

कन्टेनरहरू

Bootstrap v4.4 मा थपिएका अतिरिक्त कक्षाहरूले विशेष ब्रेकपोइन्टसम्म १००% चौडा कन्टेनरहरूलाई अनुमति दिन्छ। v5 ले नयाँ xxlब्रेकपोइन्ट थप्छ।