बूटस्ट्रैप

मचान

बूटस्ट्रैप उत्तरदायी 12-स्तंभ ग्रिड, लेआउट और घटकों पर बनाया गया है।

वैश्विक सेटिंग्स

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

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

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

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

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

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

इन शैलियों को मचान के भीतर पाया जा सकता है । रहित ।

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

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

डिफ़ॉल्ट ग्रिड सिस्टम

लाइव ग्रिड उदाहरण

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

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

मूल ग्रिड HTML

एक साधारण दो कॉलम लेआउट के लिए, एक बनाएं .rowऔर उचित संख्या में .span*कॉलम जोड़ें। चूंकि यह एक 12-स्तंभ ग्रिड है, प्रत्येक .span*उन 12 स्तंभों की संख्या को फैलाता है, और प्रत्येक पंक्ति (या माता-पिता में स्तंभों की संख्या) के लिए हमेशा 12 तक जोड़ना चाहिए।

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

इस उदाहरण को देखते हुए, हमारे पास .span4और .span8, कुल 12 कॉलम और एक पूरी पंक्ति है।

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

.offset*कक्षाओं का उपयोग करके कॉलम को दाईं ओर ले जाएं । प्रत्येक वर्ग एक स्तंभ के बाएँ हाशिये को पूरे स्तंभ से बढ़ाता है। उदाहरण के लिए, चार स्तंभों पर .offset4चलता है।.span4

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

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

अपनी सामग्री को डिफ़ॉल्ट ग्रिड के साथ नेस्ट करने के लिए, मौजूदा कॉलम में एक नया .rowऔर कॉलम का सेट जोड़ें । नेस्टेड पंक्तियों में स्तंभों का एक समूह शामिल होना चाहिए जो उसके पैरेंट के स्तंभों की संख्या तक जुड़ जाए।.span*.span*

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

द्रव ग्रिड प्रणाली

लाइव द्रव ग्रिड उदाहरण

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

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

मूल द्रव ग्रिड HTML

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

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

द्रव ऑफसेटिंग

फिक्स्ड ग्रिड सिस्टम ऑफसेटिंग के समान ही संचालित होता है: .offset*किसी भी कॉलम में कई कॉलम द्वारा ऑफसेट करने के लिए जोड़ें।

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

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

फ्लुइड ग्रिड नेस्टिंग का अलग-अलग उपयोग करते हैं: प्रत्येक नेस्टेड स्तर के कॉलम में अधिकतम 12 कॉलम होने चाहिए। ऐसा इसलिए है क्योंकि फ्लुइड ग्रिड चौड़ाई निर्धारित करने के लिए प्रतिशत का उपयोग करता है, पिक्सेल का नहीं।

द्रव 12
द्रव 6
द्रव 6
द्रव 6
द्रव 6 
  1. <div class = "पंक्ति-द्रव" > 
  2.   <div class = "span12" > 
  3.     द्रव 12
  4.     <div class = "पंक्ति-द्रव" > 
  5.       <div class = "span6" > 
  6.         द्रव 6
  7.         <div class = "पंक्ति-द्रव" > 
  8.           <div class = "span6" > द्रव 6 </div> 
  9.           <div class = "span6" > द्रव 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > द्रव 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

लेआउट

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

<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>

प्रभावी डिजाइन

उत्तरदायी सुविधाओं को सक्षम करना

<head>अपने दस्तावेज़ में उचित मेटा टैग और अतिरिक्त स्टाइलशीट शामिल करके अपने प्रोजेक्ट में प्रतिक्रियाशील CSS चालू करें । यदि आपने कस्टमाइज़ पेज से बूटस्ट्रैप संकलित किया है, तो आपको केवल मेटा टैग शामिल करना होगा।

  1. <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाना = 1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

उत्तरदायी बूटस्ट्रैप के बारे में

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

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

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

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

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

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

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

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

तेजी से मोबाइल के अनुकूल विकास के लिए, डिवाइस द्वारा सामग्री दिखाने और छिपाने के लिए इन उपयोगिता वर्गों का उपयोग करें। नीचे उपलब्ध वर्गों की एक तालिका है और किसी दिए गए मीडिया क्वेरी लेआउट (डिवाइस द्वारा लेबल) पर उनका प्रभाव है। में पाया जा सकता है responsive.less।

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

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

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

उत्तरदायी उपयोगिताओं का परीक्षण मामला

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

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

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

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

पर छिपा...

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

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