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

एकरा म॑ विभिन्न डिवाइस आरू रिजोल्यूशन लेली चार रिस्पांसिव वेरिएशन भी छै: फोन, टैबलेट पोर्ट्रेट, टेबल लैंडस्केप आरू छोटऽ डेस्कटॉप, आरू बड़ऽ वाइडस्क्रीन डेस्कटॉप ।

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

जैना की यहाँ ददखाया गया है, एक बेसिक लेआउट दू "स्तंभ" के साथ बनायल जा सकय छै, प्रत्येक 12 बुनियादी कॉलम कें एक नंबर कें फैलल छै जे हम अपनय ग्रिड प्रणाली कें हिस्सा कें रूप मे परिभाषित करलकय छै.

बूटस्ट्रैप मे स्थिर (गैर-द्रव) ग्रिड सिस्टम कें साथ, नेस्टिंग आसान छै. अपन सामग्री के नेस्ट करय लेल, बस कोनो मौजूदा कॉलम के भीतर एकटा नव .rowआओर कॉलम के सेट जोड़ू ..span*.span*

उदाहरण

नेस्टेड पंक्तियक मे कॉलम कें एकटा सेट शामिल होबाक चाही जे एकर पैरेंट कें कॉलम कें संख्या कें जोड़य. जेना, दूटा नेस्टेड .span3कॉलम कें एकटा .span6.

<div वर्ग = "पंक्ति" > 
  <div वर्ग = "span12" > 
    स्तंभ के स्तर 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 वर्ग = "span12" > 
    स्तंभ के स्तर 1
    <div वर्ग = "पंक्ति-द्रव" > 
      <div class = "span6" > स्तर 2 </div> 
      <div class = "span6" > स्तर 2 </div> 
    </div>
  </div>
</div>

कम में चर

बूटस्ट्रैप मे निर्मित डिफ़ॉल्ट 940px ग्रिड सिस्टम कें अनुकूलित करय कें लेल मुट्ठी भर चर छै, जे ऊपर दस्तावेजबद्ध छै. ग्रिड कें लेल सबटा चर चर.कम मे संग्रहीत कैल जैतय छै.

कस्टमाइज केना करब

ग्रिड कें संशोधित करय कें मतलब छै तीन @grid*चर कें बदलनाय आ बूटस्ट्रैप कें पुनः संकलित करनाय. variables.less मे ग्रिड चर बदलू आओर पुनर्संकलन करबाक लेल दस्तावेज कएल गेल चारि तरीका मे स एकटा क उपयोग करू . जँ अहाँ आओर कॉलम जोड़ि रहल छी तँ grid.less मे रहनिहार लेल CSS अवश्य जोड़ू.

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

ग्रिड कें अनुकूलन केवल डिफ़ॉल्ट स्तर पर काज करयत छै, 940px ग्रिड. बूटस्ट्रैप केरऽ रिस्पांसिव पहलू क॑ बनाए रखै लेली, आपक॑ रिस्पांसिव.लेस म॑ ग्रिड क॑ भी अनुकूलित करै ल॑ पड़तै ।

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

डिफ़ॉल्ट आ सरल 940px-व्यापी, केंद्रित लेआउट बस लगभग कोनो वेबसाइट या पृष्ठ के लेल जे एकटा द्वारा उपलब्ध कराओल गेल अछि <div class="container">.

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

द्रव लेआउट

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

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

समर्थित उपकरण

बूटस्ट्रैप एकटा फाइल मे मुट्ठी भर मीडिया क्वेरी कें समर्थन करयत छै जे अलग-अलग डिवाइस आ स्क्रीन रिजोल्यूशन पर अहां कें प्रोजेक्ट कें बेसि उपयुक्त बनावा मे मदद करतय. एहि ठाम की शामिल अछि:

मेटा टैग के आवश्यकता अछि

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

<मेटा नाम = "दृश्यपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाना = 1.0" >  

जे करै छै

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

• हमर ग्रिड मे कॉलम के चौड़ाई संशोधित करू
• जहाँ आवश्यक हो फ्लोट के बजाय तत्वों को ढेर करें |
• हेडिंग आओर पाठ के आकार बदलू जे डिवाइस के लेल बेसी उपयुक्त होए

बूटस्ट्रैप म॑ ई मीडिया क्वेरी क॑ स्वचालित रूप स॑ शामिल नै करलऽ जाय छै, लेकिन एकरा समझना आरू जोड़ना बहुत आसान छै आरू न्यूनतम सेटअप के जरूरत छै । बूटस्ट्रैप के रिस्पांसिव फीचर शामिल करय के लेल अहां के पास किछ विकल्प अछि:

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

कियैक नहि खाली एकरा शामिल करब? सच पूछू त सब किछु प्रतिक्रियाशील हेबाक जरूरत नहि अछि। डेवलपर क॑ ई सुविधा क॑ हटाबै लेली प्रोत्साहित करै के बजाय, हम्मं॑ एकरा सक्षम करना सबसे अच्छा समझै छियै ।

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