मचान

बूटस्ट्रॅप प्रतिसादात्मक 12-स्तंभ ग्रिडवर तयार केला आहे. आम्ही त्या प्रणालीवर आधारित निश्चित- आणि द्रव-रुंदीचे लेआउट देखील समाविष्ट केले आहेत.

डीफॉल्ट 940px ग्रिड

१

बूटस्ट्रॅपचा भाग म्हणून प्रदान केलेली डीफॉल्ट ग्रिड प्रणाली 940px-विस्तृत, 12-स्तंभ ग्रिड आहे.

यामध्ये विविध उपकरणे आणि रिझोल्यूशनसाठी चार प्रतिसादात्मक भिन्नता देखील आहेत: फोन, टॅबलेट पोर्ट्रेट, टेबल लँडस्केप आणि लहान डेस्कटॉप आणि मोठे वाइडस्क्रीन डेस्कटॉप.

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

येथे दर्शविल्याप्रमाणे, एक मूलभूत मांडणी दोन "स्तंभांसह" तयार केली जाऊ शकते, प्रत्येक 12 मूलभूत स्तंभांची संख्या आहे जी आम्ही आमच्या ग्रिड प्रणालीचा भाग म्हणून परिभाषित केली आहे.

ऑफसेटिंग स्तंभ

4 ऑफसेट 4

3 ऑफसेट 3

8 ऑफसेट 4

<div वर्ग = "पंक्ती" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

नेस्टिंग स्तंभ

बूटस्ट्रॅपमधील स्थिर (नॉन-फ्लुइड) ग्रिड प्रणालीसह, घरटे बांधणे सोपे आहे. तुमची सामग्री नेस्ट करण्यासाठी, विद्यमान स्तंभामध्ये फक्त एक नवीन .rowआणि स्तंभांचा संच जोडा ..span*.span*

उदाहरण

स्तंभाचा स्तर 1

स्तर 2

<div वर्ग = "पंक्ती" > 
  <div वर्ग = "span12" > 
    स्तंभाचा स्तर 1
    <div वर्ग = "पंक्ती" > 
      <div class = "span6" > स्तर २ </div> 
      <div class = "span6" > स्तर २ </div> 
    </div>
  </div>
</div>

ग्रिड सानुकूलन

चल	डीफॉल्ट मूल्य	वर्णन
`@gridColumns`	12	स्तंभांची संख्या
`@gridColumnWidth`	60px	प्रत्येक स्तंभाची रुंदी
`@gridGutterWidth`	20px	स्तंभांमधील नकारात्मक जागा
`@siteWidth`	सर्व स्तंभ आणि गटरांची गणना केलेली बेरीज	`.container-fixed()`मिक्सिनची रुंदी सेट करण्यासाठी स्तंभ आणि गटरची संख्या मोजते

व्हेरिएबल्स कमी

बूटस्ट्रॅपमध्ये अंगभूत मुलभूत 940px ग्रिड प्रणाली सानुकूलित करण्यासाठी मूठभर चल आहेत, वर दस्तऐवजीकरण. ग्रिडसाठी सर्व व्हेरिएबल्स variables.less मध्ये संग्रहित आहेत.

कसे सानुकूलित करावे

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

प्रतिसाद देत राहणे

ग्रिडचे सानुकूलन केवळ डीफॉल्ट स्तरावर, 940px ग्रिडवर कार्य करते. बूटस्ट्रॅपचे प्रतिसादात्मक पैलू राखण्यासाठी, तुम्हाला responsive.less मध्‍ये ग्रिड देखील सानुकूलित करावे लागतील.

निश्चित मांडणी

डीफॉल्ट आणि साधे 940px-विस्तृत, एका द्वारे प्रदान केलेल्या कोणत्याही वेबसाइट किंवा पृष्ठासाठी केंद्रीत मांडणी <div class="container">.

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

द्रव लेआउट

<div class="container-fluid">लवचिक पृष्ठ रचना, किमान- आणि कमाल-रुंदी आणि डावीकडील साइडबार देते. हे अॅप्स आणि डॉक्ससाठी उत्तम आहे.

<div वर्ग = "कंटेनर-फ्लुइड" > 
  <div class = "row-fluid" > 
    <div वर्ग = "span2" > 
      <!--साइडबार सामग्री-->
    </div>
    <div class = "span10" > 
      <!--शरीर सामग्री-->
    </div>
  </div>
</div>

सहाय्यीकृत उपकरणे

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

लेबल	लेआउट रुंदी	स्तंभाची रुंदी	गटर रुंदी
स्मार्टफोन	480px आणि खाली	द्रव स्तंभ, निश्चित रुंदी नाही
पोर्ट्रेट टॅब्लेट	480px ते 768px	द्रव स्तंभ, निश्चित रुंदी नाही
लँडस्केप गोळ्या	768px ते 940px	44px	20px
डीफॉल्ट	940px आणि वर	60px	20px
मोठा डिस्प्ले	1210px आणि वर	७०px	30px

ते काय करतात

मीडिया क्वेरी अनेक परिस्थितींवर आधारित सानुकूल CSS ला अनुमती देतात—प्रमाण, रुंदी, डिस्प्ले प्रकार, इ—परंतु सामान्यतः सुमारे min-widthआणि max-width.

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

मीडिया क्वेरी वापरणे

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

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

फक्त त्यात समाविष्ट का नाही? खरे सांगायचे तर, प्रत्येक गोष्टीला प्रतिसाद देण्याची गरज नाही. हे वैशिष्ट्य काढून टाकण्यासाठी विकासकांना प्रोत्साहित करण्याऐवजी, ते सक्षम करणे आम्ही सर्वोत्तम समजतो.

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