मचान

बूटस्ट्रैप एक उत्तरदायी 12-स्तंभ ग्रिड पर बनाया गया है। हमने उस प्रणाली के आधार पर निश्चित और द्रव-चौड़ाई वाले लेआउट भी शामिल किए हैं।

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

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

इसमें विभिन्न उपकरणों और संकल्पों के लिए चार प्रतिक्रियाशील विविधताएं भी हैं: फोन, टैबलेट पोर्ट्रेट, टेबल लैंडस्केप और छोटे डेस्कटॉप, और बड़े वाइडस्क्रीन डेस्कटॉप।

  1. <div वर्ग = "पंक्ति" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span8" > ... </div>
  4. </div>

जैसा कि यहां दिखाया गया है, दो "स्तंभों" के साथ एक बुनियादी लेआउट बनाया जा सकता है, प्रत्येक में हमारे ग्रिड सिस्टम के हिस्से के रूप में परिभाषित 12 मूलभूत स्तंभों की संख्या होती है।


ऑफसेटिंग कॉलम

4
4 ऑफसेट 4
3 ऑफसेट 3
3 ऑफसेट 3
8 ऑफसेट 4
  1. <div वर्ग = "पंक्ति" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span4 ऑफ़सेट4" > ... </div>
  4. </div>

नेस्टिंग कॉलम

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

उदाहरण

कॉलम का स्तर 1
लेवल 2
लेवल 2
  1. <div वर्ग = "पंक्ति" >
  2. <div class = "span12" >
  3. कॉलम का स्तर 1
  4. <div वर्ग = "पंक्ति" >
  5. <div class = "span6" > लेवल 2 </div>
  6. <div class = "span6" > लेवल 2 </div>
  7. </div>
  8. </div>
  9. </div>

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

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

कम में चर

बूटस्ट्रैप में निर्मित डिफ़ॉल्ट 940px ग्रिड सिस्टम को अनुकूलित करने के लिए कुछ चर हैं, ऊपर प्रलेखित। ग्रिड के लिए सभी चर चर में संग्रहीत हैं। रहित।

कैसे अनुकूलित करें

ग्रिड को संशोधित करने का अर्थ है तीन @grid*चर बदलना और बूटस्ट्रैप को पुन: संकलित करना। ग्रिड वेरिएबल्स को वेरिएबल्स में बदलें। कम और पुन: संकलित करने के लिए प्रलेखित चार तरीकों में से एक का उपयोग करें । यदि आप अधिक कॉलम जोड़ रहे हैं, तो उन लोगों के लिए CSS जोड़ना सुनिश्चित करें जो grid.less में हैं।

उत्तरदायी रहना

ग्रिड का अनुकूलन केवल डिफ़ॉल्ट स्तर, 940px ग्रिड पर काम करता है। बूटस्ट्रैप के प्रतिक्रियाशील पहलुओं को बनाए रखने के लिए, आपको ग्रिड को responsive.less में भी अनुकूलित करना होगा।

निश्चित लेआउट

किसी एक वेबसाइट या पेज के लिए डिफ़ॉल्ट और सरल 940px-चौड़ा, केंद्रित लेआउट जो एक <div class="container">.

  1. <शरीर>
  2. <div क्लास = "कंटेनर" >
  3. ...
  4. </div>
  5. </body>

द्रव लेआउट

<div class="container-fluid">लचीली पृष्ठ संरचना, न्यूनतम और अधिकतम-चौड़ाई, और एक बाएं हाथ की साइडबार देता है। यह ऐप्स और डॉक्स के लिए बहुत अच्छा है।

  1. <div class = "कंटेनर-तरल पदार्थ" >
  2. <div class = "पंक्ति-द्रव" >
  3. <div class = "span2" >
  4. <!--साइडबार सामग्री-->
  5. </div>
  6. <div class = "span10" >
  7. <!--शारीरिक सामग्री-->
  8. </div>
  9. </div>
  10. </div>
उत्तरदायी उपकरण

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

बूटस्ट्रैप विभिन्न उपकरणों और स्क्रीन रिज़ॉल्यूशन पर आपकी परियोजनाओं को अधिक उपयुक्त बनाने में मदद करने के लिए मुट्ठी भर मीडिया प्रश्नों का समर्थन करता है। यहाँ क्या शामिल है:

लेबल लेआउट चौड़ाई स्तंभ की चौड़ाई नाले की चौड़ाई
स्मार्टफोन्स 480px और नीचे द्रव स्तंभ, कोई निश्चित चौड़ाई नहीं
पोर्ट्रेट टैबलेट 480px से 768px द्रव स्तंभ, कोई निश्चित चौड़ाई नहीं
लैंडस्केप टैबलेट 768px से 940px 44पीएक्स 20px
चूक 940px और ऊपर 60px 20px
बड़ा प्रदर्शन 1210px और ऊपर 70px 30px

क्या करते है वो

मीडिया क्वेरीज़ कई स्थितियों-अनुपात, चौड़ाई, प्रदर्शन प्रकार, आदि के आधार पर कस्टम सीएसएस की अनुमति देती हैं-लेकिन आमतौर पर min-widthऔर के आसपास केंद्रित होती हैं max-width

  • हमारे ग्रिड में कॉलम की चौड़ाई संशोधित करें
  • जहां भी आवश्यक हो, फ्लोट के बजाय तत्वों को ढेर करें
  • उपकरणों के लिए अधिक उपयुक्त होने के लिए शीर्षकों और पाठ का आकार बदलें

मीडिया प्रश्नों का उपयोग करना

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

  1. संकलित उत्तरदायी संस्करण का उपयोग करें, bootstrap-responsive.css
  2. @import "responsive.less" जोड़ें और बूटस्ट्रैप को पुन: संकलित करें
  3. उत्तरदायी को संशोधित और पुन: संकलित करें। एक अलग के रूप में रहित

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

  1. // लैंडस्केप फोन और डाउन
  2. @मीडिया ( अधिकतम - चौड़ाई : 480px ) { ... }
  3.  
  4. // लैंडस्केप फोन से पोर्ट्रेट टैबलेट
  5. @मीडिया ( अधिकतम - चौड़ाई : 768px ) { ... }
  6.  
  7. // लैंडस्केप और डेस्कटॉप के लिए पोर्ट्रेट टैबलेट
  8. @मीडिया ( न्यूनतम - चौड़ाई : 768px ) और ( अधिकतम - चौड़ाई : 940px ) { ... }
  9.  
  10. // बड़ा डेस्कटॉप
  11. @मीडिया ( न्यूनतम - चौड़ाई : 1200px ) { .. }