मचान

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

HTML5 सिद्धांत की आवश्यकता है

बूटस्ट्रैप HTML तत्वों और CSS गुणों का उपयोग करता है जिन्हें HTML5 सिद्धांत के उपयोग की आवश्यकता होती है। इसे अपने प्रोजेक्ट में प्रत्येक बूटस्ट्रैप्ड पेज की शुरुआत में शामिल करना सुनिश्चित करें।

<!DOCTYPE html>
<एचटीएमएल लैंग = "एन" > 
  ...
</html>

टाइपोग्राफी और लिंक

मचान रहित फ़ाइल के भीतर , हम बुनियादी वैश्विक प्रदर्शन, टाइपोग्राफी और लिंक शैलियाँ सेट करते हैं। विशेष रूप से, हम:

शरीर पर मार्जिन निकालें
पर सेट background-color: white;करेंbody
हमारे टाइपोग्राफी आधार के रूप में @baseFontFamily, @baseFontSize, और विशेषताओं का उपयोग करें@baseLineHeight
के माध्यम से वैश्विक लिंक का रंग सेट करें @linkColorऔर केवल पर लिंक रेखांकन लागू करें:hover

सामान्यीकृत के माध्यम से रीसेट करें

बूटस्ट्रैप 2 के अनुसार, निकोलस गैलाघेर की एक परियोजना, जो HTML5 बॉयलरप्लेट को भी शक्ति प्रदान करती है , नॉर्मलाइज़ .css के तत्वों का उपयोग करने के लिए पारंपरिक सीएसएस रीसेट विकसित हुआ है ।

नया रीसेट अभी भी रीसेट.लेस में पाया जा सकता है , लेकिन संक्षिप्तता और सटीकता के लिए कई तत्वों को हटा दिया गया है।

बूटस्ट्रैप के हिस्से के रूप में प्रदान किया गया डिफ़ॉल्ट ग्रिड सिस्टम 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 ऑफ़सेट4" > ... </div> 
</div>

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

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

उदाहरण

नेस्टेड पंक्तियों में स्तंभों का एक समूह शामिल होना चाहिए जो इसके पैरेंट के स्तंभों की संख्या तक जुड़ जाए। उदाहरण के लिए, दो नेस्टेड .span3कॉलम को एक के भीतर रखा जाना चाहिए .span6।

कॉलम का स्तर 1

लेवल 2

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

द्रव स्तंभ

प्रतिशत, पिक्सेल नहीं

फ्लुइड ग्रिड सिस्टम स्तंभ की चौड़ाई के लिए निश्चित पिक्सेल के बजाय पर्सेंट का उपयोग करता है। इसमें हमारे फिक्स्ड ग्रिड सिस्टम के समान ही प्रतिक्रियाशील विविधताएं हैं, जो मुख्य स्क्रीन रिज़ॉल्यूशन और उपकरणों के लिए उचित अनुपात सुनिश्चित करती हैं।

द्रव पंक्तियाँ

बस में बदलकर किसी भी पंक्ति को तरल बना .rowलें .row-fluid। कॉलम बिल्कुल वही रहते हैं, जिससे फिक्स्ड और फ्लुइड लेआउट के बीच फ़्लिप करना बहुत आसान हो जाता है।

मार्कअप

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

द्रव घोंसला बनाना

द्रव ग्रिड के साथ घोंसला बनाना थोड़ा अलग है: नेस्टेड स्तंभों की संख्या को पैरेंट से मेल खाने की आवश्यकता नहीं है। इसके बजाय, आपके कॉलम प्रत्येक स्तर पर रीसेट हो जाते हैं क्योंकि प्रत्येक पंक्ति पैरेंट कॉलम का 100% हिस्सा लेती है।

द्रव 12

द्रव 6

<div class = "पंक्ति-द्रव" > 
  <div class = "span12" > 
    कॉलम का स्तर 1
    <div class = "पंक्ति-द्रव" > 
      <div class = "span6" > लेवल 2 </div> 
      <div class = "span6" > लेवल 2 </div> 
    </div>
  </div>
</div>

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

कम में चर

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

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

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

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

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

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

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

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

द्रव लेआउट

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

<div class = "कंटेनर-तरल पदार्थ" > 
  <div class = "पंक्ति-द्रव" > 
    <div class = "span2" > 
      <!--साइडबार सामग्री-->
    </div>
    <div class = "span10" > 
      <!--शारीरिक सामग्री-->
    </div>
  </div>
</div>

उत्तरदायी उपकरण

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

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

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

मीडिया के प्रश्नों का जिम्मेदारी से और केवल अपने मोबाइल दर्शकों के लिए एक शुरुआत के रूप में उपयोग करें। बड़ी परियोजनाओं के लिए, समर्पित कोड आधारों पर विचार करें, न कि मीडिया प्रश्नों की परतों पर।

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

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

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

मेटा टैग की आवश्यकता है

यह सुनिश्चित करने के लिए कि डिवाइस रिस्पॉन्सिव पेज ठीक से प्रदर्शित करें, व्यूपोर्ट मेटा टैग शामिल करें।

<मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाना = 1.0" >

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

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

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

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

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

उत्तरदायी उपयोगिता वर्ग

वे क्या हैं

तेजी से मोबाइल के अनुकूल विकास के लिए, डिवाइस द्वारा सामग्री दिखाने और छिपाने के लिए इन बुनियादी उपयोगिता वर्गों का उपयोग करें।

कब इस्तेमाल करें

सीमित आधार पर उपयोग करें और एक ही साइट के पूरी तरह से भिन्न संस्करण बनाने से बचें। इसके बजाय, प्रत्येक डिवाइस की प्रस्तुति को पूरक करने के लिए उनका उपयोग करें।

उदाहरण के लिए, आप <select>मोबाइल लेआउट पर नेविगेशन के लिए एक तत्व दिखा सकते हैं, लेकिन टैबलेट या डेस्कटॉप पर नहीं।

सहायता वर्ग

यहां उन कक्षाओं की तालिका दिखाई गई है जिनका हम समर्थन करते हैं और किसी दिए गए मीडिया क्वेरी लेआउट (डिवाइस द्वारा लेबल) पर उनका प्रभाव। में पाया जा सकता है responsive.less।

कक्षा	फ़ोनों480px और नीचे	गोलियाँ767px और नीचे	डेस्कटॉप768px और अधिक
`.visible-phone`	दृश्यमान	छुपे हुए	छुपे हुए
`.visible-tablet`	छुपे हुए	दृश्यमान	छुपे हुए
`.visible-desktop`	छुपे हुए	छुपे हुए	दृश्यमान
`.hidden-phone`	छुपे हुए	दृश्यमान	दृश्यमान
`.hidden-tablet`	दृश्यमान	छुपे हुए	दृश्यमान
`.hidden-desktop`	दृश्यमान	दृश्यमान	छुपे हुए

परीक्षण का मामला

उपरोक्त वर्गों का परीक्षण करने के लिए अपने ब्राउज़र का आकार बदलें या विभिन्न उपकरणों पर लोड करें।

पर दृश्यमान...

फ़ोन✔ फोन
गोली✔ टैबलेट
डेस्कटॉप✔ डेस्कटॉप

पर छिपा...

फ़ोन✔ फोन
गोली✔ टैबलेट
डेस्कटॉप✔ डेस्कटॉप