बूटस्ट्रॅपाचो भाग म्हूण पुरवण केल्ली मुलभूत ग्रिड प्रणाली 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> हें नांव

LESS मदीं चड-उणें

बूटस्ट्रॅपांत तयार केल्ले मुलभूत 940px ग्रिड प्रणाली पसंतीचे करपाखातीर मुठीभर चड-उणें आसात, वयर दस्तावेजीत केल्यात. ग्रिडा खातीर सगळे चड-उणें चडांत चडांत सांठोवन दवरतात.less.

कशें सानुकूल करप

ग्रिडांत बदल करप म्हणल्यार तीन व्हेरिएबल बदलप @grid*आनी बूटस्ट्रॅप परतून संकलित करप. variables.less मदीं ग्रिड चडांत चड बदलात आनी पुनर्संकलन करपाक दस्तावेजीत केल्ल्या चार मार्गांतलो एक वापरात . तुमी चड स्तंभ जोडटात जाल्यार, grid.less हातूंत आशिल्ल्यांखातीर CSS जोडपाची खात्री करात.

प्रतिसाद दिवपी रावप

ग्रिडाचें पसंतीचें काम फकत मुलभूत पातळेचेर, 940px ग्रिडाचेर काम करता. Bootstrap च्या प्रतिसादात्मक आंगांक सांबाळपाक, तुमकां responsive.less हातूंत ग्रिड पसंतीचेय करचे पडटले.

स्थिर मांडावळ

मुलभूत आनी सादी 940px-रुंद, केंद्रीत मांडावळ फकत जवळजवळ खंयच्याय संकेतथळा खातीर वा पान एकेच पुरवण केल्या <div class="container">.

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

द्रव मांडावळ

<div class="container-fluid">लवचीक पान रचणूक, किमान- आनी चडांत चड-रुंदी, आनी डाव्या हाताची बाजूची पट्टी दिता. ऍप्लिकेशनां आनी डॉक्स खातीर तो बरोच.

<div class = "कंटेनर-द्रव" > 
  <div वर्ग = "ओळ-द्रव" > 
    <div वर्ग = "span2" > 
      <!--साइडबार आशय-->
    </div> हें नांव
    <div वर्ग = "span10" > 
      <!--शरीर आशय-->
    </div> हें नांव
  </div> हें नांव
</div> हें नांव

समर्थीत साधनां

वेगवेगळ्या डिव्हायसांचेर आनी स्क्रीन रिझोल्यूशनांचेर तुमचे प्रकल्प चड योग्य करपाक मदत करपाक बूटस्ट्रॅप मुठीभर माध्यम क्वेरींक तेंको दिता. हांगा कितें आस्पावलां तें पळयात:

ते कितें करतात

माध्यम क्वेरी जायत्या अटींचेर आदारीत सानुकूल CSS परवानगी दितात-प्रमाण, रुंदाय, प्रदर्शन प्रकार, आदी-पूण चड करून min-widthआनी भोंवतणी लक्ष केंद्रीत करता max-width.

• आमच्या ग्रिडांतल्या स्तंभाची रुंदाय बदलची
• गरज पडटा थंय फ्लोट करचे बदला घटक स्टॅक करात
• साधनांखातीर चड योग्य जावपाक शीर्षकां आनी मजकूर आकार बदलचो

बूटस्ट्रॅपांत आपोआप ह्यो मिडिया क्वेरी आसपावीत करिनात, पूण तीं समजून घेवप आनी जोडप खूब सोंपें आसा आनी उण्यांत उणें सेटअप जाय पडटा. बूटस्ट्रॅपाची प्रतिसाद दिवपी वैशिश्ट्यां समाविष्ट करपा खातीर तुमचे कडेन कांय पर्याय आसात:

1. संकलित प्रतिसाद दिवपी आवृत्ती, bootstrap-responsive.css वापरात
2. @import "responsive.less" जोडात आनी बूटस्ट्रॅप परतून संकलित करात
3. बदलप आनी परतून संकलित करप प्रतिसाद.less एक वेगळे म्हणून

फकत ताचो आस्पाव कित्याक करचो ना? खरेंच सांगचें जाल्यार सगळें प्रतिसाद दिवपाची गरज ना. विकसकांक हें वैशिश्ट्य काडून उडोवपाक प्रोत्साहन दिवचे परस, आमी तें सक्षम करप सगळ्यांत बरें अशें मानतात.

  // लॅंडस्केप फोन आनी सकयल
  @मीडिया ( कमाल - रुंदी : 480px ) { ... } .     
 
  // पोर्ट्रेट टॅबलेट करपाक लॅंडस्केप फोन
  @मीडिया ( कमाल - रुंदी : 768px ) { ... } .     
 
  // लॅंडस्केप आनी डेस्कटॉपाचेर पोर्ट्रेट टॅबलेट
  @media ( min - width : 768px ) आनी ( max - width : 940px ) { ... } .        
 
  // व्हड डेस्कटॉप
  @मीडिया ( मिनिट - रुंदी : 1200px ) { . } .