बूटस्ट्रैप इक प्रतिक्रियाशील 12-स्तंभ ग्रिड पर बनाया गेदा ऐ। अस उस सिस्टम दे आधार उप्पर फिक्स्ड- ते फ्लूइड-विड्थ लेआउट बी शामल कीते न।
बूटस्ट्रैप दे हिस्से दे रूप च उपलब्ध करोआए गेदे डिफाल्ट ग्रिड सिस्टम इक 940px-चौड़ाई, 12-स्तंभ ग्रिड ऐ .
एह्दे च बक्ख-बक्ख उपकरणें ते रिजोल्यूशनें लेई चार प्रतिक्रियाशील बदलाव बी न: फोन, टैबलेट पोर्ट्रेट, टेबल लैंडस्केप ते छोटे डेस्कटॉप, ते बड्डे वाइडस्क्रीन डेस्कटॉप।
- <div वर्ग = "पंक्ति" > ऐ
- <div वर्ग = "span4" > ... </div> ऐ
- <div वर्ग = "span8" > ... </div> ऐ
- </div> दा
जि’यां इत्थै दिक्खेआ गेआ ऐ, इक बुनियादी लेआउट दो "स्तंभें" कन्नै बनाया जाई सकदा ऐ, हर इक 12 बुनियादी स्तंभें दी इक नंबर गी फैले दा ऐ जिनेंगी अस अपने ग्रिड प्रणाली दे हिस्से दे रूप च परिभाशत कीता ऐ।
- <div वर्ग = "पंक्ति" > ऐ
- <div वर्ग = "span4" > ... </div> ऐ
- <div वर्ग = "span4 ऑफसेट4" > ... </div> ऐ
- </div> दा
बूटस्ट्रैप च स्थिर (गैर-द्रव) ग्रिड सिस्टम कन्नै, नेस्टिंग करना आसान ऐ। अपनी सामग्री गी नेस्ट करने आस्तै, बस इक मौजूदा स्तंभ दे अंदर इक नमां .row
ते स्तंभें दा सेट जोड़ो ..span*
.span*
- <div वर्ग = "पंक्ति" > ऐ
- <div वर्ग = "स्पैन12" > ऐ
- स्तंभ दा लेवल 1
- <div वर्ग = "पंक्ति" > ऐ
- <div class = "span6" > स्तर 2 </div> ऐ
- <div class = "span6" > स्तर 2 </div> ऐ
- </div> दा
- </div> दा
- </div> दा
चर करने आला | डिफ़ॉल्ट मान ऐ | ब्यौरा |
---|---|---|
@gridColumns |
12 दा | स्तंभों की संख्या |
@gridColumnWidth |
60पीएक्स ऐ | हर स्तंभ दी चौड़ाई |
@gridGutterWidth |
20पीएक्स ऐ | स्तंभें दे बिच्च नकारात्मक जगह |
@siteWidth |
सारे स्तंभ ते गटरें दा गणना कीता गेआ योग | .container-fixed() मिक्सिन दी चौड़ाई सेट करने आस्तै स्तंभें ते गटरें दी गिनतरी गिनदा ऐ |
बूटस्ट्रैप च बने दे डिफाल्ट 940px ग्रिड सिस्टम गी अनुकूलित करने आस्तै इक मुट्ठी भर चर न, जिंदा दस्तावेज उप्पर दित्ते गेदे न. ग्रिड आस्तै सारे चर चर च संग्रहीत कीते जंदे न.less.
ग्रिड गी संशोधित करने दा मतलब ऐ त्रै @grid*
चर गी बदलना ते बूटस्ट्रैप गी दुबारा संकलित करना। चर.less च ग्रिड चर बदलो ते पुनर्संकलन करने लेई दस्तावेज कीते गेदे चार तरीकें च इक दा इस्तेमाल करो . जेकर तुस होर स्तंभ जोड़दे ओ तां grid.less च होने आह् लें आस्तै CSS गी ज़रूर जोड़ो.
ग्रिड दा अनुकूलन सिर्फ डिफाल्ट स्तर पर गै कम्म करदा ऐ, 940px ग्रिड. बूटस्ट्रैप दे प्रतिक्रियाशील पहलूएं गी बनाए रखने लेई, तुसेंगी रिस्पांसिव.लेस च ग्रिड्स गी बी अनुकूलित करना होग।
इक गै <div class="container">
.
- <शरीर> दा
- <div वर्ग = "कंटेनर" > ऐ
- ...
- </div> दा
- </body> दा
<div class="container-fluid">
लचीला पृष्ठ संरचना, मिन- ते मैक्स-चौड़ाई, ते इक बाएं-हत्थ साइडबार दिंदा ऐ। एह् ऐप ते डॉक्स आस्तै बड़ा शैल ऐ।
- <div वर्ग = "कंटेनर-द्रव" >
- <div वर्ग = "पंक्ति-द्रव" >
- <div वर्ग = "स्पैन2" > ऐ
- <!--साइडबार सामग्री-->
- </div> दा
- <div वर्ग = "स्पैन10" > ऐ
- <!--शरीर दी सामग्री-->
- </div> दा
- </div> दा
- </div> दा
बूटस्ट्रैप बक्ख-बक्ख डिवाइसें ते स्क्रीन रिजोल्यूशनें पर तुंदे प्रोजेक्टें गी होर उचित बनाने च मदद करने आस्तै मुट्ठी भर मीडिया क्वेरी दा समर्थन करदा ऐ। एह्दे च केह् शामल ऐ:
ठप्पा | लेआउट चौड़ाई | स्तंभ चौड़ाई | गटर चौड़ाई |
---|---|---|---|
स्मार्टफोन दा | 480px ते उस थमां हेठ | तरल स्तंभ, कोई निश्चित चौड़ाई नहीं | |
पोर्ट्रेट गोलियां | 480px ते 768px | तरल स्तंभ, कोई निश्चित चौड़ाई नहीं | |
लैंडस्केप गोलियां | 768px ते 940px | 44पीएक्स ऐ | 20पीएक्स ऐ |
डिफाल्ट | 940px ते ऊपर | 60पीएक्स ऐ | 20पीएक्स ऐ |
बड़ा डिस्प्ले | 1210px ते ऊपर | 70पीएक्स ऐ | 30पीएक्स ऐ |
मीडिया क्वेरी इक नंबर दी शर्तें दे आधार उप्पर कस्टम CSS दी अनुमति दिंदी ऐ-अनुपात, चौड़ाई, प्रदर्शन प्रकार बगैरा-पर आमतौर पर min-width
ते max-width
.
बूटस्ट्रैप च एह् मीडिया क्वेरी स्वतः शामल नेईं ऐ , पर इन्हें गी समझना ते जोड़ना बड़ा सौखा ऐ ते घट्ट शा घट्ट सेटअप दी लोड़ ऐ । बूटस्ट्रैप दे प्रतिक्रियाशील सुविधाएं गी शामल करने लेई तुंदे कोल किश विकल्प न:
क्यों न सिर्फ इसे शामिल कीता? सच कहूँ तां हर गल्ल गी जवाबदेह होने दी लोड़ नेईं ऐ। डेवलपर्स गी इस सुविधा गी हटाने लेई प्रोत्साहित करने दे बजाय, अस इसगी सक्षम करने लेई बेहतर तरीके कन्नै समझने आं।
- // लैंडस्केप फोन ते डाउन
- @ मीडिया ( अधिकतम - चौड़ाई : 480px ) { ... } ऐ।
- // चित्र टैबलेट करने के लिए लैंडस्केप फोन
- @ मीडिया ( अधिकतम - चौड़ाई : 768px ) { ... } ऐ।
- // लैंडस्केप ते डेस्कटॉप गी पोर्ट्रेट टैबलेट
- @मीडिया ( मिनट - चौड़ाई : 768px ) ते ( अधिकतम - चौड़ाई : 940px ) { ... }
- // बड़ा डेस्कटॉप
- @ मीडिया ( मिन - चौड़ाई : 1200px ) { .. } ऐ।