मचान

बूटस्ट्रैप् प्रतिक्रियाशील १२-स्तम्भजालस्य उपरि निर्मितम् अस्ति । वयं तस्याः प्रणाल्याधारितं नियत- तथा द्रव-विस्तार-विन्यासम् अपि समाविष्टवन्तः ।

HTML5 doctype इत्यस्य आवश्यकता अस्ति

बूटस्ट्रैप् HTML एलिमेण्ट्स् तथा CSS गुणानाम् उपयोगं करोति येषां कृते HTML5 doctype इत्यस्य उपयोगः आवश्यकः भवति । स्वस्य परियोजनायां प्रत्येकस्य Bootstrapped पृष्ठस्य आरम्भे अवश्यमेव समाविष्टं कुर्वन्तु ।

<!DOCTYPE html> इति
<html लङ् = "एन" > 
  ...
</html> इति

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

scaffolding.less सञ्चिकायाः अन्तः वयं मूलभूतवैश्विकप्रदर्शनं, मुद्रणचित्रणं, लिङ्कशैल्याः च सेट् कुर्मः । विशेषतः वयं : १.

शरीर पर मार्जिन निकालें
background-color: white;पर सेट करेंbody
अस्माकं मुद्रणमूलरूपेण @baseFontFamily, @baseFontSize, तथा विशेषतानां उपयोगं कुर्वन्तु@baseLineHeight
माध्यमेन वैश्विकलिङ्कवर्णं सेट् कुर्वन्तु @linkColorतथा च केवलं उपरि लिङ्क् अण्डरलाइन्स् प्रयोजयन्तु:hover

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

Bootstrap 2 इत्यस्य रूपेण, पारम्परिकं CSS रीसेट् Normalize.css इत्यस्मात् तत्त्वानां उपयोगं कर्तुं विकसितम् अस्ति , निकोलस् Gallagher इत्यस्य परियोजना यत् HTML5 Boilerplate इत्यपि शक्तिं ददाति

नूतनं रीसेट् अद्यापि reset.less इत्यत्र द्रष्टुं शक्यते , परन्तु संक्षिप्ततायै सटीकतायै च अनेकेषां तत्त्वानि निष्कासितानि सन्ति ।

१

४

८

६

१२

Bootstrap इत्यस्य भागरूपेण प्रदत्तं पूर्वनिर्धारितं जालप्रणाली 940px-विस्तृतं, 12-स्तम्भजालम् अस्ति ।

अस्मिन् विविधयन्त्राणां संकल्पानां च कृते चत्वारि प्रतिक्रियाशीलविविधतानि अपि सन्ति : दूरभाषः, टैब्लेट् चित्रं, टैब्लेट् परिदृश्यं तथा लघुडेस्कटॉप्, बृहत् वाइडस्क्रीन् डेस्कटॉप् च

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

यथा अत्र दर्शितं, एकं मूलभूतं विन्यासं द्वयोः "स्तम्भयोः" सह निर्मातुं शक्यते, प्रत्येकं अस्माकं जालप्रणाल्याः भागत्वेन अस्माभिः परिभाषितानां १२ मूलस्तम्भानां संख्यां व्याप्नोति ।

स्तम्भों को ऑफसेट करना

४

४ आफ्सेट् ४

३ आफ्सेट् ३

८ आफ्सेट् ४

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

नीडं स्तम्भाः

Bootstrap इत्यस्मिन् static (non-fluid) grid system इत्यनेन सह, nesting इत्येतत् सुलभम् अस्ति । स्वस्य सामग्रीं नेस्ट् कर्तुं, केवलं विद्यमानस्य स्तम्भस्य अन्तः नूतनं स्तम्भसमूहं .rowच योजयन्तु ।.span*.span*

उदाहरण

नेस्टेड् पङ्क्तयः स्तम्भानां समुच्चयं समाविष्टं भवेत् यत् तस्य मूलस्य स्तम्भानां संख्यां यावत् योजयति । यथा, .span3एकस्य अन्तः द्वौ नेस्टेड् स्तम्भौ स्थापनीयौ .span6।

स्तम्भस्य १ स्तरः

स्तर 2

<div वर्ग = "पङ्क्ति" > 
  <div वर्ग = "span12" > 
    स्तम्भस्य १ स्तरः
    <div वर्ग = "पङ्क्ति" > 
      <div class = "span6" > स्तर 2 </div> 
      <div class = "span6" > स्तर 2 </div> 
    </div> इति
  </div> इति
</div> इति

द्रव स्तम्भ

१

४

८

६

१२

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

द्रवजालप्रणाली नियतपिक्सेलस्य स्थाने स्तम्भविस्ताराणां कृते प्रतिशतानां उपयोगं करोति । अस्मिन् अस्माकं नियतजालप्रणाल्याः समानाः प्रतिक्रियाशीलविविधताः अपि सन्ति, येन कुञ्जीपर्दे संकल्पानां उपकरणानां च समुचितं अनुपातं सुनिश्चितं भवति ।

द्रवपङ्क्तयः

केवलं परिवर्त्य किमपि पङ्क्तिं द्रवम् .rowकुर्वन्तु .row-fluid। स्तम्भाः समीचीनतया एव तिष्ठन्ति, स्थिर-द्रव-विन्यासयोः मध्ये फ्लिप् कर्तुं सुपर-सीधां करोति ।

मार्कअप

<div class = "पङ्क्ति-द्रव" > 
  <div class = "span4" > ... </div> इति 
  <div class = "span8" > ... </div> इति 
</div> इति

द्रव नीड

द्रवजालैः सह नेस्टिंग् किञ्चित् भिन्नं भवति: नेस्टेड् स्तम्भानां संख्या मातापितृणां मेलनं कर्तुं आवश्यकता नास्ति । तस्य स्थाने, भवतः स्तम्भाः प्रत्येकस्मिन् स्तरे पुनः सेट् भवन्ति यतोहि प्रत्येकं पङ्क्तिः मूलस्तम्भस्य 100% भागं गृह्णाति ।

द्रव 12

द्रव 6.

<div class = "पङ्क्ति-द्रव" > 
  <div वर्ग = "span12" > 
    स्तम्भस्य १ स्तरः
    <div class = "पङ्क्ति-द्रव" > 
      <div class = "span6" > स्तर 2 </div> 
      <div class = "span6" > स्तर 2 </div> 
    </div> इति
  </div> इति
</div> इति

चर इति	पूर्वनिर्धारितं मूल्यम्	वर्णनम्‌
`@gridColumns`	१२	स्तम्भानां संख्या
`@gridColumnWidth`	६०px इति	प्रत्येकस्य स्तम्भस्य विस्तारः
`@gridGutterWidth`	२०px इति	स्तम्भों के बीच नकारात्मक स्थान

LESS इत्यस्मिन् चराः

Bootstrap इत्यस्मिन् निर्मिताः पूर्वनिर्धारित 940px जालप्रणाल्याः अनुकूलनार्थं मुष्टिभ्यां चराः सन्ति, ये उपरि दस्तावेजिताः सन्ति । जालस्य कृते सर्वे चराः variables.less इत्यत्र संगृह्यन्ते ।

अनुकूलित कैसे करें

ग्रिड् परिवर्तनस्य अर्थः अस्ति यत् त्रयः @grid*चराः परिवर्त्य Bootstrap इत्यस्य पुनः संकलनं करणीयम् । variables.less इत्यत्र grid variables परिवर्त्य पुनः संकलनार्थं दस्तावेजितचतुर्णां मार्गानाम् एकस्य उपयोगं कुर्वन्तु | यदि भवान् अधिकानि स्तम्भानि योजयति तर्हि grid.less मध्ये ये सन्ति तेषां कृते CSS अवश्यं योजयन्तु ।

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

जालस्य अनुकूलनं केवलं पूर्वनिर्धारितस्तरस्य, 940px जालस्य कार्यं करोति । Bootstrap इत्यस्य प्रतिक्रियाशीलपक्षं निर्वाहयितुम्, भवद्भिः responsive.less इत्यत्र ग्रिड्स् अपि अनुकूलितुं प्रवृत्ताः भविष्यन्ति ।

स्थिर विन्यास

पूर्वनिर्धारितं सरलं च 940px-व्यापकं, केन्द्रितं विन्यासं केवलं प्रायः कस्यापि वेबसाइट् अथवा पृष्ठस्य कृते एकेन द्वारा प्रदत्तम् <div class="container">.

<शरीरं> इति
  <div वर्ग = "पात्र" > 
    ...
  </div> इति
</body> इति

द्रव विन्यास

<div class="container-fluid">लचीला पृष्ठसंरचना, min- तथा max-widths, तथा वामहस्तस्य पार्श्वपट्टिकां ददाति । एप्स् तथा डॉक्स इत्येतयोः कृते इ��ं महान् अस्ति।

<div class = "पात्र-द्रव" > 
  <div class = "पङ्क्ति-द्रव" > 
    <div वर्ग = "span2" > 
      <!--पार्श्वपट्टिका सामग्री-->
    </div> इति
    <div वर्ग = "span10" > 
      <!--शरीर सामग्री-->
    </div> इति
  </div> इति
</div> इति

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

ते यत् कुर्वन्ति

मीडिया प्रश्नाः कतिपयानां शर्तानाम् आधारेण कस्टम् CSS इत्यस्य अनुमतिं ददति-अनुपाताः, विस्ताराः, प्रदर्शनप्रकारः इत्यादयः-किन्तु सामान्यतया परितः min-widthतथा च केन्द्रीक्रियते max-width।

अस्माकं जालपुटे स्तम्भस्य विस्तारं परिवर्तयन्तु
यत्र यत्र आवश्यकं तत्र प्लवकस्य स्थाने तत्त्वानि स्तम्भयन्तु
उपकरणानां कृते अधिकं उपयुक्तं भवितुं शीर्षकाणां पाठस्य च आकारं परिवर्तयन्तु

मीडिया प्रश्नानां उपयोगं उत्तरदायित्वपूर्वकं केवलं स्वस्य मोबाईल-प्रेक्षकाणां आरम्भरूपेण एव कुर्वन्तु। बृहत्तरपरियोजनानां कृते समर्पितसङ्केतआधाराः विचारयन्तु न तु मीडियाप्रश्नानां स्तराः ।

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

बूटस्ट्रैप् एकस्मिन् सञ्चिकायां मुष्टिभ्यां मीडिया-प्रश्नानां समर्थनं करोति यत् भिन्न-भिन्न-यन्त्रेषु स्क्रीन-संकल्पेषु च भवतः परियोजनानि अधिकं उपयुक्तानि कर्तुं साहाय्यं करोति । अत्र किं किं समाविष्टम् अस्ति ।

नामपत्र	विन्यास चौड़ाई	स्तम्भ चौड़ाई	नाली चौड़ाई
स्मार्टफोनः	480px तथा नीचे	द्रवस्तम्भाः, नियतविस्ताराः न सन्ति
स्मार्टफोनः टैब्लेट् यावत्	767px तथा नीचे	द्रवस्तम्भाः, नियतविस्ताराः न सन्ति
चित्र गोलियाँ	768px एवं उससे ऊपर	४२px इति	२०px इति
मूलभूतम्‌	980px तथा ऊपर	६०px इति	२०px इति
विशाल प्रदर्शन	1200px तथा ऊपर	७०px इति	३०px

मेटा टैग आवश्यक है

उपकरणानि प्रतिक्रियाशीलपृष्ठानि सम्यक् प्रदर्शयन्ति इति सुनिश्चित्य, viewport meta tag इत्येतत् समावेशयन्तु ।

<meta name = "viewport" सामग्री = "चौड़ाई = उपकरण-चौड़ाई, प्रारम्भिक-स्केल = 1.0" >

मीडिया प्रश्नों का उपयोग करके

Bootstrap इत्यत्र स्वयमेव एतानि मीडिया-प्रश्नानि न समाविष्टानि सन्ति, परन्तु तान् अवगन्तुं योजयितुं च अतीव सुलभं भवति तथा च न्यूनतम-सेटअपस्य आवश्यकता वर्तते । Bootstrap इत्यस्य प्रतिक्रियाशीलविशेषताः समाविष्टुं भवतः समीपे कतिचन विकल्पाः सन्ति:

संकलितस्य प्रतिक्रियाशीलसंस्करणस्य, bootstrap-responsive.css इत्यस्य उपयोगं कुर्वन्तु
@import "responsive.less" योजयन्तु तथा Bootstrap पुनः संकलयन्तु
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`	दृश्यम्	दृश्यम्	अदृष्ट

परीक्षण प्रकरणम्

उपर्युक्तवर्गाणां परीक्षणार्थं स्वस्य ब्राउजर् आकारं परिवर्तयन्तु अथवा भिन्न-भिन्न-यन्त्रेषु लोड् कुर्वन्तु ।

पर दृश्यमान...

हरितवर्णीयपरीक्षाचिह्नानि सूचयन्ति यत् भवतः वर्तमानदृश्यक्षेत्रे वर्गः दृश्यते ।

फोनं✔ फ़ोन
गोली✔ गोली
डेस्कटॉप✔ डेस्कटॉप

पर छिपा हुआ...

अत्र हरितवर्णीयं चेकमार्क् भवतः वर्तमानदृश्यपुटे वर्गः निगूढः इति सूचयति ।

फोनं✔ फ़ोन
गोली✔ गोली
डेस्कटॉप✔ डेस्कटॉप