मचान

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

१

बूटस्ट्रॅपचा भाग म्हणून प्रदान केलेली डीफॉल्ट ग्रिड प्रणाली 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*

उदाहरण

नेस्टेड पंक्तींमध्ये स्तंभांचा संच समाविष्ट केला पाहिजे जो त्याच्या मूळ स्तंभांच्या संख्येपर्यंत जोडतो. उदाहरणार्थ, दोन नेस्टेड .span3स्तंभ एक मध्ये ठेवले पाहिजेत .span6.

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

स्तर 2

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

द्रव स्तंभ

१

टक्के, पिक्सेल नाही

फ्लुइड ग्रिड सिस्टीम निश्चित पिक्सेलऐवजी स्तंभाच्या रुंदीसाठी टक्के वापरते. यात आमच्या फिक्स्ड ग्रिड सिस्टीम प्रमाणेच प्रतिसादात्मक भिन्नता देखील आहेत, की स्क्रीन रिझोल्यूशन आणि उपकरणांसाठी योग्य प्रमाण सुनिश्चित करते.

द्रव पंक्ती

फक्त मध्ये बदलून कोणताही पंक्ती द्रव .rowबनवा .row-fluid. स्तंभ तंतोतंत सारखेच राहतात, ज्यामुळे ते स्थिर आणि द्रव लेआउट दरम्यान फ्लिप करणे अगदी सोपे होते.

मार्कअप

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

द्रव घरटे

फ्लुइड ग्रिडसह नेस्टिंग करणे थोडे वेगळे आहे: नेस्टेड कॉलमची संख्या पालकांशी जुळणे आवश्यक नाही. त्याऐवजी, तुमचे स्तंभ प्रत्येक स्तरावर रीसेट केले जातात कारण प्रत्येक पंक्ती मूळ स्तंभाच्या 100% भाग घेते.

द्रवपदार्थ 12

द्रव 6

<div class = "row-fluid" > 
  <div वर्ग = "span12" > 
    स्तंभाचा स्तर 1
    <div class = "row-fluid" > 
      <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 ते 979px	42px	20px
डीफॉल्ट	980px आणि वर	60px	20px
मोठा डिस्प्ले	1210px आणि वर	७०px	30px

मेटा टॅग आवश्यक आहे

डिव्हाइसेस योग्यरित्या प्रतिसाद देणारी पृष्ठे प्रदर्शित करतात याची खात्री करण्यासाठी, व्ह्यूपोर्ट मेटा टॅग समाविष्ट करा.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

ते काय करतात

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

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

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

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

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

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

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