मचान

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 चा जास्त वापर करत असताना , आम्ही विशेषत: Bootstrap साठी काही घटक काढून टाकले आहेत.

थेट ग्रिड उदाहरण

डीफॉल्ट बूटस्ट्रॅप ग्रिड सिस्टीम 12 स्तंभ वापरते , 940px रुंद कंटेनरसाठी प्रतिसादात्मक वैशिष्ट्ये सक्षम न करता. रिस्पॉन्सिव्ह CSS फाइल जोडल्यानंतर, तुमच्या व्ह्यूपोर्टवर अवलंबून ग्रिड ७२४px आणि ११७०px रुंद होण्यास अनुकूल होते. 767px व्ह्यूपोर्टच्या खाली, स्तंभ द्रव बनतात आणि अनुलंब स्टॅक करतात.

१

५

९

मूलभूत ग्रिड HTML

साध्या दोन कॉलम लेआउटसाठी, एक तयार करा .rowआणि योग्य संख्येने .span*कॉलम जोडा. ही 12-स्तंभांची ग्रिड असल्यामुळे, प्रत्येक .span*त्या 12 स्तंभांची संख्या पसरवते आणि प्रत्येक पंक्तीसाठी (किंवा पॅरेंटमधील स्तंभांची संख्या) नेहमी 12 पर्यंत जोडली पाहिजे.

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

हे उदाहरण दिल्यास, आपल्याकडे 12 एकूण स्तंभ .span4आणि .span8एक संपूर्ण पंक्ती आहे.

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

.offset*वर्ग वापरून स्तंभ डावीकडे हलवा . प्रत्येक वर्ग स्तंभाचा डावा समास संपूर्ण स्तंभाने वाढवतो. उदाहरणार्थ, चार स्तंभांवर .offset4हलते ..span4

3 ऑफसेट 2

3 ऑफसेट 1

3 ऑफसेट 2

6 ऑफसेट 3

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

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

तुमची सामग्री डीफॉल्ट ग्रिडसह नेस्ट करण्यासाठी, विद्यमान स्तंभामध्ये नवीन .rowआणि स्तंभांचा संच जोडा . नेस्टेड पंक्तींमध्ये स्तंभांचा संच समाविष्ट असावा जो त्याच्या मूळ स्तंभांच्या संख्येपर्यंत जोडतो..span*.span*

उदाहरण

येथे दोन नेस्टेड .span4स्तंभ a मध्ये ठेवले आहेत .span8.

स्तंभाचा स्तर 1

स्तर 2

<div वर्ग = "पंक्ती" > 
  <div वर्ग = "span9" > 
    स्तर 1 स्तंभ
    <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*त्या अनेक कॉलम्सद्वारे ऑफसेट करण्यासाठी कोणत्याही कॉलममध्ये जोडा.

4 ऑफसेट 4

3 ऑफसेट 3

6 ऑफसेट 6

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

द्रव घरटे

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

द्रवपदार्थ 12

द्रव 6

<div class = "row-fluid" > 
  <div वर्ग = "span12" > 
    स्तंभाचा स्तर 1
    <div class = "row-fluid" > 
      <div class = "span6" > स्तर २ </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 वर्ग = "span2" > 
      <!--साइडबार सामग्री-->
    </div>
    <div class = "span10" > 
      <!--शरीर सामग्री-->
    </div>
  </div>
</div>

प्रतिसादात्मक वैशिष्ट्ये सक्षम करणे

<head>तुमच्या दस्तऐवजात योग्य मेटा टॅग आणि अतिरिक्त स्टाइलशीट समाविष्ट करून तुमच्या प्रोजेक्टमध्ये रिस्पॉन्सिव्ह CSS चालू करा . तुम्ही सानुकूलित पृष्ठावरून बूटस्ट्रॅप संकलित केले असल्यास, तुम्हाला फक्त मेटा टॅग समाविष्ट करणे आवश्यक आहे.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

सावधान! बूटस्ट्रॅपमध्ये यावेळी डीफॉल्टनुसार प्रतिसादात्मक वैशिष्ट्ये समाविष्ट नाहीत कारण प्रत्येक गोष्ट प्रतिसादात्मक असणे आवश्यक नाही. हे वैशिष्ट्य काढून टाकण्यासाठी विकासकांना प्रोत्साहित करण्याऐवजी, आम्ही ते आवश्यकतेनुसार सक्षम करणे चांगले समजतो.

प्रतिसादी बूटस्ट्रॅप बद्दल

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

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

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

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

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

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

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

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

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

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

कधी वापरायचे

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

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

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

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

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

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

वर लपलेले...

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

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

जागतिक संरचना