पाळणी · ट्विटर बूटस्ट्रॅप कोंकणी भाशेंत

HTML5 डॉकटायप जाय

बूटस्ट्रॅप कांय HTML घटकांचो आनी CSS गुणधर्मांचो वापर करता जाका HTML5 डॉकटायप वापरपाची गरज आसता. तुमच्या सगळ्या प्रकल्पांच्या सुरवेक ताचो आस्पाव करचो.

<!DOCTYPE html> हें नांव
<html lang = "en" > हें नांव 
  ...
</html> अशें म्हण्टात

टायपोग्राफी आनी दुवे

बूटस्ट्रॅप मुळावी जागतीक प्रदर्शन, टायपोग्राफी, आनी दुवो शैली सेट करता. खासा करून आमी: १.

marginआंगाचेर काडून उडोवप
वर सेट background-color: white;केलाbody
आमचो मुद्रण आदार म्हूण @baseFontFamily, @baseFontSize, आनी गुणधर्म वापरात@baseLineHeight
वरवीं जागतीक दुवो रंग सेट करात @linkColorआनी दुवे रेखांकन फकत चालू करात:hover

हे शैली scaffolding.less भितर मेळटात .

Normalize वरवीं रिसेट करचें

बूटस्ट्रॅप 2 कडेन, पोरनो रीसेट ब्लॉक Normalize.css च्या फायद्या खातीर सोडून दिला , निकोलस गॅलाघेराचो एक प्रकल्प जो HTML5 बॉयलरप्लेटाकय शक्त दिता . आमी आमच्या reset.less भितर Normalize चो चडसो वापर करताना , आमी Bootstrap खातीर खासा कांय घटक काडून उडयल्यात.

लायव्ह ग्रिड उदाहरण

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

१

२

३

४

५

९

मुळावी जाळी एचटीएमएल

साद्या दोन स्तंभ मांडावळी खातीर, a तयार करात .rowआनी योग्य संख्या .span*स्तंभ जोडात. ही 12 स्तंभांची जाळी आशिल्ल्यान, दरेक .span*त्या 12 स्तंभांची संख्या पातळटा, आनी दरेक ओळी खातीर (वा पालकांतल्या स्तंभांची संख्या) सदांच 12 मेरेन जोडपाक जाय.

<div वर्ग = "ओळ" > 
  <div वर्ग = "span4" > ... </div> 
  <div वर्ग = "span8" > ... </div> 
</div> हें नांव

हें उदाहरण दिल्यार, आमकां .span4आनी .span8, 12 वट्ट स्तंभ आनी एक पुराय ओळ तयार करून.

स्तंभ ऑफसेट करप

.offset*वर्ग वापरून स्तंभ डावी वटेन हालयात . दरेक वर्ग स्तंभाच्या डाव्या किनाराक पुराय स्तंभ वाडयता. देखीक, चार स्तंभांचेर .offset4हालता ..span4

४

३ ऑफसेट २

३ ऑफसेट १

३ ऑफसेट २

६ ऑफसेट ३

<div वर्ग = "ओळ" > 
  <div वर्ग = "span4" > ... </div> 
  <div वर्ग = "span3 ऑफसेट2" > ... </div> 
</div> हें नांव

घोंस घालपाचे स्तंभ

तुमची सामुग्री मुलभूत ग्रिडान नेस्ट करपाक, अस्तित्वांत आशिल्ल्या स्तंभा भितर नवो .rowआनी स्तंभांचो संच जोडात . नेस्टेड ओळींनी स्तंभांचो संच आसपावपाक जाय जो ताच्या पालकाच्या स्तंभांच्या संख्येमेरेन जोडटा..span*.span*

उदारण

हांगा दोन नेस्टेड .span4स्तंभ एका भितर दवरल्यात .span8.

स्तंभाची पातळी 1

पातळी 2

<div वर्ग = "ओळ" > 
  <div वर्ग = "span9" > 
    पातळी 1 स्तंभ
    <div वर्ग = "ओळ" > 
      <div class = "span6" > पातळी 2 </div> 
      <div class = "span3" > पातळी 2 </div> 
    </div> हें नांव
  </div> हें नांव
</div> हें नांव

लायव्ह द्रव जाळी उदाहरण

द्रव जाळी प्रणाली स्तंभ रुंदायेखातीर पिक्सेल बदला टक्के वापरता. तातूंत आमच्या स्थिर ग्रिड प्रणाली सारकीच प्रतिसाद दिवपाची क्षमता आसा, की स्क्रीन रिझोल्यूशन आनी साधनां खातीर योग्य प्रमाण सुनिश्चीत करता.

१

४

८

६

12 हें नांव

मुळावें द्रव जाळी एचटीएमएल

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

<div वर्ग = "ओळ-द्रव" > 
  <div वर्ग = "span4" > ... </div> 
  <div वर्ग = "span8" > ... </div> 
</div> हें नांव

द्रव ऑफसेटिंग करप

स्थिर ग्रिड प्रणाली ऑफसेटिंग प्रमाणेंच कार्य करता: .offset*इतल्या स्तंभांनी ऑफसेट करपाक खंयच्याय स्तंभांत जोडात.

४

४ ऑफसेट ४

३ ऑफसेट ३

६ ऑफसेट ६

<div वर्ग = "ओळ-द्रव" > 
  <div वर्ग = "span4" > ... </div> 
  <div वर्ग = "span4 ऑफसेट2" > ... </div> 
</div> हें नांव

द्रव घोंस घालप

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

द्रव पदार्थ 12

द्रव पदार्थ ६

<div वर्ग = "ओळ-द्रव" > 
  <div वर्ग = "span12" > 
    स्तंभाची पातळी 1
    <div वर्ग = "ओळ-द्रव" > 
      <div class = "span6" > पातळी 2 </div> 
      <div class = "span6" > पातळी 2 </div> 
    </div> हें नांव
  </div> हें नांव
</div> हें नांव

स्थिर मांडावळ

<div class="container">फकत गरज आशिल्ली एक सामान्य थारावीक-रुंदी (आनी पर्यायी प्रतिसाद दिवपी) मांडावळ पुरवण करता .

<शरीर> हें नांव
  <div वर्ग = "कंटेनर" > 
    ...
  </div> हें नांव
</body> हें नांव

द्रव मांडावळ

<div class="container-fluid">ऍप्लिकेशनां आनी डॉक्सां खातीर —great आशिल्लें द्रव, दोन स्तंभांचें पान तयार करचें .

<div class = "कंटेनर-द्रव" > 
  <div वर्ग = "ओळ-द्रव" > 
    <div वर्ग = "span2" > 
      <!--साइडबार आशय-->
    </div> हें नांव
    <div वर्ग = "span10" > 
      <!--शरीर आशय-->
    </div> हें नांव
  </div> हें नांव
</div> हें नांव

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

<head>तुमच्या दस्तावेजाच्या भितर योग्य मेटा टॅग आनी अतिरिक्त शैलीपत्रक समाविष्ट करून तुमच्या प्रकल्पांत प्रतिसाद दिवपी CSS चालू करात . तुमी पसंतीचे पानांतल्यान Bootstrap संकलित केल्यार, तुमकां फकत मेटा टॅग समाविष्ट करपाची गरज आसा.

<meta name = "viewport" content = "रुंदी=डिव्हायस-रुंदी, सुरवातीचें-मापन=1.0" >  
<link href = "संपत्ती/css/बूटस्ट्रॅप-प्रतिसादी.css" rel = "शैलीपत्रक" >

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

प्रतिसाद दिवपी बूटस्ट्रॅपा विशीं

माध्यम क्वेरी जायत्या अटींचेर आदारीत सानुकूल CSS परवानगी दितात-प्रमाण, रुंदाय, प्रदर्शन प्रकार, आदी-पूण चड करून min-widthआनी भोंवतणी लक्ष केंद्रीत करता max-width.

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

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

समर्थीत साधनां

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

लेबल	मांडावळ रुंदाय	स्तंभ रुंदाय	गटराची रुंदाय
फोन करतात	480px आनी ताचे सकयल	द्रव स्तंभ, थारावीक रुंदाय नात
फोन ते टॅबलेट	767px आनी सकयल	द्रव स्तंभ, थारावीक रुंदाय नात
पोर्ट्रेट टॅबलेट	768px आनी वयर	42px हें आसा	20px हें आसा
डिफॉल्ट	980px आनी वयर	60px इतलें आसा	20px हें आसा
व्हडलें प्रदर्शन	1200px आनी वयर	70px इतलें आसा	30px इतलें आसा

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

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

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

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

केन्ना वापरप

मर्यादीत तत्त्वाचेर वापरात आनी एकाच सायटीचीं पुरायपणान वेगळीं आवृत्ती तयार करप टाळचें. ताचे बदला, दरेका डिव्हायसाच्या सादरीकरणाक पूरक करपाक तांचो वापर करचो.

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

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

वर दिश्टी पडटा...

पाचवे चेकमार्क तुमच्या सद्याच्या दृश्यपोर्टांत वर्ग दिसता अशें दाखयतात.

फोन✔ फोन करचो
टॅबलेट हें वखद✔ टॅबलेट
डेस्कटॉप हें नांव✔ डेस्कटॉप हें

वर लिपलां...

हांगा, पाचवे चेकमार्क तुमच्या सद्याच्या दृश्यपोर्टांत वर्ग लिपला अशें दाखयतात.

फोन✔ फोन करचो
टॅबलेट हें वखद✔ टॅबलेट
डेस्कटॉप हें नांव✔ डेस्कटॉप हें

पाळणी घालप

जागतीक सेटिंग्ज