बूटस्ट्रैप दा

मचान लगाना

बूटस्ट्रैप इक प्रतिक्रियाशील 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 स्तंभ इक प्रतिक्रियाशील मोड़ कन्नै

१
१
१
१
१
१
१
१
१
१
१
१
४
४
४
४
८
६
६
12 दा

बूटस्ट्रैप दे हिस्से दे रूप च उपलब्ध करोआए गेदे डिफाल्ट ग्रिड सिस्टम इक 940px-चौड़ाई, 12-स्तंभ ग्रिड ऐ .

एह्दे च बक्ख-बक्ख उपकरणें ते रिजोल्यूशनें लेई चार प्रतिक्रियाशील बदलाव बी न: फोन, टैबलेट पोर्ट्रेट, टैबलेट लैंडस्केप ते छोटे डेस्कटॉप, ते बड्डे वाइडस्क्रीन डेस्कटॉप।

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

जि’यां इत्थै दिक्खेआ गेआ ऐ, दो "स्तंभ" कन्नै इक बुनियादी लेआउट बनाया जाई सकदा ऐ, हर इक 12 बुनियादी स्तंभें दी इक नंबर गी फैले दा ऐ जिनेंगी अस अपने ग्रिड प्रणाली दे हिस्से दे रूप च परिभाशत कीता ऐ।


कॉलम ऑफसेट करना

४
४ऑफसेट दा 4
३ऑफसेट दा 3
३ऑफसेट दा 3
८ ऑफसेट दा 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 वर्ग = "स्पैन12" > ऐ 
  3.     स्तंभ दा लेवल 1
  4.     <div वर्ग = "पंक्ति" > ऐ 
  5.       <div class = "span6" > स्तर 2 </div> ऐ 
  6.       <div class = "span6" > स्तर 2 </div> ऐ 
  7.     </div> दा
  8.   </div> दा
  9. </div> दा

द्रव ग्रिड प्रणाली 12 प्रतिक्रियाशील, प्रतिशत-आधारत स्तंभ

तरल पदार्थ स्तंभ

१
१
१
१
१
१
१
१
१
१
१
१
४
४
४
४
८
६
६
12 दा

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

द्रव ग्रिड प्रणाली स्थिर पिक्सेल दी बजाय स्तंभ चौड़ाई आस्तै प्रतिशत दा उपयोग करदी ऐ। एह्दे च साढ़े स्थिर ग्रिड प्रणाली दे समान प्रतिक्रियाशील बदलाव बी होंदे न, जेह् ड़े कुंजी स्क्रीन रिजोल्यूशन ते उपकरणें लेई उचित अनुपात गी सुनिश्चत करदे न।

तरल पंक्तियां

किसी भी पंक्ति गी बस बदलने कन्नै तरल .rowबनाओ .row-fluid. स्तंभ बिल्कुल उसी गै रौंह्दे न, जिस कन्नै फिक्स्ड ते फ्लूइड लेआउट दे बीच फ्लिप करना सुपर सीधा होई जंदा ऐ।

मार्कअप करना

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

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

तरल ग्रिड कन्नै नेस्टिंग थोह् ड़ी-मती बक्खरी ऐ : नेस्टेड स्तंभें दी गिनतरी गी माता-पिता कन्नै मेल खंदा ऐ। इसदे बजाय, तुंदे स्तंभ हर स्तर पर रीसेट कीते जंदे न कीजे हर पंक्ति माता-पिता स्तंभ दा 100% लैंदी ऐ.

तरल पदार्थ दा 12
तरल पदार्थ दा 6
तरल पदार्थ दा 6 
  1. <div वर्ग = "पंक्ति-द्रव" > 
  2.   <div वर्ग = "स्पैन12" > ऐ 
  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 60पीएक्स ऐ हर स्तंभ दी चौड़ाई
@gridGutterWidth 20पीएक्स ऐ स्तंभें दे बिच्च नकारात्मक जगह

कम च चर

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

कस्टमाइज करने दा तरीका

ग्रिड गी संशोधित करने दा मतलब ऐ त्रै @grid*चर गी बदलना ते बूटस्ट्रैप गी दुबारा संकलित करना। चर.less च ग्रिड चर बदलो ते पुनर्संकलन करने लेई दस्तावेज कीते गेदे चार तरीकें च इक दा इस्तेमाल करो . जेकर तुस होर स्तंभ जोड़दे ओ तां grid.less च होने आह् लें आस्तै CSS गी ज़रूर जोड़ो.

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

ग्रिड दा अनुकूलन सिर्फ डिफाल्ट स्तर पर गै कम्म करदा ऐ, 940px ग्रिड. बूटस्ट्रैप दे प्रतिक्रियाशील पहलूएं गी बनाए रखने लेई, तुसेंगी रिस्पांसिव.लेस च ग्रिड्स गी बी अनुकूलित करना होग।

लेआउट वेबपेज बनाने लेई बुनियादी टेम्पलेट

फिक्स्ड लेआउट

इक गै <div class="container">.

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

तरल पदार्थ लेआउट

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

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

प्रतिक्रियाशील डिजाइन बक्ख-बक्ख उपकरणें ते रिजोल्यूशनें लेई मीडिया क्वेरी

प्रतिक्रियाशील उपकरण

क्या करदे ने

मीडिया क्वेरी इक नंबर दी शर्तें दे आधार उप्पर कस्टम CSS दी अनुमति दिंदी ऐ-अनुपात, चौड़ाई, प्रदर्शन प्रकार बगैरा-पर आमतौर पर min-widthते max-width.

  • साढ़ी ग्रिड च स्तंभ दी चौड़ाई गी संशोधित करो
  • जित्थें बी लोड़चदा ऐ फ्लोट करने दे बजाय तत्वें गी ढेर करो
  • डिवाइस आस्तै मता उपयुक्त होने आस्तै हेडिंग ते पाठ दा आकार बदलो

मीडिया क्वेरी दा इस्तेमाल जिम्मेदारी कन्नै ते सिर्फ अपने मोबाइल दर्शकें लेई शुरूआत दे रूप च करो। बड्डे प्रोजेक्टें लेई, समर्पित कोड बेस पर विचार करो ते मीडिया क्वेरी दी परतें पर नेईं।

समर्थत उपकरण

बूटस्ट्रैप इक गै फाइल च मुट्ठी भर मीडिया क्वेरी दा समर्थन करदा ऐ जेह् ड़ी बक्ख-बक्ख डिवाइसें ते स्क्रीन रिजोल्यूशनें पर तुंदे प्रोजेक्टें गी होर उचित बनाने च मदद करदी ऐ। एह्दे च केह् शामल ऐ:

ठप्पा लेआउट चौड़ाई स्तंभ चौड़ाई गटर चौड़ाई
स्मार्टफोन दा 480px ते उस थमां हेठ तरल स्तंभ, कोई निश्चित चौड़ाई नहीं
स्मार्टफोन ते टैबलेट 767px ते उस थमां हेठ तरल स्तंभ, कोई निश्चित चौड़ाई नहीं
पोर्ट्रेट गोलियां 768px ते उस थमां मते दा 42पीएक्स ऐ 20पीएक्स ऐ
डिफाल्ट 980px ते ऊपर 60पीएक्स ऐ 20पीएक्स ऐ
बड़ा डिस्प्ले 1200px ते ऊपर 70पीएक्स ऐ 30पीएक्स ऐ

मेटा टैग दी लोड़ ऐ

डिवाइस प्रतिक्रियाशील पन्नें गी ठीक ढंगै कन्नै प्रदर्शत करने गी सुनिश्चत करने आस्तै, व्यूपोर्ट मेटा टैग शामल करो.

  1. <meta name = "viewport" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाने = 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 आस्तै इक तत्व दस्सी सकदे ओ, पर टैबलेट जां डेस्कटॉप पर नेईं।

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

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

जमात फ़ोन480px ते उस थमां हेठ गोलियां767px ते उस थमां हेठ डेस्कटॉप दा768px ते उस थमां मते दा
.visible-phone दिखने आला
.visible-tablet दिखने आला
.visible-desktop दिखने आला
.hidden-phone दिखने आला दिखने आला
.hidden-tablet दिखने आला दिखने आला
.hidden-desktop दिखने आला दिखने आला

टेस्ट केस

उपर्युक्त वर्गें गी परखने लेई अपने ब्राउज़र दा आकार बदलो जां बक्ख-बक्ख डिवाइसें पर लोड करो।

पर दिक्खने गी मिलदा ऐ...

हरे रंग दे चेकमार्क दर्शांदे न जे क्लास तुंदे मौजूदा व्यूपोर्ट च दिक्खी जा करदी ऐ.

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

पर छिपे हुए...

इत्थै, हरे रंग दे चेकमार्क दस्सदे न जे क्लास तुंदे मौजूदा व्यूपोर्ट च छिपी दी ऐ.

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