मचान
बुटस्ट्र्याप एक उत्तरदायी 12-स्तम्भ ग्रिडमा बनाइएको छ। हामीले त्यो प्रणालीमा आधारित स्थिर- र तरल-चौडाइ लेआउटहरू पनि समावेश गरेका छौं।
CSS रिसेट, टाइपोग्राफी र लिङ्कहरूको लागि विश्वव्यापी शैलीहरू
HTML5 doctype आवश्यक छ
बुटस्ट्र्यापले HTML तत्वहरू र CSS गुणहरूको प्रयोग गर्दछ जुन HTML5 doctype को प्रयोग आवश्यक छ। तपाइँको परियोजना मा प्रत्येक Bootstrapped पृष्ठ को सुरु मा यो समावेश गर्न निश्चित हुनुहोस्।
- <!DOCTYPE html>
- <html lang = "en" >
- ...
- </html>
टाइपोग्राफी र लिङ्कहरू
scaffolding.less फाइल भित्र , हामीले आधारभूत विश्वव्यापी प्रदर्शन, टाइपोग्राफी, र लिङ्क शैलीहरू सेट गर्छौं। विशेष गरी, हामी:
- शरीरमा मार्जिन हटाउनुहोस्
- मा सेट
background-color: white;गर्नुहोस्body - हाम्रो टाइपोग्राफिक आधारको रूपमा
@baseFontFamily,@baseFontSize, र विशेषताहरू प्रयोग गर्नुहोस्@baseLineHeight - मार्फत ग्लोबल लिङ्क रङ सेट गर्नुहोस्
@linkColorर लिङ्क अन्डरलाइनहरू मात्र लागू गर्नुहोस्:hover
सामान्यीकरण मार्फत रिसेट गर्नुहोस्
Bootstrap 2 को रूपमा, परम्परागत CSS रिसेट Normalize.css बाट तत्वहरू प्रयोग गर्न विकसित भएको छ , निकोलस ग्यालाघरको परियोजना जसले HTML5 बोइलरप्लेटलाई पनि शक्ति दिन्छ ।
नयाँ रिसेट अझै पनि reset.less मा फेला पार्न सकिन्छ , तर संक्षिप्तता र शुद्धताका लागि धेरै तत्वहरू हटाइयो।
पूर्वनिर्धारित ग्रिड प्रणाली १२ स्तम्भहरू उत्तरदायी ट्विस्टसँग
Bootstrap मा प्रदान गरिएको पूर्वनिर्धारित ग्रिड प्रणालीले 12 स्तम्भहरू प्रयोग गर्दछ जुन 724px, 940px (उत्तरदायी CSS समावेश नगरी पूर्वनिर्धारित), र 1170px चौडाइमा प्रस्तुत हुन्छ। 767px भ्यूपोर्टहरू मुनि, स्तम्भहरू तरल हुन्छन् र ठाडो रूपमा स्ट्याक हुन्छन्।
- <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 = "span6" >
- स्तर १ स्तम्भ
- <div वर्ग = "पङ्क्ति" >
- <div class = "span3" > स्तर २ </div>
- <div class = "span3" > स्तर २ </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 | स्तम्भहरू बीच नकारात्मक खाली ठाउँ |
कम मा चर
बुटस्ट्र्यापमा निर्मित पूर्वनिर्धारित 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>
विभिन्न यन्त्रहरू र रिजोलुसनहरूको लागि उत्तरदायी डिजाइन मिडिया प्रश्नहरू
तिनीहरु के गर्छन
मिडिया क्वेरीहरूले अनुकूलन CSS को लागि धेरै सर्तहरूमा आधारित अनुमति दिन्छ - अनुपात, चौडाइ, प्रदर्शन प्रकार, आदि - तर सामान्यतया वरिपरि केन्द्रित min-widthहुन्छ max-width।
- हाम्रो ग्रिडमा स्तम्भको चौडाइ परिमार्जन गर्नुहोस्
- जहाँ आवश्यक छ त्यहाँ फ्लोटको सट्टा तत्वहरू स्ट्याक गर्नुहोस्
- यन्त्रहरूको लागि थप उपयुक्त हुन शीर्षकहरू र पाठको आकार बदल्नुहोस्
मिडिया प्रश्नहरू जिम्मेवार रूपमा प्रयोग गर्नुहोस् र केवल तपाइँको मोबाइल दर्शकहरूको लागि सुरुको रूपमा। ठूला परियोजनाहरूको लागि, समर्पित कोड आधारहरू विचार गर्नुहोस् र मिडिया प्रश्नहरूको तहहरू होइन।
समर्थित उपकरणहरू
बुटस्ट्र्यापले विभिन्न यन्त्रहरू र स्क्रिन रिजोल्युसनहरूमा तपाईंको परियोजनाहरूलाई अझ उपयुक्त बनाउन मद्दत गर्न एकल फाइलमा केही मिडिया प्रश्नहरूलाई समर्थन गर्दछ। यहाँ के समावेश छ:
| लेबल | लेआउट चौडाइ | स्तम्भ चौडाइ | नाली चौडाइ |
|---|---|---|---|
| स्मार्टफोनहरू | 480px र तल | तरल स्तम्भहरू, कुनै निश्चित चौडाइहरू छैनन् | |
| ट्याब्लेटमा स्मार्टफोन | 767px र तल | तरल स्तम्भहरू, कुनै निश्चित चौडाइहरू छैनन् | |
| पोर्ट्रेट ट्याब्लेटहरू | 768px र माथि | 42px | 20px |
| पूर्वनिर्धारित | 980px र माथि | ६० पिक्सेल | 20px |
| ठूलो डिस्प्ले | 1200px र माथि | 70px | ३०px |
मेटा ट्याग आवश्यक छ
यन्त्रहरूले प्रतिक्रियाशील पृष्ठहरू ठीकसँग प्रदर्शन गरेको सुनिश्चित गर्न, भ्युपोर्ट मेटा ट्याग समावेश गर्नुहोस्।
- <मेटा नाम = "दृश्यपोर्ट" सामग्री = "चौडाइ=उपकरण-चौडाई, प्रारम्भिक-स्केल=1.0" >
मिडिया प्रश्नहरू प्रयोग गर्दै
बुटस्ट्र्यापले स्वचालित रूपमा यी मिडिया प्रश्नहरू समावेश गर्दैन, तर तिनीहरूलाई बुझ्न र थप्न धेरै सजिलो छ र न्यूनतम सेटअप आवश्यक छ। तपाईंसँग बुटस्ट्र्यापका उत्तरदायी सुविधाहरू समावेश गर्नका लागि केही विकल्पहरू छन्:
- कम्पाइल गरिएको उत्तरदायी संस्करण, bootstrap-responsive.css प्रयोग गर्नुहोस्
- @import "responsive.less" थप्नुहोस् र बुटस्ट्र्याप पुन: कम्पाइल गर्नुहोस्
- responsive.less लाई छुट्टै फाइलको रूपमा परिमार्जन र पुन: कम्पाइल गर्नुहोस्
किन मात्र समावेश नगर्ने? साँचो भनियो, सबै कुरा उत्तरदायी हुनु आवश्यक छैन। विकासकर्ताहरूलाई यो सुविधा हटाउन प्रोत्साहन गर्नुको सट्टा, हामी यसलाई सक्षम पार्नु उत्तम ठान्छौं।
- /* ल्यान्डस्केप फोन र डाउन */
- @media ( अधिकतम - चौडाइ : 480px ) { ... }
- /* ल्यान्डस्केप फोन पोर्ट्रेट ट्याब्लेटमा */
- @media ( अधिकतम - चौडाइ : 767px ) { ... }
- /* परिदृश्य र डेस्कटपमा पोर्ट्रेट ट्याब्लेट */
- @media ( न्यूनतम - चौडाइ : 768px ) र ( अधिकतम - चौडाइ : 979px ) { ... }
- /* ठूलो डेस्कटप */
- @media ( न्यूनतम - चौडाइ : १२०० पिक्सेल ) { ... }
उत्तरदायी उपयोगिता कक्षाहरू
तिनीहरू के हुन
छिटो मोबाइल-अनुकूल विकासको लागि, उपकरणद्वारा सामग्री देखाउन र लुकाउनको लागि यी आधारभूत उपयोगिता कक्षाहरू प्रयोग गर्नुहोस्।
कहिले प्रयोग गर्ने
सीमित आधारमा प्रयोग गर्नुहोस् र एउटै साइटको पूर्ण रूपमा फरक संस्करणहरू सिर्जना गर्नबाट बच्नुहोस्। बरु, प्रत्येक यन्त्रको प्रस्तुतिलाई पूरक बनाउन तिनीहरूलाई प्रयोग गर्नुहोस्।
उदाहरणका लागि, तपाईंले मोबाइल लेआउटहरूमा nav को लागि तत्व देखाउन सक्नुहुन्छ <select>, तर ट्याब्लेट वा डेस्कटपहरूमा होइन।
समर्थन कक्षाहरू
हामीले समर्थन गर्ने कक्षाहरूको तालिका र दिइएको मिडिया क्वेरी लेआउटमा तिनीहरूको प्रभाव (यन्त्रद्वारा लेबल गरिएको) यहाँ देखाइएको छ। तिनीहरू मा फेला पार्न सकिन्छ responsive.less।
| कक्षा | फोनहरू480px र तल | ट्याब्लेटहरू767px र तल | डेस्कटपहरू768px र माथि |
|---|---|---|---|
.visible-phone |
देखिने | लुकेको | लुकेको |
.visible-tablet |
लुकेको | देखिने | लुकेको |
.visible-desktop |
लुकेको | लुकेको | देखिने |
.hidden-phone |
लुकेको | देखिने | देखिने |
.hidden-tablet |
देखिने | लुकेको | देखिने |
.hidden-desktop |
देखिने | देखिने | लुकेको |
परीक्षण मामला
माथिका कक्षाहरू परीक्षण गर्न आफ्नो ब्राउजरको आकार बदल्नुहोस् वा विभिन्न उपकरणहरूमा लोड गर्नुहोस्।
मा देखिने...
हरियो चेकमार्कले तपाईंको हालको भ्युपोर्टमा क्लास देखिने छ भनी संकेत गर्छ।
- फोन✔ फोन
- ट्याब्लेट✔ ट्याब्लेट
- डेस्कटप✔ डेस्कटप
लुकेको...
यहाँ, हरियो चेकमार्कले तपाईंको हालको भ्युपोर्टमा क्लास लुकेको छ भनी संकेत गर्छ।