बूटस्ट्रैप दे हिस्से दे रूप च उपलब्ध करोआए गेदे डिफाल्ट ग्रिड सिस्टम इक 940px-चौड़ाई, 12-स्तंभ ग्रिड ऐ .

एह्दे च बक्ख-बक्ख उपकरणें ते रिजोल्यूशनें लेई चार प्रतिक्रियाशील बदलाव बी न: फोन, टैबलेट पोर्ट्रेट, टेबल लैंडस्केप ते छोटे डेस्कटॉप, ते बड्डे वाइडस्क्रीन डेस्कटॉप।

<div वर्ग = "पंक्ति" > ऐ 
  <div वर्ग = "span4" > ... </div> ऐ 
  <div वर्ग = "span8" > ... </div> ऐ 
</div> दा

जि’यां इत्थै दिक्खेआ गेआ ऐ, इक बुनियादी लेआउट दो "स्तंभें" कन्नै बनाया जाई सकदा ऐ, हर इक 12 बुनियादी स्तंभें दी इक नंबर गी फैले दा ऐ जिनेंगी अस अपने ग्रिड प्रणाली दे हिस्से दे रूप च परिभाशत कीता ऐ।

बूटस्ट्रैप च स्थिर (गैर-द्रव) ग्रिड सिस्टम कन्नै, नेस्टिंग करना आसान ऐ। अपनी सामग्री गी नेस्ट करने आस्तै, बस इक मौजूदा स्तंभ दे अंदर इक नमां .rowते स्तंभें दा सेट जोड़ो ..span*.span*

मसाल

नेस्टेड पंक्तियें च स्तंभें दा इक सेट शामल होना चाहिदा जेह् ड़ा इसदे माता-पिता दे स्तंभें दी गिनतरी च जोड़दा ऐ. मसाल आस्तै, दो नेस्टेड .span3स्तंभें गी इक .span6.

<div वर्ग = "पंक्ति" > ऐ 
  <div वर्ग = "स्पैन12" > ऐ 
    स्तंभ दा लेवल 1
    <div वर्ग = "पंक्ति" > ऐ 
      <div class = "span6" > स्तर 2 </div> ऐ 
      <div class = "span6" > स्तर 2 </div> ऐ 
    </div> दा
  </div> दा
</div> दा

प्रतिशत, पिक्सेल नेईं

द्रव ग्रिड प्रणाली स्थिर पिक्सेल दी बजाय स्तंभ चौड़ाई आस्तै प्रतिशत दा उपयोग करदी ऐ। एह्दे च साढ़े स्थिर ग्रिड प्रणाली दे समान प्रतिक्रियाशील बदलाव बी होंदे न, जेह् ड़े कुंजी स्क्रीन रिजोल्यूशन ते उपकरणें लेई उचित अनुपात गी सुनिश्चित करदे न।

तरल पंक्तियां

किसी भी पंक्ति गी बस बदलने कन्नै तरल .rowबनाओ .row-fluid. स्तंभ बिल्कुल उसी गै रौंह्दे न, जिस कन्नै फिक्स्ड ते फ्लूइड लेआउट दे बीच फ्लिप करना सुपर सीधा होई जंदा ऐ।

मार्कअप करना

<div वर्ग = "पंक्ति-द्रव" > 
  <div वर्ग = "span4" > ... </div> ऐ 
  <div वर्ग = "span8" > ... </div> ऐ 
</div> दा

तरल ग्रिड कन्नै नेस्टिंग थोह् ड़ी-मती बक्खरी ऐ : नेस्टेड स्तंभें दी गिनतरी गी माता-पिता कन्नै मेल खंदा ऐ। इसदे बजाय, तुंदे स्तंभ हर स्तर पर रीसेट कीते जंदे न कीजे हर पंक्ति माता-पिता स्तंभ दा 100% लैंदी ऐ.

<div वर्ग = "पंक्ति-द्रव" > 
  <div वर्ग = "स्पैन12" > ऐ 
    स्तंभ दा लेवल 1
    <div वर्ग = "पंक्ति-द्रव" > 
      <div class = "span6" > स्तर 2 </div> ऐ 
      <div class = "span6" > स्तर 2 </div> ऐ 
    </div> दा
  </div> दा
</div> दा

कम च चर

बूटस्ट्रैप च बने दे डिफाल्ट 940px ग्रिड सिस्टम गी अनुकूलित करने आस्तै इक मुट्ठी भर चर न, जेह् ड़े उप्पर दस्तावेज कीते गेदे न. ग्रिड आस्तै सारे चर चर च संग्रहीत कीते जंदे न.less.

कस्टमाइज करने दा तरीका

ग्रिड गी संशोधित करने दा मतलब ऐ त्रै @grid*चर गी बदलना ते बूटस्ट्रैप गी दुबारा संकलित करना। चर.कम च ग्रिड चर बदलो ते पुनर्संकलन करने लेई दस्तावेज कीते गेदे चार तरीकें च इक दा इस्तेमाल करो . जेकर तुस होर स्तंभ जोड़दे ओ तां grid.less च औने आह् ले आस्तै CSS गी ज़रूर जोड़ो.

प्रतिक्रियाशील रहना

ग्रिड दा अनुकूलन सिर्फ डिफाल्ट स्तर पर गै कम्म करदा ऐ, 940px ग्रिड. बूटस्ट्रैप दे प्रतिक्रियाशील पहलूएं गी बनाए रखने लेई, तुसेंगी रिस्पांसिव.लेस च ग्रिड्स गी बी अनुकूलित करना होग।

फिक्स्ड लेआउट

इक गै <div class="container">.

<शरीर> दा
  <div वर्ग = "कंटेनर" > ऐ 
    ...
  </div> दा
</body> दा

तरल पदार्थ लेआउट

<div class="container-fluid">लचीला पृष्ठ संरचना, मिन- ते मैक्स-चौड़ाई, ते इक बाएं-हत्थ साइडबार दिंदा ऐ। एह् ऐप ते डॉक्स आस्तै बड़ा शैल ऐ।

<div वर्ग = "कंटेनर-द्रव" > 
  <div वर्ग = "पंक्ति-द्रव" > 
    <div वर्ग = "स्पैन2" > ऐ 
      <!--साइडबार सामग्री-->
    </div> दा
    <div वर्ग = "स्पैन10" > ऐ 
      <!--शरीर दी सामग्री-->
    </div> दा
  </div> दा
</div> दा

समर्थत उपकरण

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

मेटा टैग दी लोड़ ऐ

डिवाइस प्रतिक्रियाशील पन्नें गी ठीक ढंगै कन्नै प्रदर्शत करने गी सुनिश्चत करने आस्तै, व्यूपोर्ट मेटा टैग शामल करो.

<meta name = "viewport" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाने = 1.0" >  

क्या करदे ने

मीडिया क्वेरी इक नंबर दी शर्तें दे आधार उप्पर कस्टम CSS दी अनुमति दिंदी ऐ-अनुपात, चौड़ाई, प्रदर्शन प्रकार बगैरा-पर आमतौर पर min-widthते max-width.

• साढ़ी ग्रिड च स्तंभ दी चौड़ाई गी संशोधित करो
• जित्थें बी लोड़चदा ऐ फ्लोट करने दे बजाय तत्वें गी ढेर करो
• डिवाइस आस्तै मता उपयुक्त होने आस्तै हेडिंग ते पाठ दा आकार बदलो

बूटस्ट्रैप च एह् मीडिया क्वेरी स्वतः शामल नेईं ऐ , पर इन्हें गी समझना ते जोड़ना बड़ा सौखा ऐ ते घट्ट शा घट्ट सेटअप दी लोड़ ऐ । बूटस्ट्रैप दे प्रतिक्रियाशील सुविधाएं गी शामल करने लेई तुंदे कोल किश विकल्प न:

1. संकलित प्रतिक्रियाशील संस्करण, bootstrap-responsive.css दा उपयोग करो
2. @import "responsive.less" जोड़ो ते बूटस्ट्रैप गी दुबारा संकलित करो
3. responsive.less गी इक बक्खरी फाइल दे रूप च संशोधित ते दुबारा संकलित करो

क्यों न सिर्फ इसे शामिल कीता? सच कहूँ तां हर गल्ल गी जवाबदेह होने दी लोड़ नेईं ऐ। डेवलपर्स गी इस सुविधा गी हटाने लेई प्रोत्साहित करने दे बजाय, अस इसगी सक्षम करने लेई बेहतर तरीके कन्नै समझने आं।

  // लैंडस्केप फोन ते डाउन
  @ मीडिया ( अधिकतम - चौड़ाई : 480px ) { ... } ऐ।     
 
  // चित्र टैबलेट करने के लिए लैंडस्केप फोन
  @ मीडिया ( अधिकतम - चौड़ाई : 768px ) { ... } ऐ।     
 
  // लैंडस्केप ते डेस्कटॉप गी पोर्ट्रेट टैबलेट
  @मीडिया ( मिनट - चौड़ाई : 768px ) ते ( अधिकतम - चौड़ाई : 980px ) { ... }        
 
  // बड़ा डेस्कटॉप
  @ मीडिया ( मिन - चौड़ाई : 1200px ) { .. } ऐ।