मचान

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

एचटीएमएल 5 डॉक्टटाइप के आवश्यकता अछि

बूटस्ट्रैप एचटीएमएल तत्व आरू सीएसएस गुणक कें उपयोग करय छै जेकरा एचटीएमएल 5 डॉकटाइप कें उपयोग करय कें आवश्यकता होयत छै. अपन प्रोजेक्ट मे हर बूटस्ट्रैप्ड पृष्ठक शुरुआत मे एकरा अवश्य शामिल करू.

<!DOCTYPE html> अछि
<html लैंग = "एन" > 
  ...
</html>

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

scaffolding.less फाइल के भीतर , हम बेसिक ग्लोबल डिस्प्ले, टाइपोग्राफी, आरू लिंक स्टाइल सेट करय छै. विशेष रूप स हम : १.

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

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

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

नव रीसेट एखनो reset.less मे भेट सकैत अछि , मुदा संक्षिप्तता आ सटीकता लेल बहुत रास तत्व हटा देल गेल अछि.

१

४

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

एकरा म॑ विभिन्न डिवाइस आरू रिजोल्यूशन लेली चारि रिस्पांसिव वेरिएशन भी छै: फोन, टैबलेट पोर्ट्रेट, टैबलेट लैंडस्केप आरू छोटऽ डेस्कटॉप, आरू बड़ऽ वाइडस्क्रीन डेस्कटॉप ।

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

जैना की यहाँ दिखायल गेलय छै, दू "स्तंभ" कें साथ एक बुनियादी लेआउट बनायल जा सकय छै, प्रत्येक 12 आधारभूत स्तंभक कें एक नंबर कें फैलल छै जे हम अपनय ग्रिड प्रणाली कें हिस्सा कें रूप मे परिभाषित करलकय छै.

कॉलम ऑफसेट करब

४

४ ऑफसेट ४

३ ऑफसेट ३

8 ऑफसेट 4

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

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

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

उदाहरण

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

स्तंभ के स्तर 1

स्तर 2

<div वर्ग = "पंक्ति" > 
  <div वर्ग = "span12" > 
    स्तंभ के स्तर 1
    <div वर्ग = "पंक्ति" > 
      <div class = "span6" > स्तर 2 </div> 
      <div class = "span6" > स्तर 2 </div> 
    </div>
  </div>
</div>

द्रव स्तंभ

१

४

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

द्रव ग्रिड प्रणाली स्थिर पिक्सेल के बजाय कॉलम चौड़ाई के लेल प्रतिशत के उपयोग करै छै. एकरा म॑ हमरऽ फिक्स्ड ग्रिड सिस्टम के तरह ही प्रतिक्रियाशील भिन्नता भी छै, जेकरा स॑ की स्क्रीन रिजोल्यूशन आरू डिवाइस लेली उचित अनुपात सुनिश्चित होय छै ।

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

कोनो पंक्ति के तरल बनाउ बस बदलि .rowक .row-fluid. कॉलम ठीक वैह रहैत अछि, जाहि स फिक्स्ड आ फ्लूइड लेआउट क बीच फ्लिप करब सुपर सीधा भ जाइत अछि ।

मार्कअप

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

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

द्रव ग्रिड कें साथ नेस्टिंग कनिक अलग छै: नेस्टेड कॉलम कें संख्या कें अभिभावक सं मेल खाएय कें जरूरत नहि छै. बल्कि, अहां कें कॉलम प्रत्येक स्तर पर रीसेट भ जायत छै, कियाकि प्रत्येक पंक्ति मूल कॉलम कें 100% हिस्सा लैत छै.

तरल पदार्थ 12

द्रव 6

<div वर्ग = "पंक्ति-द्रव" > 
  <div वर्ग = "span12" > 
    स्तंभ के स्तर 1
    <div वर्ग = "पंक्ति-द्रव" > 
      <div class = "span6" > स्तर 2 </div> 
      <div class = "span6" > स्तर 2 </div> 
    </div>
  </div>
</div>

चर वाला	पूर्वनिर्धारित मान	वर्णन
`@gridColumns`	12	स्तंभों की संख्या
`@gridColumnWidth`	60px के	प्रत्येक स्तंभ की चौड़ाई
`@gridGutterWidth`	20px के	स्तंभ के बीच नकारात्मक स्थान

कम में चर

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

कस्टमाइज केना करब

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

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

ग्रिड कें अनुकूलन केवल डिफ़ॉल्ट स्तर पर काज करयत छै, 940px ग्रिड. बूटस्ट्रैप कें रिस्पांसिव पहलुअक कें बनाए रखय कें लेल, अहां कें रिस्पांसिव.लेस मे ग्रिड कें अनुकूलित करय कें सेहो होयत.

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

डिफ़ॉल्ट आ सरल 940px-व्यापी, केंद्रित लेआउट बस लगभग कोनो वेबसाइट या पृष्ठ के लेल जे एकटा द्वारा उपलब्ध कराओल गेल अछि <div class="container">.

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

द्रव लेआउट

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

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

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

जे करै छै

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

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

मीडिया क्वेरी के जिम्मेदारी सं आ केवल अपन मोबाइल दर्शक के शुरूआत के रूप में उपयोग करू. पैघ परियोजनाक कें लेल, समर्पित कोड आधार पर विचार करूं आ मीडिया क्वेरी कें परतक पर नहि.

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

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

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

मेटा टैग के आवश्यकता अछि

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

<मेटा नाम = "दृश्यपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाना = 1.0" >

मीडिया क्वेरीज के उपयोग करब

बूटस्ट्रैप म॑ ई मीडिया क्वेरी क॑ स्वचालित रूप स॑ शामिल नै करलऽ जाय छै, लेकिन एकरा समझना आरू जोड़ना बहुत आसान छै आरू न्यूनतम सेटअप के जरूरत छै । बूटस्ट्रैप के रिस्पांसिव फीचर शामिल करय के लेल अहां के पास किछ विकल्प अछि:

संकलित उत्तरदायी संस्करण, bootstrap-responsive.css क उपयोग करू
@import "responsive.less" जोड़ू आओर बूटस्ट्रैप केँ पुनः संकलित करू
responsive.less केँ अलग फाइल क रूप मे संशोधित आओर पुनः संकलित करू

कियैक नहि सिर्फ एकरा शामिल करब? सच पूछू त सब किछु प्रतिक्रियाशील हेबाक जरूरत नहि अछि। डेवलपर क॑ ई सुविधा क॑ हटाबै लेली प्रोत्साहित करै के बजाय, हम्मं॑ एकरा सक्षम करना सबसे अच्छा समझै छियै ।

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

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

ओ सभ की छथि

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

कब प्रयोग करब

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

जेना, अहां <select>मोबाइल लेआउट पर nav कें लेल कोनों तत्व देखा सकय छी, मुदा टैबलेट या डेस्कटॉप पर नहि.

समर्थन कक्षाएँ

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

वर्ग	फोन के480px आ नीचाँ	गोलियाँ767px आ नीचाँ	डेस्कटॉप768px आ ओहिसँ ऊपर
`.visible-phone`	दृश्यमान	नुकाएल	नुकाएल
`.visible-tablet`	नुकाएल	दृश्यमान	नुकाएल
`.visible-desktop`	नुकाएल	नुकाएल	दृश्यमान
`.hidden-phone`	नुकाएल	दृश्यमान	दृश्यमान
`.hidden-tablet`	दृश्यमान	नुकाएल	दृश्यमान
`.hidden-desktop`	दृश्यमान	दृश्यमान	नुकाएल

परीक्षण केस

उपरोक्त वर्गक कें परीक्षण करय कें लेल अपन ब्राउज़र कें आकार बदलू या अलग-अलग डिवाइस पर लोड करूं.

पर देखाइत अछि...

हरियर चेकमार्क संकेत करैत अछि जे वर्ग अहाँक वर्तमान व्यूपोर्ट मे देखाइत अछि.

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

पर छिपल अछि...

एतय, हरियर चेकमार्क संकेत करैत अछि जे क्लास अहाँक वर्तमान व्यूपोर्ट मे नुकायल अछि.

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