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

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

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

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

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

उदाहरण

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

<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% भागं गृह्णाति ।

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

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

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

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

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

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

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

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

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

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

द्रव विन्यास

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

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

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

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

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

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

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

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

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

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

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

1. संकलितस्य प्रतिक्रियाशीलसंस्करणस्य, bootstrap-responsive.css इत्यस्य उपयोगं कुर्वन्तु
2. @import "responsive.less" योजयन्तु तथा Bootstrap पुनः संकलयन्तु
3. responsive.less इत्येतत् पृथक् सञ्चिकारूपेण परिवर्त्य पुनः संकलयन्तु

किमर्थं न केवलं तत् समावेशितम् ? सत्यं वक्तव्यं, न सर्वं प्रतिक्रियाशीलं भवितुम् आवश्यकम्। विकासकान् एतत् विशेषतां दूरीकर्तुं प्रोत्साहयितुं स्थाने वयं एतत् सक्षमं कर्तुं सर्वोत्तमम् इति चिन्तयामः ।

  // लैण्डस्केप फोन एवं नीचे
  @ मीडिया ( अधिकतम - चौड़ाई : 480px ) { ... } .     
 
  // लैंडस्केप फोन को पोर्ट्रेट टैबलेट
  @ मीडिया ( अधिकतम - चौड़ाई : 768px ) { ... } .     
 
  // लैंडस्केप एवं डेस्कटॉप को टैबलेट को चित्रित करें
  @media ( न्यूनतम - चौड़ाई : 768px ) तथा ( अधिकतम - चौड़ाई : 980px ) { ... }        
 
  // बड़ा डेस्कटॉप
  @ मीडिया ( न्यूनतम - चौड़ाई : 1200px ) { .. } .