बूटस्ट्रैप के बा

मचान के बा

बूटस्ट्रैप के एगो रिस्पांसिव 12 कॉलम ग्रिड प बनावल गईल बा। हमनी के ओह सिस्टम के आधार पर फिक्स्ड- आ फ्लूइड-विड्थ लेआउट भी शामिल कइले बानी जा।

CSS रीसेट, टाइपोग्राफी, आ लिंक सभ खातिर ग्लोबल स्टाइल

एचटीएमएल 5 डॉकटाइप के जरूरत बा

बूटस्ट्रैप में HTML तत्व आ CSS गुण सभ के इस्तेमाल होला जेह में HTML5 डॉकटाइप के इस्तेमाल के जरूरत होला। अपना प्रोजेक्ट में हर बूटस्ट्रैप कइल पन्ना के शुरुआत में एकरा के जरूर शामिल करीं.

  1. <!DOCTYPE html> के बा
  2. <html लैंग = "एन" > के बा 
  3.   ...
  4. </html> के बा

टाइपोग्राफी आ लिंक दिहल गइल बा

scaffolding.less फाइल के भीतर , हमनी के बेसिक ग्लोबल डिस्प्ले, टाइपोग्राफी, अवुरी लिंक स्टाइल सेट करतानी। खास तौर प हमनी के:

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

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

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

नया रीसेट अबहियों reset.less में मिल सके ला , बाकी संक्षिप्तता आ सटीकता खातिर कई गो तत्व सभ के हटा दिहल गइल बा।

डिफ़ॉल्ट ग्रिड सिस्टम 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 वर्ग = "span4" > ... </div> के बा 
  3.   <div वर्ग = "span8" > ... </div> के बा 
  4. </div> के बा

जइसे कि इहाँ देखावल गइल बा, दू गो "कॉलम" के साथ एगो बेसिक लेआउट बनावल जा सके ला, हर कॉलम ओह 12 गो फाउंडेशन कॉलम सभ में से एगो नंबर के बिस्तार करे ला जेकरा के हमनी के ग्रिड सिस्टम के हिस्सा के रूप में परिभाषित कइले बानी जा।


कॉलम के ऑफसेट कइल जा रहल बा

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

घोंसला बनावे के कॉलम बा

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

उदाहरण

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

कॉलम के लेवल 1 के बा
स्तर 2 के बा
स्तर 2 के बा 
  1. <div वर्ग = "पंक्ति" > के बा 
  2.   <div वर्ग = "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 वर्ग = "पंक्ति-द्रव" > बा 
  2.   <div वर्ग = "span4" > ... </div> के बा 
  3.   <div वर्ग = "span8" > ... </div> के बा 
  4. </div> के बा

तरल पदार्थ के घोंसला बनावल

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

तरल पदार्थ 12 के बा
तरल पदार्थ 6 के बा
तरल पदार्थ 6 के बा 
  1. <div वर्ग = "पंक्ति-द्रव" > बा 
  2.   <div वर्ग = "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 के बा कॉलम के बीच नकारात्मक जगह बा

कम में चर के बारे में बतावल गइल बा

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

कइसे अनुकूलित कइल जाला

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

प्रतिक्रियाशील रहे के बा

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

लेआउट वेबपेज बनावे खातिर बेसिक टेम्पलेट

लेआउट तय हो गइल बा

डिफ़ॉल्ट आ सरल 940px-चौड़ाई, केंद्रित लेआउट बस लगभग कवनो वेबसाइट भा पन्ना खातिर एकल द्वारा उपलब्ध करावल गइल बा <div class="container">।

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

तरल पदार्थ के लेआउट के बारे में बतावल गइल बा

<div class="container-fluid">लचीला पन्ना संरचना, न्यूनतम- आ अधिकतम-चौड़ाई, आ बाईं ओर के साइडबार देला। ऐप आ डॉक्स खातिर ई बहुते बढ़िया बा.

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

रिस्पांसिव डिजाइन बिबिध डिवाइस आ रिजोल्यूशन सभ खातिर मीडिया क्वेरी करे ला

रिस्पांसिव डिवाइस के बारे में बतावल गईल बा

उ लोग का करेला

मीडिया क्वेरी सभ में कई ठे शर्त सभ के आधार पर कस्टम CSS के अनुमति दिहल जाला-अनुपात, चौड़ाई, डिस्प्ले टाइप इत्यादि-लेकिन आमतौर पर 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.   @मीडिया ( मिनट - चौड़ाई : 1200px ) { ... } बा।

रिस्पांसिव यूटिलिटी क्लास के बारे में बतावल गइल बा

उ लोग का हवें

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

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

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

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

सपोर्ट क्लास के बा

इहाँ देखावल गइल बा कि हमनी के सपोर्ट करे वाला क्लास सभ के टेबल आ कौनों दिहल गइल मीडिया क्वेरी लेआउट (डिवाइस द्वारा लेबल कइल गइल) पर इनहन के परभाव। इनहन के 1999 में पावल जा सकेला responsive.less.

कक्षा फोन के बा480px आ ओकरा से नीचे के बा गोली के इस्तेमाल कइल जाला767px आ ओकरा से नीचे के बा डेस्कटॉप के बा768px आ ओकरा से ऊपर के बा
.visible-phone लउकत बा
.visible-tablet लउकत बा
.visible-desktop लउकत बा
.hidden-phone लउकत बा लउकत बा
.hidden-tablet लउकत बा लउकत बा
.hidden-desktop लउकत बा लउकत बा

परीक्षण केस बा

उपर दिहल क्लास सभ के परीक्षण करे खातिर अपना ब्राउजर के साइज बदलीं या अलग-अलग डिवाइस सभ पर लोड करीं।

पर लउकत बा...

हरे रंग के चेकमार्क बतावेला कि रउरा वर्तमान व्यूपोर्ट में क्लास लउकत बा.

  • फोन✔ फोन कइल जाव
  • टैबलेट के इस्तेमाल कइल जाला✔ टैबलेट के बा
  • डेस्कटॉप के बा✔ डेस्कटॉप के बा

पर छिपल बा...

इहाँ, हरियर चेकमार्क बतावे ला कि आपके वर्तमान व्यूपोर्ट में क्लास छिपल बा।

  • फोन✔ फोन कइल जाव
  • टैबलेट के इस्तेमाल कइल जाला✔ टैबलेट के बा
  • डेस्कटॉप के बा✔ डेस्कटॉप के बा