मचान · बूटस्ट्रैप के बा भोजपुरी भाषा में बा

एचटीएमएल 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 के बहुत कुछ इस्तेमाल करेनी जा, हमनी के कुछ तत्व के विशेष रूप से Bootstrap खातिर हटा देले बानी।

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

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

1 के बा

2 के बा

3 के बा

4 के बा

5 के बा

9 के बा

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

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

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

ई उदाहरण दिहल गइल बा, हमनी के लगे .span4आ .span8, कुल 12 गो कॉलम आ एगो पूरा पंक्ति खातिर बनावल गइल बा।

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

.offset*क्लास के इस्तेमाल से कॉलम के दाहिने ओर ले जाईं । हर क्लास कवनो कॉलम के बाईं ओर के मार्जिन के पूरा कॉलम बढ़ा देला। जइसे कि चार गो कॉलम पर .offset4चलत बा..span4

4 के बा

3 ऑफसेट 2 के बा

3 ऑफसेट 1 के बा

3 ऑफसेट 2 के बा

6 ऑफसेट 3 के बा

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

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

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

लेवल 1 के कॉलम के बा

स्तर 2 के बा

<div वर्ग = "पंक्ति" > के बा 
  <div वर्ग = "span9" > के बा 
    लेवल 1 के कॉलम के बा
    <div वर्ग = "पंक्ति" > के बा 
      <div class = "span6" > स्तर 2 </div> के बा 
      <div class = "span3" > स्तर 2 </div> के बा 
    </div> के बा
  </div> के बा
</div> के बा

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

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

1 के बा

4 के बा

8 के बा

6 के बा

12 के बा

बेसिक फ्लूइड ग्रिड एचटीएमएल के बा

.rowमें बदल के कवनो पंक्ति के "द्रव" बनाईं .row-fluid। कॉलम क्लास बिल्कुल एकही रहेला, जवना से फिक्स्ड अवुरी फ्लूइड ग्रिड के बीच फ्लिप कईल आसान हो जाला।

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

तरल पदार्थ के ऑफसेटिंग हो रहल बा

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

4 के बा

4 ऑफसेट 4 के बा

3 ऑफसेट 3 के बा

6 ऑफसेट 6 के बा

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

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

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

तरल पदार्थ 12 के बा

तरल पदार्थ 6 के बा

<div वर्ग = "पंक्ति-द्रव" > बा 
  <div वर्ग = "span12" > के बा 
    तरल पदार्थ 12 के बा
    <div वर्ग = "पंक्ति-द्रव" > बा 
      <div वर्ग = "span6" > के बा 
        तरल पदार्थ 6 के बा
        <div वर्ग = "पंक्ति-द्रव" > बा 
          <div class = "span6" > द्रव 6 </div> के बा 
          <div class = "span6" > द्रव 6 </div> के बा 
        </div> के बा
      </div> के बा
      <div class = "span6" > द्रव 6 </div> के बा 
    </div> के बा
  </div> के बा
</div> के बा

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

खाली जरूरी के साथ एगो आम फिक्स्ड-चौड़ाई (आ वैकल्पिक रूप से रिस्पांसिव) लेआउट उपलब्ध करावे ला <div class="container">।

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

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

एगो तरल, दू गो कॉलम वाला पन्ना बनाईं जवना में <div class="container-fluid">—एप्लीकेशन आ डॉक्स खातिर बढ़िया बा.

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

रिस्पांसिव फीचर के सक्षम कइल जा रहल बा

<head>अपना दस्तावेज के भीतर उचित मेटा टैग आ अतिरिक्त स्टाइलशीट शामिल करके अपना प्रोजेक्ट में रिस्पांसिव सीएसएस चालू करीं । अगर रउआँ कस्टमाइज पन्ना से बूटस्ट्रैप के संकलित कइले बानी त रउआँ के खाली मेटा टैग शामिल करे के पड़ी।

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

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

रिस्पांसिव बूटस्ट्रैप के बारे में बा

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

मीडिया क्वेरी सभ में कई ठे शर्त सभ के आधार पर कस्टम CSS के अनुमति दिहल जाला-अनुपात, चौड़ाई, डिस्प्ले टाइप इत्यादि-लेकिन आमतौर पर min-widthआ max-width.

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

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

समर्थित डिवाइस बा

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

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

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

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

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

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

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

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

रिस्पांसिव यूटिलिटीज टेस्ट केस के बा

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

पर लउकत बा...

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

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

पर छिपल बा...

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

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

मचान के बा

वैश्विक सेटिंग्स के बारे में बतावल गइल बा

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

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

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

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

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

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

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

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

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

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

बेसिक फ्लूइड ग्रिड एचटीएमएल के बा

तरल पदार्थ के ऑफसेटिंग हो रहल बा

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

लेआउट के बा

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

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

रिस्पांसिव डिजाइन के बा

रिस्पांसिव फीचर के सक्षम कइल जा रहल बा

रिस्पांसिव बूटस्ट्रैप के बारे में बा

समर्थित डिवाइस बा

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

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

रिस्पांसिव यूटिलिटीज टेस्ट केस के बा

पर लउकत बा...

पर छिपल बा...