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

बूटस्ट्रैप ग्रिड सिस्टम दे अंदर निर्माण कन्नै तुसेंगी परिचित कराने लेई बुनियादी ग्रिड लेआउट।

इनें उदाहरनें च .themed-grid-colक्लास गी किश थीमिंग जोड़ने आस्तै स्तंभें च जोड़ेआ जंदा ऐ। एह् कोई ऐसा वर्ग नेईं ऐ जेह् ड़ा डिफ़ॉल्ट रूप कन्नै बूटस्ट्रैप च उपलब्ध ऐ.

पंज ग्रिड टियर

बूटस्ट्रैप ग्रिड सिस्टम च पंज स्तर न, हर इक श्रेणी दे डिवाइस आस्तै इक जेह् ड़ी अस समर्थन करदे आं। हर इक स्तर इक घट्ट शा घट्ट व्यूपोर्ट आकार कन्नै शुरू होंदा ऐ ते अपने आप गै बड्डे डिवाइसें पर लागू होंदा ऐ जदूं तगर ओवरराइड नेईं कीता जंदा ऐ.

.कोल-4 दा

.कोल-एसएम-4 ऐ

.कोल-एमडी-4 ऐ

.कोल-एलजी-4 ऐ

.कोल-एक्सएल-4 ऐ

.कोल-xxl-4 ऐ

त्रै बराबर स्तंभ

डेस्कटॉप थमां शुरू होने आह् ले ते बड्डे डेस्कटॉप तगर स्केल करने आह् ले त्रै बराबर-चौड़ाई आह् ले स्तंभ हासल करो . मोबाइल डिवाइस, टैबलेट ते थल्लै, स्तंभ अपने आप गै ढेर होई जाङन।

.कोल-एमडी-4 ऐ

त्रै बराबर स्तंभ विकल्प

क्लासें दा इस्तेमाल करियै .row-cols-*, तुस बराबर स्तंभें कन्नै इक ग्रिड आसानी कन्नै बनाई सकदे ओ।

.colदा बच्चा .row-cols-md-3

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

डेस्कटॉप थमां शुरू होने आह् ले ते बक्ख-बक्ख चौड़ाई दे बड्डे डेस्कटॉप तगर स्केल करने आह् ले त्रै स्तंभ हासल करो । याद रखो, ग्रिड स्तंभें गी इक क्षैतिज ब्लॉक आस्तै बारह तगर जोड़ना चाहिदा ऐ। उसदे शा मता, ते स्तंभ ढेर करना शुरू करदे न चाहे व्यूपोर्ट कोई फर्क नेईं पौंदा।

.कोल-एमडी-3 ऐ

.कोल-एमडी-6 ऐ

.कोल-एमडी-3 ऐ

दो स्तंभ

डेस्कटॉप थमां शुरू होने आह् ले ते बड्डे डेस्कटॉप तगर स्केल करने आह् ले दो स्तंभ हासल करो .

.कोल-एमडी-8 ऐ

.कोल-एमडी-4 ऐ

पूरी चौड़ाई, इकल स्तंभ

पूर्ण-चौड़ाई तत्वें लेई कोई बी ग्रिड वर्ग जरूरी नेईं ऐ।

दो नेस्टेड स्तंभें कन्नै दो स्तंभ

दस्तावेजीकरण दे अनुसार, नेस्टिंग आसान ऐ-बस इक मौजूदा स्तंभ दे अंदर स्तंभें दी इक पंक्ति रक्खो. एह् तुसेंगी डेस्कटॉप थमां शुरू होने आह् ले ते बड्डे डेस्कटॉप तगर स्केल करने आह् ले दो स्तंभ दिंदा ऐ , जिसदे कन्नै बड्डे स्तंभ दे अंदर इक होर दो (बराबर चौड़ाई) होंदे न.

मोबाइल डिवाइस दे आकार, टैबलेट ते डाउन पर, एह् स्तंभ ते उंदे नेस्टेड स्तंभ ढेर होङन।

.कोल-एमडी-8 ऐ

.कोल-एमडी-6 ऐ

.कोल-एमडी-4 ऐ

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

बूटस्ट्रैप v4 ग्रिड सिस्टम च वर्गें दे पंज स्तर न: xs (अतिरिक्त छोटा, इस वर्ग इन्फिक्स दा इस्तेमाल नेईं कीता जंदा ऐ), sm (छोटा), md (मध्यम), lg (बड्डा), ते xl (अतिरिक्त बड्डा)। तुस होर गतिशील ते लचीले लेआउट बनाने लेई इनें वर्गें दे लगभग कुसै बी संयोजन दा इस्तेमाल करी सकदे ओ।

कक्षाएं दा हर इक स्तर स्केल करदा ऐ, मतलब जेकर तुस md, lg ते xl आस्तै इक गै चौड़ाई सेट करने दी योजना बनांदे ओ तां तुसेंगी सिर्फ md निर्दिश्ट करने दी लोड़ ऐ.

.कोल-एमडी-8 ऐ

.कोल-6 .कोल-एमडी-4 ऐ

.कोल-6 दा

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

.कोल-एसएम-6 .कोल-एलजी-8 ऐ

.कोल-6 .कोल-एलजी-4 ऐ

.कोल-6 .कोल-एसएम-4 ऐ

गटर

क्लासें कन्नै .gx-*क्षैतिज गटरें गी समायोजित कीता जाई सकदा ऐ।

.col.gx-4नाली दे नाल

.gy-*ऊर्ध्वाधर गटरें गी नियंत्रित करने आस्तै क्लासें दा इस्तेमाल करो ।

.col.gy-4नाली दे नाल

क्लासें कन्नै .g-*, दौनें दिशाएं च गटरें गी समायोजित कीता जाई सकदा ऐ।

.col.g-3नाली दे नाल

कंटेनर

बूटस्ट्रैप v4.4 च जोड़े गेदे अतिरिक्त वर्गें कन्नै उनें कंटेनरें दी अनुमति दित्ती जंदी ऐ जेह् ड़े इक खास ब्रेकपॉइंट तगर 100% चौड़ा होंदे न. v5 इक नमां xxlब्रेकपॉइंट जोड़दा ऐ।

.कंटेनर दा

.कंटेनर-एस एम

.कंटेनर-मडी

.कंटेनर-एलजी

.कंटेनर-एक्सएल

.कंटेनर-xxl दा

.कंटेनर-तरल पदार्थ दा