मचान

HTML5 doctype आवश्यक छ

बुटस्ट्र्यापले निश्चित HTML तत्वहरू र CSS गुणहरूको प्रयोग गर्दछ जुन HTML5 doctype को प्रयोग आवश्यक छ। तपाइँका सबै परियोजनाहरूको सुरुमा यसलाई समावेश गर्नुहोस्।

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

टाइपोग्राफी र लिङ्कहरू

बुटस्ट्र्यापले आधारभूत वैश्विक प्रदर्शन, टाइपोग्राफी, र लिङ्क शैलीहरू सेट गर्दछ। विशेष गरी, हामी:

marginशरीरमा हटाउनुहोस्
मा सेट background-color: white;गर्नुहोस्body
हाम्रो टाइपोग्राफिक आधारको रूपमा @baseFontFamily, @baseFontSize, र विशेषताहरू प्रयोग गर्नुहोस्@baseLineHeight
मार्फत ग्लोबल लिङ्क रङ सेट गर्नुहोस् @linkColorर लिङ्क अन्डरलाइनहरू मात्र लागू गर्नुहोस्:hover

यी शैलीहरू scaffolding.less भित्र फेला पार्न सकिन्छ ।

सामान्यीकरण मार्फत रिसेट गर्नुहोस्

Bootstrap 2 को साथ, पुरानो रिसेट ब्लक Normalize.css को पक्षमा छाडिएको छ , निकोलस गैलाघर र जोनाथन नीलले HTML5 बोइलरप्लेटलाई पनि शक्ति प्रदान गर्ने परियोजना । हामीले हाम्रो reset.less भित्र Normalize को धेरै प्रयोग गर्दा , हामीले बुटस्ट्र्यापका लागि केही तत्वहरू हटाएका छौं।

प्रत्यक्ष ग्रिड उदाहरण

पूर्वनिर्धारित बुटस्ट्र्याप ग्रिड प्रणालीले 12 स्तम्भहरू प्रयोग गर्दछ, प्रतिक्रियाशील सुविधाहरू सक्षम नगरी 940px चौडा कन्टेनरको लागि बनाउँछ । उत्तरदायी CSS फाइल थप्दा, ग्रिड तपाईंको भ्युपोर्टको आधारमा 724px र 1170px चौडाइमा अनुकूल हुन्छ। 767px भ्यूपोर्टहरू मुनि, स्तम्भहरू तरल हुन्छन् र ठाडो रूपमा स्ट्याक हुन्छन्।

१

२

३

४

५

९

आधारभूत ग्रिड HTML

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

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

यो उदाहरण दिएर, हामीसँग 12 कुल स्तम्भहरू र पूर्ण पङ्क्तिको लागि बनाइएको छ .span4।.span8

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

.offset*कक्षाहरू प्रयोग गरेर स्तम्भहरूलाई दायाँतिर सार्नुहोस् । प्रत्येक वर्गले स्तम्भको बायाँ मार्जिनलाई सम्पूर्ण स्तम्भले बढाउँछ। उदाहरणका लागि, चार स्तम्भहरू माथि सारिन्छ .offset4।.span4

४

३ अफसेट २

३ अफसेट १

३ अफसेट २

६ अफसेट ३

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

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

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

स्तर १ स्तम्भ

स्तर २

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

प्रत्यक्ष तरल पदार्थ ग्रिड उदाहरण

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

१

४

८

६

१२

आधारभूत तरल पदार्थ ग्रिड HTML

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

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

तरल पदार्थ अफसेटिङ

फिक्स्ड ग्रिड प्रणाली अफसेटिङ जस्तै काम गर्दछ: .offset*धेरै स्तम्भहरू द्वारा अफसेट गर्न कुनै पनि स्तम्भमा थप्नुहोस्।

४

४ अफसेट ४

३ अफसेट ३

६ अफसेट ६

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

तरल गुँड

फ्लुइड ग्रिडहरूले नेस्टिङलाई फरक तरिकाले प्रयोग गर्छन्: स्तम्भहरूको प्रत्येक नेस्टेड स्तरमा 12 स्तम्भहरू थप्नु पर्छ। यो किनभने फ्लुइड ग्रिडले चौडाइ सेट गर्न पिक्सेल होइन, प्रतिशत प्रयोग गर्दछ।

तरल पदार्थ १२

तरल पदार्थ ६

<div class = "row-fluid" > 
  <div class = "span12" > 
    तरल पदार्थ १२
    <div class = "row-fluid" > 
      <div वर्ग = "span6" > 
        तरल पदार्थ ६
        <div class = "row-fluid" > 
          <div class = "span6" > फ्लुइड ६ </div> 
          <div class = "span6" > फ्लुइड ६ </div> 
        </div>
      </div>
      <div class = "span6" > फ्ल���इड ६ </div> 
    </div>
  </div>
</div>

निश्चित लेआउट

सामान्य निश्चित-चौडाइ (र वैकल्पिक रूपमा उत्तरदायी) लेआउट मात्र <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>

प्रतिक्रियाशील सुविधाहरू सक्षम गर्दै

तपाईंको कागजात भित्र उचित मेटा ट्याग र अतिरिक्त स्टाइलसिट समावेश गरेर तपाईंको परियोजनामा उत्तरदायी CSS सक्रिय <head>गर्नुहोस्। यदि तपाईंले अनुकूलन पृष्ठबाट बुटस्ट्र्याप कम्पाइल गर्नुभएको छ भने, तपाईंले मेटा ट्याग मात्र समावेश गर्न आवश्यक छ।

<मेटा नाम = "दृश्यपोर्ट" सामग्री = "चौडाइ=उपकरण-चौडाई, प्रारम्भिक-स्केल=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

उत्तरदायी बुटस्ट्र्यापको बारेमा

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

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

मिडिया प्रश्नहरू जिम्मेवार रूपमा प्रयोग गर्नुहोस् र केवल तपाइँको मोबाइल दर्शकहरूको लागि सुरुको रूपमा। ठूला परियोजनाहरूको लागि, समर्पित कोड आधारहरू विचार गर्नुहोस् र मिडिया प्रश्नहरूको तहहरू होइन।

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

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

लेबल	लेआउट चौडाइ	स्तम्भ चौडाइ	नाली चौडाइ
ठूलो डिस्प्ले	1200px र माथि	70px	30px
पूर्वनिर्धारित	980px र माथि	६० पिक्सेल	20px
पोर्ट्रेट ट्याब्लेटहरू	768px र माथि	42px	20px
ट्याब्लेटमा फोनहरू	767px र तल	तरल स्तम्भहरू, कुनै निश्चित चौडाइहरू छैनन्
फोनहरू	480px र तल	तरल स्तम्भहरू, कुनै निश्चित चौडाइहरू छैनन्

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

उत्तरदायी उपयोगिता कक्षाहरू

छिटो मोबाइल-अनुकूल विकासको लागि, उपकरणद्वारा सामग्री देखाउन र लुकाउन यी उपयोगिता कक्षाहरू प्रयोग गर्नुहोस्। तल उपलब्ध कक्षाहरूको तालिका र दिइएको मिडिया क्वेरी लेआउटमा तिनीहरूको प्रभाव (यन्त्रद्वारा लेबल गरिएको) छ। तिनीहरू मा फेला पार्न सकिन्छ responsive.less।

कक्षा	फोनहरू767px र तल	ट्याब्लेटहरू979px देखि 768px सम्म	डेस्कटपहरूपूर्वनिर्धारित
`.visible-phone`	देखिने	लुकेको	लुकेको
`.visible-tablet`	लुकेको	देखिने	लुकेको
`.visible-desktop`	लुकेको	लुकेको	देखिने
`.hidden-phone`	लुकेको	देखिने	देखिने
`.hidden-tablet`	देखिने	लुकेको	देखिने
`.hidden-desktop`	देखिने	देखिने	लुकेको

कहिले प्रयोग गर्ने

सीमित आधारमा प्रयोग गर्नुहोस् र एउटै साइटको पूर्ण रूपमा फरक संस्करणहरू सिर्जना गर्नबाट बच्नुहोस्। बरु, प्रत्येक यन्त्रको प्रस्तुतिलाई पूरक बनाउन तिनीहरूलाई प्रयोग गर्नुहोस्। उत्तरदायी उपयोगिताहरू तालिकाहरूसँग प्रयोग गरिनु हुँदैन, र जस्तै समर्थित छैन।

उत्तरदायी उपयोगिता परीक्षण केस

माथिका कक्षाहरू परीक्षण गर्न आफ्नो ब्राउजरको आकार बदल्नुहोस् वा विभिन्न उपकरणहरूमा लोड गर्नुहोस्।

मा देखिने...

हरियो चेकमार्कहरूले तपाईंको हालको भ्यूपोर्टमा कक्षा देखिने छ भनी सङ्केत गर्छ।

फोन✔ फोन
ट्याब्लेट✔ ट्याब्लेट
डेस्कटप✔ डेस्कटप

लुकेको...

यहाँ, हरियो चेकमार्कले तपाईंको हालको भ्युपोर्टमा क्लास लुकेको छ भनी संकेत गर्छ।

फोन✔ फोन
ट्याब्लेट✔ ट्याब्लेट
डेस्कटप✔ डेस्कटप

ग्लोबल सेटिङहरू