बूटस्ट्रैप

मचान

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

CSS रीसेट, टाइपोग्राफी और लिंक के लिए वैश्विक शैलियाँ

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

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

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

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

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

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

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

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

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

एक प्रतिक्रियाशील मोड़ के साथ डिफ़ॉल्ट ग्रिड सिस्टम 12 कॉलम

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

बूटस्ट्रैप में प्रदान किया गया डिफ़ॉल्ट ग्रिड सिस्टम 12 कॉलम का उपयोग करता है जो 724px, 940px (उत्तरदायी CSS शामिल किए बिना डिफ़ॉल्ट), और 1170px की चौड़ाई में प्रस्तुत करता है। 767px व्यूपोर्ट के नीचे, कॉलम तरल हो जाते हैं और लंबवत रूप से ढेर हो जाते हैं।

  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*

उदाहरण

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

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

फ्लुइड ग्रिड सिस्टम 12 प्रतिक्रियाशील, प्रतिशत-आधारित कॉलम

द्रव स्तंभ

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

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

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

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

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

मार्कअप

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

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

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

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

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

चर डिफ़ॉल्ट मान विवरण
@gridColumns 12 स्तंभों की संख्या
@gridColumnWidth 60px प्रत्येक कॉलम की चौड़ाई
@gridGutterWidth 20px स्तंभों के बीच नकारात्मक स्थान

कम में चर

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

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

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

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

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

वेबपेज बनाने के लिए लेआउट मूल टेम्पलेट

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

किसी एक वेबसाइट या पेज के लिए डिफ़ॉल्ट और सरल 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>

विभिन्न उपकरणों और प्रस्तावों के लिए उत्तरदायी डिजाइन मीडिया प्रश्न

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

वे क्या हैं

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

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

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

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

सहायता वर्ग

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

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

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

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

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

हरे रंग के चेकमार्क इंगित करते हैं कि कक्षा आपके वर्तमान व्यूपोर्ट में दिखाई दे रही है।

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

पर छिपा...

यहां, हरे रंग के चेकमार्क इंगित करते हैं कि वर्ग आपके वर्तमान व्यूपोर्ट में छिपा हुआ है।

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