बूटस्ट्रॅप

मचान

बूटस्ट्रॅप प्रतिसादात्मक 12-स्तंभ ग्रिडवर तयार केला आहे. आम्ही त्या प्रणालीवर आधारित निश्चित- आणि द्रव-रुंदीचे लेआउट देखील समाविष्ट केले आहेत.

CSS रीसेट, टायपोग्राफी आणि लिंक्ससाठी जागतिक शैली

HTML5 doctype आवश्यक आहे

बूटस्ट्रॅप HTML घटक आणि CSS गुणधर्मांचा वापर करते ज्यांना HTML5 डॉक्‍टाइप वापरणे आवश्यक आहे. तुमच्या प्रकल्पातील प्रत्येक बूटस्ट्रॅप्ड पृष्ठाच्या सुरुवातीला ते समाविष्ट करण्याचे सुनिश्चित करा.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

टायपोग्राफी आणि लिंक्स

scaffolding.less फाइलमध्ये, आम्ही मूलभूत जागतिक प्रदर्शन, टायपोग्राफी आणि लिंक शैली सेट करतो . विशेषतः, आम्ही:

  • शरीरावरील मार्जिन काढा
  • वर सेट background-color: white;कराbody
  • @baseFontFamilyआमचा टायपोग्राफीक आधार म्हणून , @baseFontSize, आणि @baseLineHeightविशेषता वापरा
  • द्वारे ग्लोबल लिंक कलर सेट करा @linkColorआणि फक्त वर लिंक अधोरेखित करा:hover

नॉर्मलाइज द्वारे रीसेट करा

Bootstrap 2 नुसार, पारंपारिक CSS रीसेट Normalize.css मधील घटकांचा वापर करण्यासाठी विकसित झाला आहे , निकोलस गॅलाघरचा एक प्रकल्प जो HTML5 बॉयलरप्लेटला देखील सामर्थ्य देतो .

नवीन रीसेट अजूनही reset.less मध्ये आढळू शकते , परंतु संक्षिप्तता आणि अचूकतेसाठी अनेक घटक काढून टाकले आहेत.

डिफॉल्ट ग्रिड सिस्टीम 12 रिस्पॉन्सिव्ह ट्विस्टसह स्तंभ

१
१
१
१
१
१
१
१
१
१
१
१
4
4
4
4
8
6
6
12

बूटस्ट्रॅपमध्ये प्रदान केलेली डीफॉल्ट ग्रिड सिस्टीम 12 स्तंभ वापरते जे 724px, 940px (प्रतिक्रियाशील CSS समाविष्ट न करता डीफॉल्ट) आणि 1170px रुंदीवर रेंडर होते. 767px व्ह्यूपोर्टच्या खाली, स्तंभ द्रव बनतात आणि अनुलंब स्टॅक करतात.

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

येथे दर्शविल्याप्रमाणे, दोन "स्तंभ" सह एक मूलभूत मांडणी तयार केली जाऊ शकते, प्रत्येक 12 पायाभूत स्तंभांची संख्या व्यापलेली आहे जी आम्ही आमच्या ग्रिड प्रणालीचा भाग म्हणून परिभाषित केली आहे.


ऑफसेटिंग स्तंभ

4
4 ऑफसेट 4
3 ऑफसेट 3
3 ऑफसेट 3
8 ऑफसेट 4 
  1. <div वर्ग = "पंक्ती" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

नेस्टिंग स्तंभ

बूटस्ट्रॅपमधील स्थिर (नॉन-फ्लुइड) ग्रिड प्रणालीसह, घरटे बांधणे सोपे आहे. तुमची सामग्री नेस्ट करण्यासाठी, विद्यमान स्तंभामध्ये फक्त एक नवीन .rowआणि स्तंभांचा संच जोडा ..span*.span*

उदाहरण

नेस्टेड पंक्तींमध्ये स्तंभांचा संच समाविष्ट केला पाहिजे जो त्याच्या मूळ स्तंभांच्या संख्येपर्यंत जोडतो. उदाहरणार्थ, दोन नेस्टेड .span3स्तंभ एक मध्ये ठेवले पाहिजेत .span6.

स्तंभाचा स्तर 1
स्तर 2
स्तर 2 
  1. <div वर्ग = "पंक्ती" > 
  2.   <div वर्ग = "span6" > 
  3.     स्तर 1 स्तंभ
  4.     <div वर्ग = "पंक्ती" > 
  5.       <div class = "span3" > स्तर २ </div> 
  6.       <div class = "span3" > स्तर २ </div> 
  7.     </div>
  8.   </div>
  9. </div>

फ्लुइड ग्रिड सिस्टम 12 प्रतिसादात्मक, टक्के-आधारित स्तंभ

द्रव स्तंभ

१
१
१
१
१
१
१
१
१
१
१
१
4
4
4
4
8
6
6
12

टक्के, पिक्सेल नाही

फ्लुइड ग्रिड सिस्टीम निश्चित पिक्सेलऐवजी स्तंभाच्या रुंदीसाठी टक्के वापरते. यात आमच्या फिक्स्ड ग्रिड सिस्टीम प्रमाणेच प्रतिसादात्मक भिन्नता देखील आहेत, की स्क्रीन रिझोल्यूशन आणि उपकरणांसाठी योग्य प्रमाण सुनिश्चित करते.

द्रव पंक्ती

फक्त मध्ये बदलून कोणताही पंक्ती द्रव .rowबनवा .row-fluid. स्तंभ तंतोतंत सारखेच राहतात, ज्यामुळे ते स्थिर आणि द्रव लेआउट दरम्यान फ्लिप करणे अगदी सोपे होते.

मार्कअप

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

द्रव घरटे

फ्लुइड ग्रिडसह नेस्टिंग करणे थोडे वेगळे आहे: नेस्टेड कॉलमची संख्या पालकांशी जुळणे आवश्यक नाही. त्याऐवजी, तुमचे स्तंभ प्रत्येक स्तरावर रीसेट केले जातात कारण प्रत्येक पंक्ती मूळ स्तंभाच्या 100% भाग घेते.

द्रवपदार्थ 12
द्रव 6
द्रव 6 
  1. <div class = "row-fluid" > 
  2.   <div वर्ग = "span12" > 
  3.     स्तंभाचा स्तर 1
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > स्तर २ </div> 
  6.       <div class = "span6" > स्तर २ </div> 
  7.     </div>
  8.   </div>
  9. </div>

ग्रिड सानुकूलन

चल डीफॉल्ट मूल्य वर्णन
@gridColumns 12 स्तंभांची संख्या
@gridColumnWidth 60px प्रत्येक स्तंभाची रुंदी
@gridGutterWidth 20px स्तंभांमधील नकारात्मक जागा

व्हेरिएबल्स कमी

बूटस्ट्रॅपमध्ये अंगभूत मुलभूत 940px ग्रिड प्रणाली सानुकूलित करण्यासाठी मूठभर चल आहेत, वर दस्तऐवजीकरण. ग्रिडसाठी सर्व व्हेरिएबल्स variables.less मध्ये संग्रहित आहेत.

कसे सानुकूलित करावे

ग्रिड बदलणे म्हणजे तीन @grid*व्हेरिएबल्स बदलणे आणि बूटस्ट्रॅप पुन्हा कंपाइल करणे. variables.less मध्ये ग्रिड व्हेरिएबल्स बदला आणि पुन्हा कंपाइल करण्यासाठी दस्तऐवजीकरण केलेल्या चार मार्गांपैकी एक वापरा . तुम्ही अधिक स्तंभ जोडत असल्यास, grid.less मध्ये असलेल्यांसाठी CSS जोडण्याचे सुनिश्चित करा.

प्रतिसाद देत राहणे

ग्रिडचे सानुकूलन केवळ डीफॉल्ट स्तरावर, 940px ग्रिडवर कार्य करते. बूटस्ट्रॅपचे प्रतिसादात्मक पैलू राखण्यासाठी, तुम्हाला 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 वर्ग = "span2" > 
  4.       <!--साइडबार सामग्री-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--शरीर सामग्री-->
  8.     </div>
  9.   </div>
  10. </div>

विविध डिव्हाइसेस आणि रिझोल्यूशनसाठी प्रतिसादात्मक डिझाइन मीडिया क्वेरी

प्रतिसाद देणारी उपकरणे

ते काय करतात

मीडिया क्वेरी अनेक परिस्थितींवर आधारित सानुकूल CSS ला अनुमती देतात—प्रमाण, रुंदी, डिस्प्ले प्रकार, इ—परंतु सामान्यतः सुमारे min-widthआणि max-width.

  • आमच्या ग्रिडमधील स्तंभाची रुंदी सुधारित करा
  • आवश्यक तेथे फ्लोट ऐवजी घटक स्टॅक करा
  • उपकरणांसाठी अधिक योग्य होण्यासाठी शीर्षलेख आणि मजकूराचा आकार बदला

मीडिया क्वेरीचा वापर जबाबदारीने करा आणि फक्त तुमच्या मोबाइल प्रेक्षकांसाठी सुरुवात करा. मोठ्या प्रकल्पांसाठी, समर्पित कोड बेस विचारात घ्या आणि मीडिया क्वेरीचे स्तर नाही.

सहाय्यीकृत उपकरणे

बूटस्ट्रॅप वेगवेगळ्या डिव्हाइसेस आणि स्क्रीन रिझोल्यूशनवर तुमचे प्रोजेक्ट अधिक योग्य बनवण्यात मदत करण्यासाठी एकाच फाईलमध्ये काही मीडिया क्वेरीचे समर्थन करते. काय समाविष्ट आहे ते येथे आहे:

लेबल लेआउट रुंदी स्तंभाची रुंदी गटर रुंदी
स्मार्टफोन 480px आणि खाली द्रव स्तंभ, निश्चित रुंदी नाही
स्मार्टफोन ते टॅब्लेट 767px आणि खाली द्रव स्तंभ, निश्चित रुंदी नाही
पोर्ट्रेट टॅब्लेट 768px आणि त्यावरील 42px 20px
डीफॉल्ट 980px आणि वर 60px 20px
मोठा डिस्प्ले 1200px आणि वर ७०px 30px

मेटा टॅग आवश्यक आहे

डिव्हाइसेस योग्यरित्या प्रतिसाद देणारी पृष्ठे प्रदर्शित करतात याची खात्री करण्यासाठी, व्ह्यूपोर्ट मेटा टॅग समाविष्ट करा.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

मीडिया क्वेरी वापरणे

बूटस्ट्रॅपमध्ये या मीडिया क्वेरी आपोआप समाविष्ट होत नाहीत, परंतु त्या समजून घेणे आणि जोडणे खूप सोपे आहे आणि त्यासाठी किमान सेटअप आवश्यक आहे. तुमच्याकडे बूटस्ट्रॅपच्या प्रतिसादात्मक वैशिष्ट्यांचा समावेश करण्यासाठी काही पर्याय आहेत:

  1. संकलित प्रतिसाद आवृत्ती, bootstrap-responsive.css वापरा
  2. @import "responsive.less" जोडा आणि बूटस्ट्रॅप पुन्हा कंपाइल करा
  3. एक वेगळी फाइल म्हणून responsive.less सुधारा आणि पुन्हा कंपाइल करा

फक्त त्यात समाविष्ट का नाही? खरे सांगायचे तर, प्रत्येक गोष्टीला प्रतिसाद देण्याची गरज नाही. हे वैशिष्ट्य काढून टाकण्यासाठी विकासकांना प्रोत्साहित करण्याऐवजी, ते सक्षम करणे आम्ही सर्वोत्तम समजतो.

  1.   /* लँडस्केप फोन आणि खाली */
  2.   @मीडिया ( कमाल - रुंदी : 480px ) { ... }     
  3.  
  4.   /* लँडस्केप फोन ते पोर्ट्रेट टॅबलेट */
  5.   @ मीडिया ( कमाल - रुंदी : 767px ) { ... }     
  6.  
  7.   /* पोर्ट्रेट टॅबलेट ते लँडस्केप आणि डेस्कटॉप */
  8.   @media ( किमान - रुंदी : 768px ) आणि ( कमाल - रुंदी : 979px ) { ... }        
  9.  
  10.   /* मोठा डेस्कटॉप */
  11.   @ मीडिया ( मि - रुंदी : 1200px ) { ... }

प्रतिसादात्मक उपयुक्तता वर्ग

ते काय आहेत

जलद मोबाइल-अनुकूल विकासासाठी, डिव्हाइसद्वारे सामग्री दर्शविण्यासाठी आणि लपवण्यासाठी या मूलभूत उपयुक्तता वर्गांचा वापर करा.

कधी वापरायचे

मर्यादित आधारावर वापरा आणि एकाच साइटच्या पूर्णपणे भिन्न आवृत्त्या तयार करणे टाळा. त्याऐवजी, प्रत्येक डिव्हाइसचे सादरीकरण पूरक करण्यासाठी त्यांचा वापर करा.

उदाहरणार्थ, तुम्ही <select>मोबाइल लेआउटवर nav साठी घटक दर्शवू शकता, परंतु टॅबलेट किंवा डेस्कटॉपवर नाही.

समर्थन वर्ग

आम्ही समर्थन देत असलेल्या वर्गांची सारणी आणि दिलेल्या मीडिया क्वेरी लेआउटवर (डिव्हाइसद्वारे लेबल केलेले) त्यांचा प्रभाव येथे दर्शविला आहे. ते मध्ये आढळू शकतात responsive.less.

वर्ग फोन480px आणि खाली गोळ्या767px आणि खाली डेस्कटॉप768px आणि त्यावरील
.visible-phone दृश्यमान
.visible-tablet दृश्यमान
.visible-desktop दृश्यमान
.hidden-phone दृश्यमान दृश्यमान
.hidden-tablet दृश्यमान दृश्यमान
.hidden-desktop दृश्यमान दृश्यमान

चाचणी प्रकरण

वरील वर्गांची चाचणी घेण्यासाठी तुमच्या ब्राउझरचा आकार बदला किंवा वेगवेगळ्या उपकरणांवर लोड करा.

वर दृश्यमान...

हिरवे चेकमार्क सूचित करतात की तुमच्या वर्तमान व्ह्यूपोर्टमध्ये वर्ग दृश्यमान आहे.

  • फोन✔ फोन
  • गोळी✔ टॅब्लेट
  • डेस्कटॉप✔ डेस्कटॉप

वर लपलेले...

येथे, हिरवे चेकमार्क सूचित करतात की वर्ग तुमच्या वर्तमान व्ह्यूपोर्टमध्ये लपलेला आहे.

  • फोन✔ फोन
  • गोळी✔ टॅब्लेट
  • डेस्कटॉप✔ डेस्कटॉप