मचान

बूटस्ट्रैप एकटा रिस्पांसिव 12-कॉलम ग्रिड पर बनल अछि. हम ओहि सिस्टम के आधार पर फिक्स्ड- आ फ्लूइड-विड्थ लेआउट सेहो शामिल केने छी.

पूर्वनिर्धारित 940px ग्रिड

१

४

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

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

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

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

कॉलम ऑफसेट करब

४

४ ऑफसेट ४

३ ऑफसेट ३

8 ऑफसेट 4

<div वर्ग = "पंक्ति" > 
  <div वर्ग = "span4" > ... </div> 
  <div वर्ग = "span4 ऑफसेट4" > ... </div> 
</div>

घोंसला बनाना स्तंभ

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

उदाहरण

स्तंभ के स्तर 1

स्तर 2

<div वर्ग = "पंक्ति" > 
  <div वर्ग = "span12" > 
    स्तंभ के स्तर 1
    <div वर्ग = "पंक्ति" > 
      <div class = "span6" > स्तर 2 </div> 
      <div class = "span6" > स्तर 2 </div> 
    </div>
  </div>
</div>

ग्रिड अनुकूलन

चर वाला	पूर्वनिर्धारित मान	वर्णन
`@gridColumns`	12	स्तंभों की संख्या
`@gridColumnWidth`	60px के	प्रत्येक स्तंभ की चौड़ाई
`@gridGutterWidth`	20px के	स्तंभ के बीच नकारात्मक स्थान
`@siteWidth`	सब स्तंभ एवं गटर के गणना योग	`.container-fixed()`मिक्सिन के चौड़ाई सेट करय लेल कॉलम आ गटर के संख्या गिनैत अछि

कम में चर

बूटस्ट्रैप मे निर्मित डिफ़ॉल्ट 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>

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

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

नाम-पत्र	लेआउट चौड़ाई	स्तंभ चौड़ाई	गटर चौड़ाई
स्मार्टफोन	480px आ नीचाँ	द्रव स्तंभ, कोनो निश्चित चौड़ाई नहि
चित्र गोलियाँ	480px से 768px तक	द्रव स्तंभ, कोनो निश्चित चौड़ाई नहि
परिदृश्य गोलियाँ	768px से 940px तक	44px के	20px के
चुकनाइ	940px आ ऊपर	60px के	20px के
बड़ा डिस्प्ले	1210px आ ऊपर	70px के	30px के

जे करै छै

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

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

मीडिया क्वेरीज के उपयोग करब

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

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

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

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