बूटस्ट्रैप् प्रतिक्रियाशील १२-स्तम्भजालस्य उपरि निर्मितम् अस्ति । वयं तस्याः प्रणाल्याधारितं नियत- तथा द्रव-विस्तार-विन्यासम् अपि समाविष्टवन्तः ।
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*
- <div वर्ग = "पङ्क्ति" >
- <div वर्ग = "span12" >
- स्तम्भस्य १ स्तरः
- <div वर्ग = "पङ्क्ति" >
- <div class = "span6" > स्तर 2 </div>
- <div class = "span6" > स्तर 2 </div>
- </div> इति
- </div> इति
- </div> इति
चर इति | पूर्वनिर्धारितं मूल्यम् | वर्णनम् |
---|---|---|
@gridColumns |
१२ | स्तम्भानां संख्या |
@gridColumnWidth |
६०px इति | प्रत्येकस्य स्तम्भस्य विस्तारः |
@gridGutterWidth |
२०px इति | स्तम्भों के बीच नकारात्मक स्थान |
@siteWidth |
सर्वेषां स्तम्भानां नालिकानां च योगः गणितः | .container-fixed() मिक्सिनस्य विस्तारं सेट् कर्तुं स्तम्भानां नालिकानां च संख्यां गणयति |
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> इति
बूटस्ट्रैप् भिन्न-भिन्न-यन्त्रेषु स्क्रीन-संकल्पेषु च भवतः परियोजनानि अधिकं उपयुक्तानि कर्तुं सहायकं भवितुं मुष्टिभ्यां मीडिया-प्रश्नानां समर्थनं करोति । अत्र किं किं समाविष्टम् अस्ति ।
नामपत्र | विन्यास चौड़ाई | स्तम्भ चौड़ाई | नाली चौड़ाई |
---|---|---|---|
स्मार्टफोनः | 480px तथा नीचे | द्रवस्तम्भाः, नियतविस्ताराः न सन्ति | |
चित्र गोलियाँ | ४८०px तः ७६८px पर्यन्तम् | द्रवस्तम्भाः, नियतविस्ताराः न सन्ति | |
परिदृश्य गोलियाँ | ७६८px तः ९४०px पर्यन्तम् | ४४px इति | २०px इति |
मूलभूतम् | 940px तथा ऊपर | ६०px इति | २०px इति |
विशाल प्रदर्शन | 1210px तथा ऊपर | ७०px इति | ३०px |
मीडिया प्रश्नाः कतिपयानां शर्तानाम् आधारेण कस्टम् CSS इत्यस्य अनुमतिं ददति-अनुपाताः, विस्ताराः, प्रदर्शनप्रकारः इत्यादयः-किन्तु सामान्यतया परितः min-width
तथा च केन्द्रीक्रियते max-width
।
Bootstrap इत्यत्र स्वयमेव एतानि मीडिया-प्रश्नानि न समाविष्टानि सन्ति, परन्तु तान् अवगन्तुं योजयितुं च अतीव सुलभं भवति तथा च न्यूनतम-सेटअपस्य आवश्यकता वर्तते । Bootstrap इत्यस्य प्रतिक्रियाशीलविशेषताः समाविष्टुं भवतः समीपे कतिचन विकल्पाः सन्ति:
किमर्थं न केवलं तत् समावेशितम् ? सत्यं वक्तव्यं, न सर्वं प्रतिक्रियाशीलं भवितुम् आवश्यकम्। विकासकान् एतत् विशेषतां दूरीकर्तुं प्रोत्साहयितुं स्थाने वयं एतत् सक्षमं कर्तुं सर्वोत्तमम् इति चिन्तयामः ।
- // लैण्डस्केप फोन एवं नीचे
- @ मीडिया ( अधिकतम - चौड़ाई : 480px ) { ... } .
- // लैंडस्केप फोन को पोर्ट्रेट टैबलेट
- @ मीडिया ( अधिकतम - चौड़ाई : 768px ) { ... } .
- // लैंडस्केप एवं डेस्कटॉप को टैबलेट को चित्रित करें
- @media ( न्यूनतम - चौड़ाई : 768px ) तथा ( अधिकतम - चौड़ाई : 940px ) { ... }
- // बड़ा डेस्कटॉप
- @ मीडिया ( न्यूनतम - चौड़ाई : 1200px ) { .. } .