मचान

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

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

<!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 चौड़ा कंटेनर कें लेल बनायत छै. रिस्पांसिव CSS फाइल क॑ जोड़ला स॑ ग्रिड आपकऽ व्यूपोर्ट के आधार प॑ 724px आरू 1170px चौड़ा होय लेली अनुकूलित होय जाय छै । 767px व्यूपोर्ट स॑ नीचें, कॉलम द्रव बनी जाय छै आरू लंबवत ढेर होय जाय छै.

१

२

३

४

५

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

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

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

ई उदाहरण दैत, हमरा सभ लग अछि .span4आ .span8, कुल 12 कॉलम आ एकटा पूरा पंक्तिक लेल बना रहल अछि ।

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

.offset*क्लास क उपयोग कए कॉलम कए दाहिना दिस ल जाउ । प्रत्येक वर्ग कोनो कॉलम के बामा हाशिया के पूरा कॉलम बढ़ा दैत अछि | जेना, चारि कॉलम पर .offset4चलैत अछि।.span4

४

३ ऑफसेट २

३ ऑफसेट १

३ ऑफसेट २

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>

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

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

१

४

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

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

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

द्रव ऑफसेटिंग

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

४

४ ऑफसेट ४

३ ऑफसेट ३

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>
</शरीर>

द्रव लेआउट

एकटा द्रव, दू-स्तंभ पृष्ठ बनाउ जकरा संग <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 ) { ... }।     
 
/* लैंडस्केप आ डेस्कटॉप के लेल पोर्ट्रेट टैबलेट */
@media ( मिनट - चौड़ाई : 768px ) और ( अधिकतम - चौड़ाई : 979px ) { ... }        
 
/* चित्र टैबलेट के लिये लैंडस्केप फोन */
@मीडिया ( अधिकतम - चौड़ाई : 767px ) { ... }।     
 
/* लैंडस्केप फोन आ नीचाँ */
@मीडिया ( अधिकतम - चौड़ाई : 480px ) { ... }।

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

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

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

कब प्रयोग करब

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

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

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

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

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

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

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

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

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

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