बुटस्ट्र्याप एक उत्तरदायी 12-स्तम्भ ग्रिडमा बनाइएको छ। हामीले त्यो प्रणालीमा आधारित स्थिर- र तरल-चौडाइ लेआउटहरू पनि समावेश गरेका छौं।
Bootstrap को भागको रूपमा प्रदान गरिएको पूर्वनिर्धारित ग्रिड प्रणाली 940px-चौडा, 12-स्तम्भ ग्रिड हो ।
यसमा विभिन्न यन्त्रहरू र रिजोल्युसनहरूका लागि चार प्रतिक्रियाशील भिन्नताहरू पनि छन्: फोन, ट्याब्लेट पोर्ट्रेट, टेबल ल्यान्डस्केप र साना डेस्कटपहरू, र ठूला वाइडस्क्रिन डेस्कटपहरू।
- <div वर्ग = "पङ्क्ति" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
यहाँ देखाइए अनुसार, हामीले हाम्रो ग्रिड प्रणालीको भागको रूपमा परिभाषित गरेका 12 आधारभूत स्तम्भहरूको संख्यामा फैलिएको प्रत्येकले दुई "स्तम्भहरू" सँग आधारभूत लेआउट सिर्जना गर्न सकिन्छ।
- <div वर्ग = "पङ्क्ति" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
बुटस्ट्र्यापमा स्थिर (गैर-तरल) ग्रिड प्रणालीको साथ, नेस्टिङ सजिलो छ। तपाईंको सामग्री नेस्ट गर्न, अवस्थित स्तम्भ भित्र नयाँ .row
र स्तम्भहरूको सेट थप्नुहोस् ।.span*
.span*
- <div वर्ग = "पङ्क्ति" >
- <div class = "span12" >
- स्तम्भको स्तर १
- <div वर्ग = "पङ्क्ति" >
- <div class = "span6" > स्तर २ </div>
- <div class = "span6" > स्तर २ </div>
- </div>
- </div>
- </div>
चर | पूर्वनिर्धारित मान | विवरण |
---|---|---|
@gridColumns |
१२ | स्तम्भहरूको संख्या |
@gridColumnWidth |
६० पिक्सेल | प्रत्येक स्तम्भको चौडाइ |
@gridGutterWidth |
20px | स्तम्भहरू बीच नकारात्मक खाली ठाउँ |
@siteWidth |
सबै स्तम्भहरू र गटरहरूको गणना गरिएको योगफल | .container-fixed() मिक्सनको चौडाइ सेट गर्न स्तम्भ र गटरहरूको संख्या गणना गर्दछ |
बुटस्ट्र्यापमा निर्मित पूर्वनिर्धारित 940px ग्रिड प्रणालीलाई अनुकूलित गर्नका लागि मुट्ठीभर चरहरू हुन्, माथिको दस्तावेज। ग्रिडका लागि सबै चरहरू variables.less मा भण्डारण गरिएका छन्।
ग्रिड परिमार्जन गर्नु भनेको तीन @grid*
चर परिवर्तन गर्नु र बुटस्ट्र्याप पुन: कम्पाइल गर्नु हो। variables.less मा ग्रिड चर परिवर्तन गर्नुहोस् र पुन: कम्पाइल गर्नका लागि कागजात गरिएका चार तरिकाहरू मध्ये एउटा प्रयोग गर्नुहोस् । यदि तपाइँ थप स्तम्भहरू थप्दै हुनुहुन्छ भने, grid.less मा भएकाहरूका लागि CSS थप्न निश्चित हुनुहोस्।
ग्रिडको अनुकूलनले पूर्वनिर्धारित स्तर, 940px ग्रिडमा मात्र काम गर्छ। Bootstrap को उत्तरदायी पक्षहरू कायम राख्न, तपाईंले responsive.less मा ग्रिडहरू पनि अनुकूलन गर्नुपर्नेछ।
पूर्वनिर्धारित र सरल 940px-चौडा, एकल द्वारा प्रदान गरिएको कुनै पनि वेबसाइट वा पृष्ठको लागि केन्द्रित लेआउट <div class="container">
।
- <body>
- <div वर्ग = "कन्टेनर" >
- ...
- </div>
- </body>
<div class="container-fluid">
लचिलो पृष्ठ संरचना, न्यूनतम र अधिकतम चौडाइ, र बायाँ-हात साइडबार दिन्छ। यो अनुप्रयोगहरू र कागजातहरूको लागि उत्कृष्ट छ।
- <div वर्ग = "कन्टेनर-तरल पदार्थ" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!--साइडबार सामग्री-->
- </div>
- <div class = "span10" >
- <!--शारीरिक सामग्री-->
- </div>
- </div>
- </div>
बुटस्ट्र्यापले विभिन्न यन्त्रहरू र स्क्रिन रिजोल्युसनहरूमा तपाईंको परियोजनाहरूलाई अझ उपयुक्त बनाउन मद्दत गर्न केही मिडिया प्रश्नहरूलाई समर्थन गर्दछ। यहाँ के समावेश छ:
लेबल | लेआउट चौडाइ | स्तम्भ चौडाइ | नाली चौडाइ |
---|---|---|---|
स्मार्टफोनहरू | 480px र तल | तरल स्तम्भहरू, कुनै निश्चित चौडाइहरू छैनन् | |
पोर्ट्रेट ट्याब्लेटहरू | 480px देखि 768px सम्म | तरल स्तम्भहरू, कुनै निश्चित चौडाइहरू छैनन् | |
ल्यान्डस्केप ट्याब्लेटहरू | 768px देखि 940px सम्म | 44px | 20px |
पूर्वनिर्धारित | 940px र माथि | ६० पिक्सेल | 20px |
ठूलो डिस्प्ले | 1210px र माथि | 70px | ३०px |
मिडिया क्वेरीहरूले अनुकूलन CSS को लागि धेरै सर्तहरूको आधारमा अनुमति दिन्छ - अनुपात, चौडाइ, प्रदर्शन प्रकार, इत्यादि — तर सामान्यतया वरिपरि केन्द्रित min-width
हुन्छ max-width
।
बुटस्ट्र्यापले स्वचालित रूपमा यी मिडिया प्रश्नहरू समावेश गर्दैन, तर तिनीहरूलाई बुझ्न र थप्न धेरै सजिलो छ र न्यूनतम सेटअप आवश्यक छ। तपाईंसँग बुटस्ट्र्यापका उत्तरदायी सुविधाहरू समावेश गर्नका लागि केही विकल्पहरू छन्:
किन मात्र समावेश नगर्ने? साँचो भनौं, सबै कुरा उत्तरदायी हुनु आवश्यक छैन। विकासकर्ताहरूलाई यो सुविधा हटाउन प्रोत्साहित गर्नुको सट्टा, हामी यसलाई सक्षम पार्नु उत्तम ठान्छौं।
- // ल्यान्डस्केप फोन र तल
- @media ( अधिकतम - चौडाइ : 480px ) { ... }
- // ल्यान्डस्केप फोन पोर्ट्रेट ट्याब्लेटमा
- @media ( अधिकतम - चौडाइ : 768px ) { ... }
- // परिदृश्य र डेस्कटपमा पोर्ट्रेट ट्याब्लेट
- @media ( न्यूनतम - चौडाइ : 768px ) र ( अधिकतम - चौडाइ : 940px ) { ... }
- // ठूलो डेस्कटप
- @media ( न्यूनतम - चौडाइ : १२०० पिक्सेल ) { .. }