मचान · बूटस्ट्रैप दा डोगरी भाशा च

एचटीएमएल 5 डॉक्टटाइप दी लोड़ ऐ

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

<!DOCTYPE html> ऐ
<html लैंग = "एन" > ऐ 
  ...
</html> ऐ

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

बूटस्ट्रैप बुनियादी वैश्विक प्रदर्शन, टाइपोग्राफी, ते लिंक शैलियां सेट करदा ऐ। खास तौर उप्पर अस:

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

एह् शैलियां मचान दे अंदर पाई सकदे न ।less .

नॉर्मलाइज दे जरिए रीसेट करो

बूटस्ट्रैप 2 कन्नै, पुराने रीसेट ब्लॉक गी Normalize.css दे पक्ष च छोड़ी दित्ता गेआ ऐ , निकोलस गैलाघेर ते जोनाथन नील आसेआ इक प्रोजेक्ट ऐ जेह् ड़ा HTML5 बॉयलरप्लेट गी बी शक्ति दिंदा ऐ . जदके अस अपने reset.less दे अंदर Normalize दा मता इस्तेमाल करदे आं , अस किश तत्वें गी खास तौर पर बूटस्ट्रैप आस्तै हटाई दित्ता ऐ.

लाइव ग्रिड मिसाल

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

१

२

३

४

५

९

बेसिक ग्रिड एचटीएमएल

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

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

इस उदाहरन गी दिक्खदे होई, असें गी .span4ते .span8, 12 कुल स्तंभें ते इक पूरी पंक्ति आस्तै बनाना ऐ।

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

.offset*क्लासें दा इस्तेमाल करदे होई स्तंभें गी दाएं पास्से लेई जाओ । हर वर्ग इक स्तंभ दे बाएं हाशिया गी इक पूरे स्तंभ कन्नै बधांदा ऐ । मसलन, चार स्तंभें उप्पर .offset4चलदा ऐ ।.span4

४

३ऑफसेट करना २

३ऑफसेट दा 1

३ऑफसेट करना २

6 ऑफसेट दा 3

<div वर्ग = "पंक्ति" > ऐ 
  <div वर्ग = "span4" > ... </div> ऐ 
  <div वर्ग = "span3 ऑफसेट2" > ... </div> ऐ 
</div> दा

घोंसले बनाने वाले स्तंभ

डिफ़ॉल्ट ग्रिड कन्नै अपनी सामग्री गी नेस्ट करने आस्तै, इक मौजूदा स्तंभ दे अंदर इक नमां .rowते स्तंभें दा सेट जोड़ो . नेस्टेड पंक्तियें च स्तंभें दा इक सेट शामल होना चाहिदा जेह् ड़ा इसदे माता-पिता दे स्तंभें दी गिनतरी च जोड़दा ऐ..span*.span*

लेवल 1 दा स्तंभ

लेवल 2 दा

<div वर्ग = "पंक्ति" > ऐ 
  <div वर्ग = "स्पैन9" > ऐ 
    लेवल 1 दा स्तंभ
    <div वर्ग = "पंक्ति" > ऐ 
      <div class = "span6" > स्तर 2 </div> ऐ 
      <div class = "span3" > स्तर 2 </div> ऐ 
    </div> दा
  </div> दा
</div> दा

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

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

१

४

८

६

12 दा

बुनियादी तरल पदार्थ ग्रिड एचटीएमएल

च बदलियै कुसै बी पंक्ति गी "द्रव" .rowबनाओ .row-fluid. स्तंभ वर्ग बिल्कुल उस्सै चाल्लीं रौंह्दे न, जिस कन्नै स्थिर ते तरल ग्रिड दे बश्कार फ्लिप करना सखल्ला होई जंदा ऐ।

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

तरल पदार्थ ऑफसेट करना

फिक्स्ड ग्रिड सिस्टम ऑफसेटिंग दे समान तरीके कन्नै कम्म करदा ऐ : .offset*उतने स्तंभें कन्नै ऑफसेट करने आस्तै कुसै बी स्तंभ च जोड़ो।

४

४ऑफसेट दा 4

३ऑफसेट दा 3

6 ऑफसेट दा 6

<div वर्ग = "पंक्ति-द्रव" > 
  <div वर्ग = "span4" > ... </div> ऐ 
  <div वर्ग = "span4 ऑफसेट2" > ... </div> ऐ 
</div> दा

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

द्रव ग्रिड नेस्टिंग दा बक्ख-बक्ख उपयोग करदे न : स्तंभें दे हर नेस्टेड स्तर गी 12 स्तंभें तगर जोड़ना चाहिदा ऐ । इसदा कारण ऐ जे फ्लूइड ग्रिड चौड़ाई गी सेट करने लेई पिक्सेल नेईं, प्रतिशत दा उपयोग करदा ऐ।

तरल पदार्थ दा 12

तरल पदार्थ दा 6

<div वर्ग = "पंक्ति-द्रव" > 
  <div वर्ग = "स्पैन12" > ऐ 
    तरल पदार्थ दा 12
    <div वर्ग = "पंक्ति-द्रव" > 
      <div वर्ग = "स्पैन6" > ऐ 
        तरल पदार्थ दा 6
        <div वर्ग = "पंक्ति-द्रव" > 
          <div वर्ग = "span6" > द्रव 6 </div> ऐ 
          <div वर्ग = "span6" > द्रव 6 </div> ऐ 
        </div> दा
      </div> दा
      <div वर्ग = "span6" > द्रव 6 </div> ऐ 
    </div> दा
  </div> दा
</div> दा

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

सिर्फ जरूरी कन्नै इक आम नियत-चौड़ाई (ते वैकल्पिक रूप कन्नै प्रतिक्रियाशील) लेआउट प्रदान करदा ऐ <div class="container">.

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

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

इक तरल, दो-स्तंभ पृष्ठ बनाओ जिस च <div class="container-fluid">—एप्लिकेशनें ते दस्तावेजें लेई शानदार ऐ।

<div वर्ग = "कंटेनर-द्रव" > 
  <div वर्ग = "पंक्ति-द्रव" > 
    <div वर्ग = "स्पैन2" > ऐ 
      <!--साइडबार सामग्री-->
    </div> दा
    <div वर्ग = "स्पैन10" > ऐ 
      <!--शरीर दी सामग्री-->
    </div> दा
  </div> दा
</div> दा

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

<head>अपने दस्तावेज़ दे अंदर उचित मेटा टैग ते अतिरिक्त स्टाइलशीट गी शामल करियै अपने प्रोजेक्ट च प्रतिक्रियाशील CSS चालू करो . जेकर तुसें कस्टमाइज़ पृष्ठ थमां बूटस्ट्रैप संकलित कीता ऐ तां तुसेंगी सिर्फ मेटा टैग शामल करने दी लोड़ ऐ.

<meta name = "viewport" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाने = 1.0" >  
<link href = "संपत्ति / सीएसएस / बूटस्ट्रैप-उत्तरदायी.सीएस" rel = "शैलीशीट" >

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

उत्तरदायी बूटस्ट्रैप दे बारे च

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

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

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

समर्थत उपकरण

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

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

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

उत्तरदायी उपयोगिता कक्षाएं

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

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

कदूं इस्तेमाल करना

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

उत्तरदायी उपयोगिताएं परीक्षण केस

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

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

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

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

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

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

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

मचान लगाना

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