बूटस्ट्रैप के हिस्सा के रूप में दिहल गइल डिफ़ॉल्ट ग्रिड सिस्टम 940px-चौड़ा, 12-कॉलम ग्रिड हवे ।

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

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

जइसे कि इहाँ देखावल गइल बा, दू गो "कॉलम" के साथ एगो बेसिक लेआउट बनावल जा सके ला, हर कॉलम ओह 12 गो फाउंडेशन कॉलम सभ में से एगो नंबर के बिस्तार करे ला जेकरा के हमनी के ग्रिड सिस्टम के हिस्सा के रूप में परिभाषित कइले बानी जा।

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

उदाहरण

<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> के बा
</body> के बा

तरल पदार्थ के लेआउट के बारे में बतावल गइल बा

<div class="container-fluid">लचीला पन्ना संरचना, न्यूनतम- आ अधिकतम-चौड़ाई, आ बाईं ओर के साइडबार देला। ऐप आ डॉक्स खातिर ई बहुते बढ़िया बा.

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

समर्थित डिवाइस बा

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

उ लोग का करेला

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

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

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

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

काहे ना खाली एकरा के शामिल कइल जाव? सच पूछीं त हर बात के जवाबदेह होखे के जरूरत नइखे. डेवलपर लोग के एह फीचर के हटावे खातिर प्रोत्साहित करे के बजाय हमनी के एकरा के सक्षम कइल सभसे नीक लागे ला।

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