पाळणी घालप
बूटस्ट्रॅप प्रतिसाद दिवपी 12 स्तंभ ग्रिडाचेर तयार केला. तशेंच आमी त्या प्रणालीचेर आदारीत स्थिर- आनी द्रव-रुंदी मांडावळ समाविष्ट केल्या.
CSS रीसेट, टायपोग्राफी, आनी दुवे खातीर जागतीक शैली
HTML5 डॉकटायप जाय
बूटस्ट्रॅप HTML घटक आनी CSS गुणधर्मांचो वापर करता जाका HTML5 डॉकटायप वापरपाची गरज आसता. तुमच्या प्रकल्पांतल्या दर एका Bootstrapped पानाचे सुरवेक तो समाविष्ट करपाची खात्री करात.
- <!DOCTYPE html> हें नांव
- <html lang = "en" > हें नांव
- ...
- </html> अशें म्हण्टात
टायपोग्राफी आनी दुवे
scaffolding.less फायलीन, आमी मुळाव्यो जागतीक प्रदर्शन, टायपोग्राफी, आनी दुवो शैली सेट करतात . खासा करून आमी: १.
- आंगाचेर मार्जिन काडून उडोवप
- वर सेट
background-color: white;केलाbody - आमचो मुद्रण आदार म्हूण
@baseFontFamily,@baseFontSize, आनी गुणधर्म वापरात@baseLineHeight - वरवीं जागतीक दुवो रंग सेट करात
@linkColorआनी दुवे रेखांकन फकत चालू करात:hover
Normalize वरवीं रिसेट करचें
बूटस्ट्रॅप 2 प्रमाणें, पारंपारीक CSS रीसेट Normalize.css च्या घटकांचो वापर करपाक विकसीत जाला , निकोलस गॅलाघेराचो एक प्रकल्प जो HTML5 बॉयलरप्लेटाकय शक्त दिता .
नवो रीसेट अजूनय reset.less हातूंत मेळूं येता , पूण संक्षेप आनी अचूकताये खातीर जायते घटक काडून उडयल्यात.
प्रतिसाद दिवपी घुंवळे वखद आशिल्ले मुलभूत जाळी प्रणाली 12 स्तंभ
बूटस्ट्रॅपाचो भाग म्हूण पुरवण केल्ली मुलभूत ग्रिड प्रणाली 940px-रुंद, 12-स्तंभ ग्रिड आसा .
तशेंच तातूंत वेगवेगळ्या साधनांखातीर आनी रिझोल्यूशनांखातीर चार प्रतिसाद दिवपी बदल आसात: फोन, टॅबलेट पोर्ट्रेट, कोश्टक लॅंडस्केप आनी ल्हान डेस्कटॉप, आनी व्हड वाइडस्क्रीन डेस्कटॉप.
- <div वर्ग = "ओळ" >
- <div वर्ग = "span4" > ... </div>
- <div वर्ग = "span8" > ... </div>
- </div> हें नांव
हांगा दाखयल्ले प्रमाणें, दोन "स्तंभ" आशिल्ली मुळावी मांडावळ तयार करूं येता, दरेक स्तंभ आमी आमच्या ग्रिड प्रणालीचो भाग म्हूण व्याख्या केल्ल्या 12 मुळाव्या स्तंभांच्या संख्येंत पातळटात.
स्तंभ ऑफसेट करप
- <div वर्ग = "ओळ" >
- <div वर्ग = "span4" > ... </div>
- <div वर्ग = "span4 ऑफसेट4" > ... </div>
- </div> हें नांव
घोंस घालपाचे स्तंभ
बूटस्ट्रॅपांत स्थिर (बिगर द्रव) ग्रिड प्रणाली आशिल्ल्यान, नेस्टिंग सोंपें आसा. तुमची सामुग्री नेस्ट करपाक, फकत अस्तित्वांत आशिल्ल्या स्तंभा भितर नवो .rowआनी स्तंभांचो संच जोडात ..span*.span*
उदारण
नेस्टेड ओळींनी स्तंभांचो संच आसपावपाक जाय जो ताच्या पालकाच्या स्तंभांच्या संख्येमेरेन जोडटा. देखीक, दोन नेस्टेड .span3स्तंभ एका भितर दवरपाक जाय .span6.
- <div वर्ग = "ओळ" >
- <div वर्ग = "span12" >
- स्तंभाची पातळी 1
- <div वर्ग = "ओळ" >
- <div class = "span6" > पातळी 2 </div>
- <div class = "span6" > पातळी 2 </div>
- </div> हें नांव
- </div> हें नांव
- </div> हें नांव
द्रव जाळी प्रणाली 12 प्रतिसाद दिवपी, टक्केवारीचेर आदारीत स्तंभ
द्रव स्तंभ
टक्केवारी, पिक्सेल न्हय
द्रव जाळी प्रणाली स्थिर पिक्सेल बदला स्तंभ रुंदायेखातीर टक्केवारी वापरता. तशेंच तातूंत आमच्या स्थिर ग्रिड प्रणाली प्रमाण प्रतिसाद दिवपी बदल आसात, की स्क्रीन रिझोल्यूशन आनी साधनां खातीर योग्य प्रमाण सुनिश्चीत करता.
द्रव वळी
फकत बदलून खंयचीय ओळी द्रव .rowकरात .row-fluid. स्तंभ सारकेच उरतात, ताका लागून स्थिर आनी द्रव मांडावळी मदीं उलटप सुपर सरळ जाता.
मार्कअप करप
- <div वर्ग = "ओळ-द्रव" >
- <div वर्ग = "span4" > ... </div>
- <div वर्ग = "span8" > ... </div>
- </div> हें नांव
द्रव घोंस घालप
द्रव जाळीं वांगडा घोंस घालप मात्शें वेगळें आसा: नेस्ट केल्ल्या स्तंभांची संख्या पालकाक जुळपाची गरज ना. ताचे बदला, तुमचे स्तंभ दरेक पातळेचेर रिसेट जातात कारण दरेक ओळ पालक स्तंभाचो 100% घेता.
- <div वर्ग = "ओळ-द्रव" >
- <div वर्ग = "span12" >
- स्तंभाची पातळी 1
- <div वर्ग = "ओळ-द्रव" >
- <div class = "span6" > पातळी 2 </div>
- <div class = "span6" > पातळी 2 </div>
- </div> हें नांव
- </div> हें नांव
- </div> हें नांव
ग्रिड सानुकूलीकरण
| परिवर्तनशील हें | मुलभूत मोल | वर्णन |
|---|---|---|
@gridColumns |
12 हें नांव | स्तंभांची संख्या |
@gridColumnWidth |
60px इतलें आसा | दर एका स्तंभाची रुंदाय |
@gridGutterWidth |
20px हें आसा | स्तंभांमदीं नकारात्मक जागो |
@siteWidth |
सगळ्या स्तंभांची आनी गटरांची गणना केल्ली बेरीज | मिक्सिनाची रुंदाय थारावपाखातीर स्तंभ आनी गटरांची संख्या .container-fixed()मेजता |
LESS मदीं चड-उणें
बूटस्ट्रॅपांत तयार केल्ले मुलभूत 940px ग्रिड प्रणाली पसंतीचे करपाखातीर मुठीभर चड-उणें आसात, वयर दस्तावेजीत केल्यात. ग्रिडा खातीर सगळे चड-उणें चडांत चडांत सांठोवन दवरतात.less.
कशें सानुकूल करप
ग्रिडांत बदल करप म्हणल्यार तीन व्हेरिएबल बदलप @grid*आनी बूटस्ट्रॅप परतून संकलित करप. variables.less मदीं ग्रिड चडांत चड बदलात आनी पुनर्संकलन करपाक दस्तावेजीत केल्ल्या चार मार्गांतलो एक वापरात . तुमी चड स्तंभ जोडटात जाल्यार, grid.less हातूंत आशिल्ल्यांखातीर CSS जोडपाची खात्री करात.
प्रतिसाद दिवपी रावप
ग्रिडाचें पसंतीचें काम फकत मुलभूत पातळेचेर, 940px ग्रिडाचेर काम करता. Bootstrap च्या प्रतिसादात्मक आंगांक सांबाळपाक, तुमकां responsive.less हातूंत ग्रिड पसंतीचेय करचे पडटले.
मांडावळी वेबपान तयार करपाक मुळावे साचे
स्थिर मांडावळ
मुलभूत आनी सादी 940px-रुंद, केंद्रीत मांडावळ फकत जवळजवळ खंयच्याय संकेतथळा खातीर वा पान एकेच पुरवण केल्या <div class="container">.
- <शरीर> हें नांव
- <div वर्ग = "कंटेनर" >
- ...
- </div> हें नांव
- </body> हें नांव
द्रव मांडावळ
<div class="container-fluid">लवचीक पान रचणूक, किमान- आनी चडांत चड-रुंदी, आनी डाव्या हाताची बाजूची पट्टी दिता. ऍप्लिकेशनां आनी डॉक्स खातीर तो बरोच.
- <div class = "कंटेनर-द्रव" >
- <div वर्ग = "ओळ-द्रव" >
- <div वर्ग = "span2" >
- <!--साइडबार आशय-->
- </div> हें नांव
- <div वर्ग = "span10" >
- <!--शरीर आशय-->
- </div> हें नांव
- </div> हें नांव
- </div> हें नांव
प्रतिसाद दिवपी डिझायन वेगवेगळ्या साधनां खातीर आनी रिझोल्यूशनां खातीर माध्यम क्वेरी
ते कितें करतात
माध्यम क्वेरी जायत्या अटींचेर आदारीत सानुकूल CSS परवानगी दितात-प्रमाण, रुंदाय, प्रदर्शन प्रकार, आदी-पूण चड करून min-widthआनी भोंवतणी लक्ष केंद्रीत करता max-width.
- आमच्या ग्रिडांतल्या स्तंभाची रुंदाय बदलची
- गरज पडटा थंय फ्लोट करचे बदला घटक स्टॅक करात
- साधनांखातीर चड योग्य जावपाक शीर्षकां आनी मजकूर आकार बदलचो
माध्यम क्वेरी जबाबदारपणान आनी फकत तुमच्या मोबायल प्रेक्षकांक सुरवात म्हणून वापरात. व्हडल्या प्रकल्पां खातीर, समर्पीत कोड बेस विचारांत घेयात आनी माध्यम क्वेरीचे थर न्हय.
समर्थीत साधनां
वेगवेगळ्या डिव्हायसांचेर आनी स्क्रीन रिझोल्यूशनांचेर तुमचे प्रकल्प चड योग्य करपाक मदत करपाक बूटस्ट्रॅप एकाच फायलीन मुठीभर माध्यम क्वेरींक तेंको दिता. हांगा कितें आस्पावलां तें पळयात:
| लेबल | मांडावळ रुंदाय | स्तंभ रुंदाय | गटराची रुंदाय |
|---|---|---|---|
| स्मार्टफोन वापरतात | 480px आनी ताचे सकयल | द्रव स्तंभ, थारावीक रुंदाय नात | |
| स्मार्टफोन ते टॅबलेट | 767px आनी सकयल | द्रव स्तंभ, थारावीक रुंदाय नात | |
| पोर्ट्रेट टॅबलेट | 768px आनी वयर | 42px हें आसा | 20px हें आसा |
| डिफॉल्ट | 980px आनी वयर | 60px इतलें आसा | 20px हें आसा |
| व्हडलें प्रदर्शन | 1200px आनी वयर | 70px इतलें आसा | 30px इतलें आसा |
मेटा टॅग जाय
साधनां प्रतिसाद दिवपी पान योग्य रितीन दाखयतात हाची खात्री करपाक, व्यूपोर्ट मेटा टॅग समाविष्ट करात.
- <meta name = "viewport" content = "रुंदी=डिव्हायस-रुंदी, सुरवातीचें-मापन=1.0" >
माध्यम क्वेरींचो वापर करप
बूटस्ट्रॅपांत आपोआप ह्यो मिडिया क्वेरी आसपावीत करिनात, पूण तीं समजून घेवप आनी जोडप खूब सोंपें आसा आनी उण्यांत उणें सेटअप जाय पडटा. बूटस्ट्रॅपाची प्रतिसाद दिवपी वैशिश्ट्यां समाविष्ट करपा खातीर तुमचे कडेन कांय पर्याय आसात:
- संकलित प्रतिसाद दिवपी आवृत्ती, bootstrap-responsive.css वापरात
- @import "responsive.less" जोडात आनी बूटस्ट्रॅप परतून संकलित करात
- responsive.less वेगळी फायल म्हणून बदलात आनी परतून संकलित करात
फकत ताचो आस्पाव कित्याक करचो ना? खरेंच सांगचें जाल्यार सगळें प्रतिसाद दिवपाची गरज ना. विकसकांक हें वैशिश्ट्य काडून उडोवपाक प्रोत्साहन दिवचे परस, आमी तें सक्षम करप सगळ्यांत बरें अशें मानतात.
- // लॅंडस्केप फोन आनी सकयल
- @मीडिया ( कमाल - रुंदी : 480px ) { ... } .
- // पोर्ट्रेट टॅबलेट करपाक लॅंडस्केप फोन
- @मीडिया ( कमाल - रुंदी : 768px ) { ... } .
- // लॅंडस्केप आनी डेस्कटॉपाचेर पोर्ट्रेट टॅबलेट
- @media ( min - width : 768px ) आनी ( max - width : 980px ) { ... } .
- // व्हड डेस्कटॉप
- @मीडिया ( मिनिट - रुंदी : 1200px ) { . } .
प्रतिसाद दिवपी उपयुक्तताय वर्ग
ते कितें आसात
वेगवान मोबायल-अनुकूल विकासा खातीर, डिव्हायसा प्रमाणें सामुग्री दाखोवपाक आनी लिपोवपा खातीर हे मुळावे उपयुक्तताय वर्ग वापरात.
केन्ना वापरप
मर्यादीत तत्त्वाचेर वापरात आनी एकाच सायटीचीं पुरायपणान वेगळीं आवृत्ती तयार करप टाळचें. ताचे बदला, दरेका डिव्हायसाच्या सादरीकरणाक पूरक करपाक तांचो वापर करचो.
देखीक, तुमी <select>मोबायल मांडावळीचेर nav खातीर एक घटक दाखोवंक शकतात, पूण टॅबलेट वा डेस्कटॉपाचेर न्हय.
वर्गांक आदार दिवप
हांगा दाखयलां आमी आदार दिवपी वर्गांचें कोश्टक आनी दिल्ल्या माध्यम क्वेरी मांडावळीचेर (डिव्हायसा प्रमाणें लेबल केल्लें) तांचो परिणाम. त्यो मेळटात responsive.less.
| वर्ग | फोन करतात480px आनी ताचे सकयल | गोळ्यांचें767px आनी सकयल | डेस्कटॉप हांचो आस्पाव जाता768px आनी वयर |
|---|---|---|---|
.visible-phone |
दिश्टी पडटा | लिपिल्लें | लिपिल्लें |
.visible-tablet |
लिपिल्लें | दिश्टी पडटा | लिपिल्लें |
.visible-desktop |
लिपिल्लें | लिपिल्लें | दिश्टी पडटा |
.hidden-phone |
लिपिल्लें | दिश्टी पडटा | दिश्टी पडटा |
.hidden-tablet |
दिश्टी पडटा | लिपिल्लें | दिश्टी पडटा |
.hidden-desktop |
दिश्टी पडटा | दिश्टी पडटा | लिपिल्लें |
चांचणी केस
वयल्या वर्गांची चांचणी करपाक तुमचो ब्राउझर आकार बदलचो वा वेगवेगळ्या डिव्हायसांचेर लोड करचो.
वर दिश्टी पडटा...
- फोन✔ फोन करचो
- टॅबलेट हें वखद✔ टॅबलेट
- डेस्कटॉप हें नांव✔ डेस्कटॉप हें