मचान

बुटस्ट्र्याप एक उत्तरदायी 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*

उदाहरण

नेस्टेड पङ्क्तिहरूले स्तम्भहरूको सेट समावेश गर्नुपर्छ जसले यसको अभिभावकको स्तम्भहरूको संख्यामा थप्छ। उदाहरणका लागि, दुई नेस्टेड .span3स्तम्भहरू भित्र राख्नुपर्छ .span6।

स्तम्भको स्तर १

स्तर २

<div वर्ग = "पङ्क्ति" > 
  <div class = "span12" > 
    स्तम्भको स्तर १
    <div वर्ग = "पङ्क्ति" > 
      <div class = "span6" > स्तर २ </div> 
      <div class = "span6" > स्तर २ </div> 
    </div>
  </div>
</div>

तरल स्तम्भहरू

१

४

८

६

१२

प्रतिशत, पिक्सेल होइन

तरल ग्रिड प्रणालीले निश्चित पिक्सेलको सट्टा स्तम्भ चौडाइहरूको लागि प्रतिशतहरू प्रयोग गर्दछ। यसमा हाम्रो निश्चित ग्रिड प्रणाली जस्तै उत्तरदायी भिन्नताहरू पनि छन्, कुञ्जी स्क्रिन रिजोल्युसन र उपकरणहरूको लागि उचित अनुपात सुनिश्चित गर्दै।

तरल पङ्क्तिहरू

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

मार्कअप

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

तरल गुँड

तरल ग्रिडहरूसँग नेस्टिङ अलि फरक छ: नेस्टेड स्तम्भहरूको संख्या अभिभावकसँग मिल्नु आवश्यक छैन। यसको सट्टा, तपाइँका स्तम्भहरू प्रत्येक स्तरमा रिसेट हुन्छन् किनभने प्रत्येक पङ्क्तिले मूल स्तम्भको 100% लिन्छ।

तरल पदार्थ १२

तरल पदार्थ ६

<div class = "row-fluid" > 
  <div class = "span12" > 
    स्तम्भको स्तर १
    <div class = "row-fluid" > 
      <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 देखि 979px सम्म	42px	20px
पूर्वनिर्धारित	980px र माथि	६० पिक्सेल	20px
ठूलो डिस्प्ले	1210px र माथि	70px	30px

मेटा ट्याग आवश्यक छ

उपकरणहरूले उत्तरदायी पृष्ठहरू ठीकसँग प्रदर्शन गरेको सुनिश्चित गर्न, भ्युपोर्ट मेटा ट्याग समावेश गर्नुहोस्।

<मेटा नाम = "दृश्यपोर्ट" सामग्री = "चौडाइ=उपकरण-चौडाई, प्रारम्भिक-स्केल=1.0" >

तिनीहरु के गर्छन

मिडिया क्वेरीहरूले अनुकूलन CSS को लागि धेरै सर्तहरूको आधारमा अनुमति दिन्छ - अनुपात, चौडाइ, प्रदर्शन प्रकार, इत्यादि — तर सामान्यतया वरिपरि केन्द्रित min-widthहुन्छ max-width।

हाम्रो ग्रिडमा स्तम्भको चौडाइ परिमार्जन गर्नुहोस्
जहाँ आवश्यक छ त्यहाँ फ्लोटको सट्टा तत्वहरू स्ट्याक गर्नुहोस्
यन्त्रहरूको लागि थप उपयुक्त हुन शीर्षकहरू र पाठको आकार बदल्नुहोस्

मिडिया प्रश्नहरू प्रयोग गर्दै

बुटस्ट्र्यापले स्वचालित रूपमा यी मिडिया प्रश्नहरू समावेश गर्दैन, तर तिनीहरूलाई बुझ्न र थप्न धेरै सजिलो छ र न्यूनतम सेटअप आवश्यक छ। तपाईंसँग बुटस्ट्र्यापका उत्तरदायी सुविधाहरू समावेश गर्नका लागि केही विकल्पहरू छन्:

कम्पाइल गरिएको उत्तरदायी संस्करण, bootstrap-responsive.css प्रयोग गर्नुहोस्
@import "responsive.less" थप्नुहोस् र बुटस्ट्र्याप पुन: कम्पाइल गर्नुहोस्
responsive.less लाई छुट्टै फाइलको रूपमा परिमार्जन र पुन: कम्पाइल गर्नुहोस्

किन मात्र समावेश नगर्ने? साँचो भनियो, सबै कुरा उत्तरदायी हुनु आवश्यक छैन। विकासकर्ताहरूलाई यो सुविधा हटाउन प्रोत्साहन गर्नुको सट्टा, हामी यसलाई सक्षम पार्नु उत्तम ठान्छौं।

  // ल्यान्डस्केप फोन र तल
  @media ( अधिकतम - चौडाइ : 480px ) { ... }     
 
  // ल्यान्डस्केप फोन पोर्ट्रेट ट्याब्लेटमा
  @media ( अधिकतम - चौडाइ : 768px ) { ... }     
 
  // परिदृश्य र डेस्कटपमा पोर्ट्रेट ट्याब्लेट
  @media ( न्यूनतम - चौडाइ : 768px ) र ( अधिकतम - चौडाइ : 980px ) { ... }        
 
  // ठूलो डेस्कटप
  @media ( न्यूनतम - चौडाइ : १२०० पिक्सेल ) { .. }