मचान

बुटस्ट्र्याप एक उत्तरदायी 12-स्तम्भ ग्रिडमा बनाइएको छ। हामीले त्यो प्रणालीमा आधारित स्थिर- र तरल-चौडाइ लेआउटहरू पनि समावेश गरेका छौं।

पूर्वनिर्धारित 940px ग्रिड

१२

Bootstrap को भागको रूपमा प्रदान गरिएको पूर्वनिर्धारित ग्रिड प्रणाली 940px-चौडा, 12-स्तम्भ ग्रिड हो ।

यसमा विभिन्न यन्त्रहरू र रिजोल्युसनहरूका लागि चार प्रतिक्रियाशील भिन्नताहरू पनि छन्: फोन, ट्याब्लेट पोर्ट्रेट, टेबल ल्यान्डस्केप र साना डेस्कटपहरू, र ठूला वाइडस्क्रिन डेस्कटपहरू।

  1. <div वर्ग = "पङ्क्ति" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span8" > ... </div>
  4. </div>

यहाँ देखाइए अनुसार, हामीले हाम्रो ग्रिड प्रणालीको भागको रूपमा परिभाषित गरेका 12 आधारभूत स्तम्भहरूको संख्यामा फैलिएको प्रत्येकले दुई "स्तम्भहरू" सँग आधारभूत लेआउट सिर्जना गर्न सकिन्छ।


अफसेटिङ स्तम्भहरू

४ अफसेट ४
३ अफसेट ३
३ अफसेट ३
८ अफसेट ४
  1. <div वर्ग = "पङ्क्ति" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span4 offset4" > ... </div>
  4. </div>

नेस्टिङ स्तम्भहरू

बुटस्ट्र्यापमा स्थिर (गैर-तरल) ग्रिड प्रणालीको साथ, नेस्टिङ सजिलो छ। तपाईंको सामग्री नेस्ट गर्न, अवस्थित स्तम्भ भित्र नयाँ .rowर स्तम्भहरूको सेट थप्नुहोस् ।.span*.span*

उदाहरण

स्तम्भको स्तर १
स्तर २
स्तर २
  1. <div वर्ग = "पङ्क्ति" >
  2. <div class = "span12" >
  3. स्तम्भको स्तर १
  4. <div वर्ग = "पङ्क्ति" >
  5. <div class = "span6" > स्तर २ </div>
  6. <div class = "span6" > स्तर २ </div>
  7. </div>
  8. </div>
  9. </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">

  1. <body>
  2. <div वर्ग = "कन्टेनर" >
  3. ...
  4. </div>
  5. </body>

तरल लेआउट

<div class="container-fluid">लचिलो पृष्ठ संरचना, न्यूनतम र अधिकतम चौडाइ, र बायाँ-हात साइडबार दिन्छ। यो अनुप्रयोगहरू र कागजातहरूको लागि उत्कृष्ट छ।

  1. <div वर्ग = "कन्टेनर-तरल पदार्थ" >
  2. <div class = "row-fluid" >
  3. <div class = "span2" >
  4. <!--साइडबार सामग्री-->
  5. </div>
  6. <div class = "span10" >
  7. <!--शारीरिक सामग्री-->
  8. </div>
  9. </div>
  10. </div>
उत्तरदायी उपकरणहरू

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

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

लेबल लेआउट चौडाइ स्तम्भ चौडाइ नाली चौडाइ
स्मार्टफोनहरू 480px र तल तरल स्तम्भहरू, कुनै निश्चित चौडाइहरू छैनन्
पोर्ट्रेट ट्याब्लेटहरू 480px देखि 768px सम्म तरल स्तम्भहरू, कुनै निश्चित चौडाइहरू छैनन्
ल्यान्डस्केप ट्याब्लेटहरू 768px देखि 940px सम्म 44px 20px
पूर्वनिर्धारित 940px र माथि ६० पिक्सेल 20px
ठूलो डिस्प्ले 1210px र माथि 70px ३०px

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

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

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

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

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

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

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

  1. // ल्यान्डस्केप फोन र तल
  2. @media ( अधिकतम - चौडाइ : 480px ) { ... }
  3.  
  4. // ल्यान्डस्केप फोन पोर्ट्रेट ट्याब्लेटमा
  5. @media ( अधिकतम - चौडाइ : 768px ) { ... }
  6.  
  7. // परिदृश्य र डेस्कटपमा पोर्ट्रेट ट्याब्लेट
  8. @media ( न्यूनतम - चौडाइ : 768px ) ( अधिकतम - चौडाइ : 940px ) { ... }
  9.  
  10. // ठूलो डेस्कटप
  11. @media ( न्यूनतम - चौडाइ : १२०० पिक्सेल ) { .. }