वयर
दावें
उजवें
सकयल
बूटस्ट्रॅप हें नांव

बूटस्ट्रॅप, ट्विटरा वयल्यान

बूटस्ट्रॅप ही ट्विटराची एक साधनपुस्तिका आसा जी वेबऍप्लिकेशनां आनी सायटींच्या विकासाक किकस्टार्ट करपाक तयार केल्ली आसा.
तातूंत टायपोग्राफी, फॉर्म, बटण, कोश्टकां, ग्रिड, नेव्हिगेशन, आनी हेर खातीर बेस CSS आनी HTML आसपावीत केला.

Nerd सावधानताय: बूटस्ट्रॅप Less कडेन तयार केला आनी आधुनीक ब्राउझर मतींत घेवन गेटी भायर काम करपाक तयार केल्लो.

CSS चें हॉटलिंक करचें

सगळ्यांत बेगीन आनी सोप्या सुरवाती खातीर, फकत हो स्निपेट तुमच्या वॅबपानांत कॉपी करात.

Less कडेन वापरात

लेस वापरपाचो एक फॅन? कसलोच प्रॉब्लेम ना, फकत रेपो क्लोन करात आनी ह्यो ओळी जोडात:

GitHub चेर फोर्क करात

Github चेर अधिकृत Bootstrap रेपो वांगडा डावनलोड, फोर्क, पुल, फायल प्रस्न, आनी हेर.

GitHub चेर बूटस्ट्रॅप करचें »

सध्या v1.3.0 आसा

बूटस्ट्रॅपा विशीं संक्षिप्त इतिहास, ब्राउझर आदार, आनी हेर

इतिहास

ट्विटरांतल्या अभियंत्यांनी इतिहासीक नदरेन फ्रंट-एंड गरजां पुराय करपा खातीर तांकां वळख आशिल्ली चड करून खंयच्याय लायब्ररीचो वापर केला. सादर केल्ल्या आव्हानांक जाप म्हणून बूटस्ट्रॅप सुरू जालो. जायत्या अद्भुत लोकांच्या आदारान बूटस्ट्रॅपाची म्हत्वाची वाड जाल्या.

dev.twitter.com ह्या संकेतथळार चड वाचात ›

ब्राउझर समर्थन

Chrome, Safari, Internet Explorer, आनी Firefox सारकिल्या मुखेल आधुनीक ब्राउझरांनी बूटस्ट्रॅपाची चांचणी आनी समर्थन आसा.

Chrome, Safari, Internet Explorer, आनी Firefox त चांचणी केल्या आनी समर्थीत केल्या
  • ताजी सफारी
  • ताजें गूगल क्रोम
  • फायरफॉक्स 4+ आसा
  • इंटरनॅट एक्सप्लोरर 7+
  • ओपेरा 11 हें नांव

कितें आस्पावलां

बूटस्ट्रॅप संकलित CSS, संकलित नाशिल्ले, आनी उदाहरण साच्यां वांगडा पुराय येता.

जलद सुरू करपाचीं उदाहरणां

कांय बेगीन साचे जाय? आमी एकठांय केल्लीं हीं मुळावीं उदाहरणां पळयात:

  • नायक एकक आशिल्ली सादी तीन स्तंभ मांडावळ
  • स्थिर बाजूपट्टी आशिल्ली द्रव मांडावळ
  • ऍप्लिकेशनां खातीर सादें फांशीचें कंटेनर

ग्रिड प्रणाली मानक 940px रॉक करात वा तुमचो स्वताचो रोल करात

मुलभूत जाळी

बूटस्ट्रॅपाचो भाग म्हूण पुरवण केल्ली मुलभूत ग्रिड प्रणाली 940px रुंद 16-स्तंभ ग्रिड आसा. तो लोकप्रिय 960 ग्रिड प्रणालीची एक रूच, पूण डाव्या आनी उजव्या बाजूक अतिरिक्त मार्जिन/पॅडींग नासतना.

उदाहरण जाळी मार्कअप

हांगा दाखयल्ले प्रमाणें, दोन "स्तंभ" आशिल्ली मुळावी मांडावळ तयार करूंक शकता, दरेक स्तंभ आमी आमच्या ग्रिड प्रणालीचो भाग म्हूण व्याख्या केल्ल्या 16 मुळाव्या स्तंभांच्या संख्येंत पातळटात. चड बदलां खातीर सकयल दिल्ल्यो उदाहरणां पळयात.

  1. <div वर्ग = "ओळ" > 
  2.   <div वर्ग = "span6" > 
  3.     ...
  4.   </div> हें नांव
  5.   <div वर्ग = "span10" > 
  6.     ...
  7.   </div> हें नांव
  8. </div> हें नांव
१
१
१
१
१
१
१
१
१
१
१
१
१
१
१
१
२
२
२
२
२
२
२
२
३
३
३
३
३
१
४
४
४
४
१/३ हें नांव
१/३ हें नांव
१/३ हें नांव
१/३ हें नांव
२/३ हें नांव
४
६
६
८
८
५
11 हें नांव
१६ हें नांव

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

४
८ ऑफसेट ४
१/३ ऑफसेट २/३ से
४ ऑफसेट ४
४ ऑफसेट ४
५ ऑफसेट ३
५ ऑफसेट ३
१० ऑफसेट ६

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

.rowअस्तित्वांत आशिल्ल्या स्तंभा भितर एक तयार करून तुमकां जाय जाल्यार तुमची सामुग्री नेस्ट करात .

नेस्टेड स्तंभांचें उदाहरण

स्तंभाची पातळी 1
पातळी 2
पातळी 2 
  1. <div वर्ग = "ओळ" > 
  2.   <div वर्ग = "span12" > 
  3.     स्तंभाची पातळी 1
  4.     <div वर्ग = "ओळ" > 
  5.       <div वर्ग = "span6" > 
  6.         पातळी 2
  7.       </div> हें नांव
  8.       <div वर्ग = "span6" > 
  9.         पातळी 2
  10.       </div> हें नांव
  11.     </div> हें नांव
  12.   </div> हें नांव
  13. </div> हें नांव

स्वताची जाळी गुठलावची

बूटस्ट्रॅपांत तयार केल्ले मुलभूत 940px ग्रिड प्रणाली पसंतीचे करपाखातीर मुठीभर चड-उणें आसात. थोडें सानुकूलीकरण करून, तुमी स्तंभांचो आकार, तांचे गटर, आनी ते रावतात त्या कंटेनरांत बदल करूंक शकतात.

जाळी भितर

ग्रिड प्रणालींत बदल करपाक जाय आशिल्ले चड-उणे सद्या सगळे preboot.less.

परिवर्तनशील हें मुलभूत मोल वर्णन
@gridColumns १६ हें नांव जाळी भितर स्तंभांची संख्या
@gridColumnWidth 40px इतलें आसा जाळी भितरल्या दर एका स्तंभाची रुंदाय
@gridGutterWidth 20px हें आसा दर एका स्तंभा मदली नकारात्मक सुवात
@siteWidth सगळ्या स्तंभांची आनी गटरांची गणना केल्ली बेरीज आमी कांय मुळावे जुळोवणी वापरतात स्तंभ आनी गटरांची संख्या मेजपाक आनी .fixed-container()मिक्सिनाची रुंदाय सेट करपाक.

आतां सानुकूल करपाक

ग्रिडांत बदल करप म्हणल्यार तीन चड-उणें बदलप @grid-*आनी कमी फायली परतून संकलित करप.

बूटस्ट्रॅप 24 स्तंभां मेरेन आशिल्ली ग्रिड प्रणाली हाताळपाक सज्ज येता; मुलभूत फकत 16. हांगा तुमचे ग्रिड चड-उणें 24-स्तंभ ग्रिडाक अनुकूल केल्ले कशे दिसतले तें पळयात.

  1. @gridस्तंभ : 24 ;       
  2. @gridस्तंभरुंदी : 20px ;   
  3. @gridगटररुंदी : 20px ;

एकदां परतून संकलित केल्या उपरांत, तुमी सेट जातले!

मांडावळी वेबपान तयार करपाक मुळावे साचे

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

मुलभूत आनी सादी 940px-रुंद, केंद्रीत मांडावळ फकत जवळजवळ खंयच्याय संकेतथळा खातीर वा पान एकेच पुरवण केल्या <div.container>.

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

द्रव मांडावळ

किमान- आनी चडांत चड-रुंदी आनी डाव्या हाताची बाजू आशिल्ली एक पर्यायी, लवचीक द्रव पान रचणूक. ऍप्लिकेशनां आनी डॉक्स खातीर ग्रेट.

  1. <शरीर> हें नांव
  2.   <div class = "कंटेनर-द्रव" > 
  3.     <div वर्ग = "साइडबार" > 
  4.       ...
  5.     </div> हें नांव
  6.     <div वर्ग = "सामग्री" > 
  7.       ...
  8.     </div> हें नांव
  9.   </div> हें नांव
  10. </body> हें नांव

टायपोग्राफी शीर्षकां, परिच्छेद, यादी, आनी हेर इनलायन प्रकार घटक

शीर्षकां & प्रत

तुमच्या वॅबपानांची रचना करपाखातीर एक मानक मुद्रण क्रमवारी.

पुराय मुद्रण ग्रिड आमच्या preboot.less फायलीन दोन Less चडांत चड आदारीत आसा: @basefontआनी @baseline. पयलो पुराय वापरिल्लो बेस फॉन्ट-आकार आनी दुसरो बेस लायन-उंचाय.

आमी त्या व्हेरिएबल्स, आनी कांय गणित, आमच्या सगळ्या प्रकाराचे आनी हेर मार्जिन, पॅडिंग, आनी लायन-हायट्स तयार करपाक वापरतात.

h1. शीर्षक 1

h2. शीर्षक 2

h3 हें नांव. शीर्षक 3

h4 हें नांव. शीर्षक 4

h5. शीर्षक 5
h6 हें नांव. शीर्षक 6

उदाहरण परिच्छेद

नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नारे वेल इउ लियो. कम सोसायस नाटोक पेनाटिबस एट मॅग्निस डिस पार्ट्युरिएंट मोंटेस, नासेतुर रिडिकुलस मस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

उदाहरण शीर्षक उपशीर्षक आसा...

विविध प्रकार. घटकांचो आस्पाव जाता

भर, पत्ते, & संक्षेप वापरप

<strong> <em> <address> <abbr>

केन्ना वापरप

भर दिवपी टॅग ( <strong>आनी <em>) वापरपाक जाय, शब्द वा वाक्यांश ताचे भोंवतणच्या प्रतीच्या सापेक्ष अतिरिक्त म्हत्व वा भर दाखोवपाक. <strong>म्हत्वाखातीर आनी ताण भर <em>दिवपाखातीर वापरात .

एका परिच्छेदांत भर दिवप

Fusce dapibus , tellus ac cursus commodo , टॉर्टोर मौरिस कॉन्डिमेंटम निभ , उत फर्मेन्टम मासा जुस्टो बस अमेट रिसुस. मेसेनास फॉसिबस मॉलिस इंटरडम. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग.

टिप: HTML5 त वापरप <b>आनी <i>टॅग करप अजूनय बरोबर आसा आनी तांकां अनुक्रमान बोल्ड आनी इटालिक स्टायल करपाची गरज ना (जरी चड अर्थपूर्ण घटक आसल्यार, तो वापरात). <b>अतिरिक्त म्हत्व दिवंक नासतना उतरां वा वाक्यां उजवाडावपाखातीर आसता, जाल्यार <i>चड करून आवाज, तंत्रीक संज्ञा आदी खातीर आसता.

संबोधन करता

ह्या <address>घटकाचो उपेग ताच्या लागींच्या पूर्वजा खातीर, वा पुराय कामाच्या आंगा खातीर संपर्क म्हायती खातीर करतात. ताचो वापर कसो करूं येता हाचीं दोन उदाहरणां हांगा दिल्यांत:

ट्विटर, इंक
795 फोल्सम अॅव्हे, सुट 600
सॅन फ्रांसिस्को, सीए 94107
पी: (123) 456-7890
पुराय नांव
[email protected]

टिप: एकांतली दरेक ओळ <address>ओळी-विराम ( ) च्या आदारान सोंपपाक जाय वा आशयाची योग्य रचणूक करपाखातीर <br />ब्लॉक-पातळेच्या टॅगांत गुठलावंक जाय (देखीक, ).<p>

संक्षेप

संक्षेप आनी संक्षिप्त नांवांखातीर, <abbr>टॅग वापरात ( HTML5<acronym> त नाका आसा ). टॅगा भितर आशुलिपी फॉर्म घालचो आनी पुराय नांवाखातीर शीर्षक सेट करचो.

ब्लॉककोट्स हांचो आस्पाव जाता

<blockquote> <p> <small>

उद्धृत कशें करचें

ब्लॉककोट समाविष्ट करपाक, वॅप <blockquote>अराउंड <p>आनी <small>टॅग करात. तुमचो स्रोत उल्लेख करपाक घटक वापरात आनी ताचे आदीं <small>तुमकां एम डॅश मेळटलो .&mdash;

लोरेम इप्सम डोलोर बस आमेत, कॉन्सेक्टेटर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक अँटी व्हेनेनेटिस डापिबस पोसुएरे व्हेलिट अॅलिकेट.

ज्युलियस हिबर्ट हांणी डॉ 
  1. <ब्लॉककोट> हें नांव
  2.   <p> लोरेम इप्सम डोलोर बस आमेट, कॉन्सेक्टेतुर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक अँटी व्हेनेनेटिस डापिबस पोसुएरे व्हेलिट एलिकेट. </p> हें नांव
  3.   <ल्हान> डॉ ज्युलियस हिबर्ट </small>
  4. </blockquote> हें नांव

यादी दिता

अनऑर्डर केल्लें<ul>

  • लोरेम इप्सम डोलोर बस आमेत
  • Consectetur adipiscing एलिट हें नांव
  • मासा हांगा पूर्णांक मोलेस्टी लोरेम
  • प्रीटियम निस्ल अॅलिकेटांत फॅसिलिसिस
  • नुल्ला वोलुत्पात आलिक्वाम वेलिट
    • फासेलस इअकुलिस नेक हें नांव
    • पुरुस सोडलेस अल्ट्रिसीस
    • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
    • एसी ट्रिस्टीक लिबेरो वोलुत्पात अॅट
  • फॉसिबस पोर्टा लेकस फ्रिंगिला वेल
  • एनियन बस अमेत एरात नुंक
  • एगेट पोर्टिटोर लोरेम

अनस्टायल केल्लें<ul.unstyled>

  • लोरेम इप्सम डोलोर बस आमेत
  • Consectetur adipiscing एलिट हें नांव
  • मासा हांगा पूर्णांक मोलेस्टी लोरेम
  • प्रीटियम निस्ल अॅलिकेटांत फॅसिलिसिस
  • नुल्ला वोलुत्पात आलिक्वाम वेलिट
    • फासेलस इअकुलिस नेक हें नांव
    • पुरुस सोडलेस अल्ट्रिसीस
    • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
    • एसी ट्रिस्टीक लिबेरो वोलुत्पात अॅट
  • फॉसिबस पोर्टा लेकस फ्रिंगिला वेल
  • एनियन बस अमेत एरात नुंक
  • एगेट पोर्टिटोर लोरेम

आदेश दिलो<ol>

  1. लोरेम इप्सम डोलोर बस आमेत
  2. Consectetur adipiscing एलिट हें नांव
  3. मासा हांगा पूर्णांक मोलेस्टी लोरेम
  4. प्रीटियम निस्ल अॅलिकेटांत फॅसिलिसिस
  5. नुल्ला वोलुत्पात आलिक्वाम वेलिट
  6. फॉसिबस पोर्टा लेकस फ्रिंगिला वेल
  7. एनियन बस अमेत एरात नुंक
  8. एगेट पोर्टिटोर लोरेम

वर्णनdl

वर्णन यादी
संज्ञा व्याख्या करपाखातीर वर्णन वळेरी परिपूर्ण आसा.
युइस्मोड हांणी केला
वेस्टिबुलम आयडी लिगुला पोर्टा फेलिस युइसमोड सेम्पर एगेट लॅसिनिया ओडियो सेम नेसी एलिट.
डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस.
मालेसुआदा पोर्टा
एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड.

संहिता

<code> <pre>

दोन साद्या टॅगां वरवीं तुमचो कोड शैलींत पिंप करात. जावास्क्रिप्ट वरवीं आनीकय चड अद्भुतताये खातीर, Google चो कोड prettify लायब्ररी सोडचो आनी तुमी सेट जाल्यात.

संहिता सादर करप

कोड, ब्लॉक वा फकत स्निपेट इनलायन, फकत योग्य टॅगांत गुठलायल्यार शैलीन दाखोवंक मेळटा. एका परस चड ओळीं पातळिल्ल्या कोडाच्या ब्लॉकांखातीर, <pre>घटक वापरात. इनलायन कोडाखातीर, <code>घटक वापरात.

घटक निकाल
<code> अशे तरेन मजकूराचे ओळींत, तुमचो गुठलायल्लो कोड ह्या >html<घटका सारको दिसतलो.
<pre> 
<दिव> हें नांव
  <h1>शीर्षक</h1> हें नांव
  <p>हांगाच कितें तरी...</p>
</div> हें नांव

टिप:pre टॅगां भितर कोड शक्य तितलो डावी वटेन दवरपाची खात्री करात ; तो सगळे टॅब रेंडर करतलो.
<pre class="prettyprint">

google-code-prettify लायब्ररी वापरून, तुमी कोड ब्लॉक मात्शी वेगळी व्हिज्युअल शैली आनी स्वयंचलित वाक्यरचना हायलाइटिंग मेळटा.

<div> <h1> शीर्षक </h1> <p> हांगाच कितें तरी... </p> </div>

google-code-prettify डावनलोड करात आनी कशें वापरचें हाचे खातीर readme पळयात.

इनलायन लेबलां

<span class="label">

तुमच्या कुडीच्या मजकूरांतल्या खंयच्याय वाक्यां कडेन लक्ष ओडचें वा ध्वज दिवचें.

खंयच्याय गजालीचेर लेबल लावचें

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

लेबल निकाल
<span class="label">Default</span> डिफॉल्ट
<span class="label success">New</span> नवें
<span class="label warning">Warning</span> शिटकावणी
<span class="label important">Important</span> म्हत्वाचें
<span class="label notice">Notice</span> सुचोवणी

माध्यम प्रतिमा आनी व्हिडियो दाखोवप

मिडिया ग्रिड

उण्या HTML फुटप्रिंट आनी उण्यांत उणी शैली आशिल्ल्या पानांचेर वेगवेगळ्या आकाराचीं लघुप्रतिमां दाखोवचीं.

उदाहरण लघुप्रतिमा

हातूंतले लघुप्रतिमा .media-gridखंयच्याय आकाराचे आसूं येतात, पूण बिल्ट-इन बूटस्ट्रॅप ग्रिड प्रणालींत थेट मॅप केल्यार ते सगळ्यांत बरे काम करतात. 90, 210, आनी 330 सारकिल्ल्यो प्रतिमा रुंदाय कांय पिक्सेल पॅडींग वांगडा जोडून .span2, .span4, आनी .span6स्तंभ आकारांक बरोबर येतात.

व्हड

मध्यम

ल्हान

तांकां कोडिंग करप

मिडिया ग्रिड वापरपाक सोपी आनी मार्कअप बाजूचेर मातशी सोपी आसतात. तांचे परिमाण शुध्दपणान आस्पाव केल्ल्या प्रतिमांच्या आकाराचेर आदारून आसतात.

  1. <ul वर्ग = "माध्यम-जाळी" > 
  2.   <ली> हें नांव
  3.     <a href = "#" > हें नांव 
  4.       <img वर्ग = "लघुप्रतिमा" src = "https://placehold.it/330x230" alt = "" >   
  5.     </a> हें नांव
  6.   </li> हें नांव
  7.   <ली> हें नांव
  8.     <a href = "#" > हें नांव 
  9.       <img वर्ग = "लघुप्रतिमा" src = "https://placehold.it/330x230" alt = "" >   
  10.     </a> हें नांव
  11.   </li> हें नांव
  12. </ul> हें नांव

कोश्टकां खातीर, तुमी अदमास केला, कोश्टकीय डेटा

मेज बांदप

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

मेज म्हान-बऱ्याच गजालीं खातीर. ग्रेट कोश्टकां, मात, उपेगी, मापनीय, आनी वाचपाक योग्य (कोड पातळेचेर) जावपाक थोडो मार्कअप मोगाची गरज आसा. मदत करपाक हांगा कांय टिपां दिल्यांत.

तुमचे स्तंभ शीर्षक सदांच <thead>अशे तरेन गुठलायात की श्रेणीबध्दता <thead>> <tr>> आसतली <th>.

स्तंभ शीर्षकां प्रमाणें, तुमच्या कोश्टकाची सगळी कूड आशय एकांत गुठलायपाक जाय <tbody>म्हणून तुमची श्रेणीबध्दता <tbody>> <tr>> आसा <td>.

देखीक: मुलभूत कोश्टक शैली

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

# 1 . पयलें नांव निमाणें नांव भास
१ कांय एक इंग्लीश
२ जोय हांणी केला सिक्सपॅक हें नांव इंग्लीश
३ स्टु डेंट हें नांव संहिता 
  1. <कोश्टक> हें नांव
  2.   ...
  3. </कोश्टक>

देखीक: झेब्रा-पट्टीदार

झेब्रा-स्ट्राइपिंग जोडून तुमच्या कोश्टकां कडेन मात्शी फॅन्सी मेळोवची-फक्त .zebra-stripedवर्ग जोडचो.

# 1 . पयलें नांव निमाणें नांव भास
१ कांय एक इंग्लीश
२ जोय हांणी केला सिक्सपॅक हें नांव इंग्लीश
३ स्टु डेंट हें नांव संहिता

टिप: Zebra-striping हें एक प्रगतीशील सुदारणा आसा जी IE8 आनी सकयल सारकिल्या पोरन्या ब्राउझरां खातीर उपलब्ध ना.

  1. <कोष्टक वर्ग = "झेब्रा-पट्टीदार" > 
  2. ...
  3. </कोश्टक>

देखीक: झेब्रा-पट्टीदार w / TableSorter.js

आदलें उदाहरण घेवन, आमी jQuery आनी Tablesorter प्लगइन वरवीं क्रमवारी कार्यक्षमताय पुरवण करून आमच्या कोश्टकांची उपयुक्तताय सुदारतात . क्रमवारी बदलपाखातीर खंयच्याय स्तंभाच्या शीर्षकाचेर क्लिक करात.

# 1 . पयलें नांव निमाणें नांव भास
२ जोय हांणी केला सिक्सपॅक हें नांव इंग्लीश
३ स्टु डेंट हें नांव संहिता
१ तुमचें एक इंग्लीश 
  1. <script src = "js/jquery/jquery.tablesorter.min.js" ></स्क्रिप्ट> 
  2. <लिपी > हें नांव 
  3.   $ ( फंक्शन () { 1 . 
  4.     $ ( "कोश्टक # क्रमवारी कोश्टक उदाहरण" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  5.   });
  6. </script> हें नांव
  7. <कोष्टक वर्ग = "झेब्रा-पट्टीदार" > 
  8.   ...
  9. </कोश्टक>

रूपां

मुलभूत शैली

सगळ्या फॉर्मांक वाचपाक येवपी आनी मापनीय पद्दतीन सादर करपाक मुलभूत शैली दिल्या. मजकूर इनपुट, निवड यादी, मजकूरक्षेत्रां, रेडिओ बटणां आनी चेकबॉक्स, आनी बटणां खातीर शैली दिल्या.

उदाहरण रूप आख्यायिका
हांगा कांय मोल
मदत मजकूराचे ल्हान स्निपेट
उदाहरण रूप आख्यायिका
@ हांणी केला.
उदाहरण रूप आख्यायिका
टिप: लेबलां खूब व्हडल्या क्लिक क्षेत्रां खातीर आनी चड वापरपाक येवपी फॉर्मा खातीर सगळ्या पर्यायांक भोंवतणीं आसतात.
प्रती सगळे वेळ पॅसिफीक मानक वेळ (GMT -08:00) म्हणून दाखयल्यात.
गरज पडल्यार वयर दिल्ल्या क्षेत्राचें वर्णन करपाक मदत मजकूर ब्लॉक.
 

रचून दवरिल्लीं फॉर्मां

तुमच्या फॉर्माच्या एचटीएमएलांत जोडात .form-stackedआनी तुमकां तांच्या शेतांचेर लेबलां तांच्या उजव्या वटेन न्हय तर तांच्या शेतां वयल्यान आसतलीं. तुमचे फॉर्म ल्हान आसल्यार वा तुमचे कडेन जड फॉर्मां खातीर इनपुटांचे दोन स्तंभ आसल्यार हें बरेंच काम करता.

उदाहरण रूप आख्यायिका
उदाहरण रूप आख्यायिका
मदत मजकूराचे ल्हान स्निपेट
टिप: लेबलां खूब व्हडल्या क्लिक क्षेत्रां खातीर आनी चड वापरपाक येवपी फॉर्मा खातीर सगळ्या पर्यायांक भोंवतणीं आसतात.
 

शेताचे आकार तयार करात

तुमच्या मार्कअपांत फकत कांय वर्ग जोडून खंयचोय फॉर्म input, select, वा रुंदाय पसंतीचे करात.textarea

v1.3.0 प्रमाणें, आमी फॉर्म घटकांखातीर ग्रिड-आधारीत आकारमान वर्ग जोडल्यात. उपकार करून सद्याच्या .mini, .small, आदी वर्गांचेर हे वापरात.

बटणां घालतात

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

सगळे बटण पूर्वनिर्धारीतपणान उजवाड राशीचे शैलीचेर, पूण वेगवेगळ्या रंग शैलींखातीर जायते कार्यात्मक वर्ग लागू करूं येतात. ह्या वर्गांत निळो .primaryवर्ग, हळदुवो .infoवर्ग, पाचवो .successवर्ग, तांबडो .dangerवर्ग हांचो आस्पाव जाता.

उदाहरण बटण

बटण शैली लागू केल्ल्यान खंयच्याय गजालीक लागू करूं येतात .btn. सादारणपणान तुमकां हीं फकत <a>, <button>, आनी निवड <input>घटकांक लागू करपाची इत्सा जातली. कशें दिसता तें पळयात:

       

पर्यायी आकार दिवप

फॅन्सी व्हडले वा ल्हान बटण? ताचेर आसचें!

प्राथमिक कृती कृती
प्राथमिक कृती कृती

अक्षम स्थिती

सक्रिय नाशिल्ल्या बटणां खातीर वा ऍप्लिकेशनान एका वा दुसऱ्या कारणाक लागून अक्षम केल्ल्या बटणां खातीर, अक्षम स्थिती वापरात. तें .disabledदुव्यां खातीर आनी घटकां :disabledखातीर .<button>

दुवे आसात

प्राथमिक कृती कृती

बटणां घालतात

 

सावधानताय & चुको यशस्वी, शिटकावणी, आनी चुकीचे संदेश वा सावधानताय खातीर शैली

मुळाव्यो सावधानताय

.alert-message

कृतीचें अपयश, संभाव्य अपयश वा यश उजवाडावपाखातीर एक ओळीचे संदेश. खास करून रूपांखातीर उपेगी पडटा.

जावास्क्रिप्ट मेळोवची »

× हें नांव

पवित्र ग्वाकामोल! बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना.

× हें नांव

अरे स्नॅप! हें आनी तें बदलून परतून यत्न करात.

× हें नांव

बरें केलें! तुमी हो इशारो संदेश यशस्वीपणान वाचला.

× हें नांव

तकली वयर काडटा! हो एक इशारो आसा जाचेर तुमचें लक्ष जाय, पूण आतांच तें व्हडलें प्राधान्य न्हय.

उदाहरण कोड

  1. <div class = "सावधान-संदेश शिटकावणी" > 
  2.   <a class = "बंद करप" href = "#" > × </a>  
  3.   <p><strong> पवित्र ग्वाकामोल! </strong> बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना. </p> हें नांव
  4. </div> हें नांव

संदेश आडावप

.alert-message.block-message

थोडें स्पश्टीकरणाची गरज आशिल्ल्या संदेशां खातीर, आमचे कडेन परिच्छेद शैलीचे अलर्ट आसात. लांब चुकीचे संदेश बुडबुडें मारपाक, वापरप्याक प्रलंबीत कृतीची शिटकावणी दिवपाक, वा फकत पानाचेर चड भर दिवपा खातीर म्हायती सादर करपाक हे परिपूर्ण आसात.

जावास्क्रिप्ट मेळोवची »

× हें नांव

पवित्र ग्वाकामोल! ही एक शिटकावणी! बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग. प्रॅसेंट कोमोडो कर्सस मॅग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेतुर इ.

ही कृती करात वा अशें करचें
× हें नांव

अरे स्नॅप! तुमकां एक त्रुटी मेळ्ळी! हें आनी तें बदलून परतून यत्न करात.

  • Duis mollis est नॉन कोमोडो लक्टस
  • निसी एरात पोर्टिटोर लिगुला
  • एगेट लॅसिनिया ओडियो सेम नेक एलिट
ही कृती करात वा अशें करचें
× हें नांव

बरें केलें! तुमी हो इशारो संदेश यशस्वीपणान वाचला. कम सोसायस नाटोक पेनाटिबस एट मॅग्निस डिस पार्ट्युरिएंट मोंटेस, नासेतुर रिडिकुलस मस. मेसेनास फॉसिबस मॉलिस इंटरडम.

ही कृती करात वा अशें करचें
× हें नांव

तकली वयर काडटा! हो एक इशारो आसा जाचेर तुमचें लक्ष जाय, पूण आतांच तें व्हडलें प्राधान्य न्हय.

ही कृती करात वा अशें करचें

उदाहरण कोड

  1. <div class = "चेतावणी-संदेश ब्लॉक-संदेश शिटकावणी" > 
  2.   <a class = "बंद करप" href = "#" > × </a>  
  3.   <p><strong> पवित्र ग्वाकामोल! ही एक शिटकावणी! </strong> बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग. प्रॅसेंट कोमोडो कर्सस मॅग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेतुर इ. </p> हें नांव
  4.   <div class = "सावधान-कृती" > 
  5.     <a class = "btn small" href = "#" > ही कृती करात </a> <a class = "btn small" href = "#" > वा हें करात </a>     
  6.   </div> हें नांव
  7. </div> हें नांव

Popovers मोडल , टूलटिप्स, आनी popovers हातूंत सामुग्री दाखोवपाखातीर घटक

मोडल हांचो आस्पाव जाता

मोडल-संवाद वा लायटबॉक्स-जंय पार्श्वभूंय संदर्भ सांबाळप म्हत्वाचें आसता अशा परिस्थितींत संदर्भ कृतीं खातीर बरे आसात.

जावास्क्रिप्ट मेळोवची »

× हें नांव

मोडल शीर्षक

एक बारीक आंग...

प्राथमिक दुय्यम

साधनाच्यो टिपा

गोंदळिल्ल्या वापरप्याक मदत करपाक आनी तांकां योग्य दिशेन दाखोवपाक ट्विप्सी सुपर उपेगी आसात.

जावास्क्रिप्ट मेळोवची »

लोरेम इप्सम डॉलर सिट अमेट इलो त्रुटी इप्सम व्हेरिटाटीस ऑट इस्टे परस्पिसिएटिस इस्टे व्होलुप्टास नॅटस इलो क्वासी ओडिट ऑट नेटस कॉन्सेक्युन्तुर कॉन्सेक्युन्तुर, ऑट नाटस इलो वोलुप्टॅटेम ओडिट पर्सपिसियाटीस लॉडांटियम रेम डोलोरेमके टोटम वोलुप्टास. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.

पोपोव्हर्स हें नांव

मांडावळीचेर परिणाम करिनासतना पानाक उपमजकूर म्हायती दिवपाक पॉपओव्हर वापरात.

जावास्क्रिप्ट मेळोवची »

पोपोवर शीर्षक

एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड. मेसेनास फॉसिबस मॉलिस इंटरडम. मोर्बी लियो रिसस, पोर्टा एसी कॉन्सेक्टेतुर एसी, इरोस हांगाच्या वेस्टिबुलम.

बूटस्ट्रॅपा वांगडा जावास्क्रिप्ट वापरप तुमकां सुरवात करपाक प्लगइनांची अनुक्रमणिका

सुरवात करप

बूटस्ट्रॅप लायब्ररी वांगडा जावास्क्रिप्ट एकठांय करप सुपर सोंपें आसा. सकयल आमी मुळाव्या गजालींचेर वतात आनी तुमकां सुरवात करपाक कांय अद्भुत प्लगइन दितात!

जावास्क्रिप्ट डॉक्स पळयात »

कितें आस्पावलां

jQuery आनी Ender कडेन काम करपी नव्या सानुकूल प्लगइनांनी Bootstrap च्या कांय मुखेल घटकांक जिवीत हाडचें . तुमच्या खाशेल्या विकास गरजे प्रमाणें तांचे विस्तार आनी बदल करपाक आमी तुमकां प्रोत्साहन दितात.

उजो वर्णन
बूटस्ट्रॅप-मोडल.जेएस आमचें मोडल प्लगइन पारंपारीक मोडल जेएस प्लगइनाचेर सुपर स्लिम घेवप आसा! आमी ट्विटराचेर जाय आशिल्ली फकत उक्ती कार्यक्षमताय समाविष्ट करपाची खाशेली जतनाय घेतली.
बूटस्ट्रॅप-अलर्ट.जेएस सावधानताय प्लगइन हो इशाऱ्यांक लागींची कार्यक्षमताय जोडपा खातीर एक सुपर ल्हान वर्ग आसा.
बूटस्ट्रॅप-ड्रॉपडावन.जेएस हें प्लगइन बूटस्ट्रॅप टॉपबार वा टॅब केल्ल्या नेव्हिगेशनांत ड्रॉपडावन परस्पर क्रिया जोडपाखातीर आसा.
बूटस्ट्रॅप-स्क्रॉलस्पाय.जेएस ScrollSpy प्लगइन बूटस्ट्रॅप टॉपबारांत स्क्रोल स्थितीचेर आदारीत ऑटो अद्ययावत nav जोडपा खातीर आसा.
बूटस्ट्रॅप-टॅब.जेएस थळाव्या सामुग्रींतल्यान सायकल करपा खातीर हें प्लगइन जलद, गतिशील टॅब आनी गोळी कार्यक्षमताय जोडटा.
बूटस्ट्रॅप-ट्विप्सी.जेएस जेसन फ्रेम हांणी बरयल्ल्या उत्कृश्ट jQuery.tipsy प्लगइनाचेर आदारीत; twipsy ही एक अद्ययावत आवृत्ती आसा, जी प्रतिमांचेर आदारीत ना, एनिमेशनां खातीर css3 वापरता, आनी थळाव्या शीर्षक सांठवण खातीर डेटा-गुणधर्म वापरता!
बूटस्ट्रॅप-पोपोव्हर.जेएस पॉपओवर प्लगइन तुमच्या ऍप्लिकेशनांत पॉपओव्हर जोडपाक एक सादें संवाद पुरवण करता. तो boostrap-twipsy.js प्लगइन विस्तारता, देखून तुमच्या प्रकल्पांत popovers समाविष्ट करतना ती फायल तशेंच हडपपाची खात्री करात!

जावास्क्रिप्ट गरजेची आसा?

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

पूण, ज्या लोकांक जावास्क्रिप्टाची गरज आसा, तांकां बूटस्ट्रॅप जावास्क्रिप्टा वांगडा कशें एकठांय करप तें समजून घेवपाक आनी मुळाव्या कार्यक्षमतेक रोखडोच बेगीन, हलको पर्याय दिवपाक आमी वयर दिल्ले प्लगइन दिल्यात.

चड म्हायती खातीर आनी कांय लायव्ह डेमो पळोवपाक, उपकार करून आमचें प्लगइन दस्तावेजीकरण पान पळयात .

Bootstrap with Less वापरप तुमचो CSS व्हेरिएबल्स, मिक्सिन, आनी फंक्शनां सयत सुपरचार्ज करात

बूटस्ट्रॅप Preboot , एक मुक्त-स्त्रोत पॅक मिक्सिन आनी चड- उणें Less च्या संयोजनांत वापरपाक तयार केल्लें , एक CSS प्रीप्रोसेसर जलद आनी सोप्या वेब विकासा खातीर.

आमी Bootstrap त Preboot कसो वापरला तें पळयात आनी तुमच्या फुडल्या प्रकल्पाचेर Less चालीक लावपाचें निवडल्यार तुमी ताचो वापर कसो करूंक शकतात तें पळयात.

ताचो वापर कसो करचो

तुमच्या ब्राउझरांत जावास्क्रिप्ट वरवीं Bootstrap च्या Less चड-उणें, मिक्सिन, आनी CSS त नेस्टिंग हांचो पुराय वापर करपाक हो पर्याय वापरात.

  1. <link rel = "स्टाइलशीट/उणें" href = "उणें/बूटस्ट्रॅप.उणें" माध्यम = "सगलें" />    
  2. <script src = "जेएस / कमी-1.1.3.मिनिट.जेएस" ></script>

.js उपाय जाणवना? तुमी तुमचो कोड उपयोजीत करतना संकलित करपाक Less Mac ऍप्लिकेशन वापरून पळयात वा Node.js वापरात .

कितें आस्पावलां

बूटस्ट्रॅपाचो भाग म्हूण ट्विटर बूटस्ट्रॅपांत कितें आस्पावलां ताचीं कांय खाशेलपणां हांगा दिल्यांत. डाउनलोड करपाक आनी चड जाणून घेवपाक Bootstrap संकेतथळार वा Github प्रकल्प पानाचेर वचचें.

चड-उणें

तुमच्या CSS तकली दुखप मुक्त सांबाळपाक आनी अद्ययावत करपाक कमींतले चड-उणें परिपूर्ण आसात. जेन्ना तुमकां रंग मोल वा वारंवार वापरिल्लें मोल बदलपाचें आसा, तेन्ना तें एकाच सुवातेर अद्ययावत करात आनी तुमी सेट जाल्यात.

  1. // दुवे आसात
  2. @ लिंकरंग : # 8b59c2;         
  3. @linkColorHover :     काळोख ( @linkColor , 10 ); 
  4.  
  5. // ग्रेज हें नांव
  6. @ काळो : # 000;             
  7. @grayDark :           हळदुवें करचें ( @काळो , 25 %); 
  8. @gray :               हळदुवें करचें ( @काळो , 50 %); 
  9. @grayLight :          हळदुवें करचें ( @काळो , 70 %); 
  10. @grayLighter :        हळुवार करप ( @काळो , 90 %); 
  11. @ गोरो : # fff ;             
  12.  
  13. // उच्चार रंग
  14. @ निळें : # 08b5fb ;              
  15. @ पाचवी : # 46a546 ;             
  16. @ तांबडो : # 9d261d ;               
  17. @ हळडुवें : # ffc40d ;            
  18. @ संत्रे : # f89406 ;            
  19. @ गुलाबी : # c3325f आनी ;              
  20. @ जांभळा : # 7a43b6;            
  21.  
  22. // बेसलाइ�� ग्रिड
  23. @बेसफॉन्ट : 13px आनी ;          
  24. @मूळ रेखा : 18px ;

टिप्पणी करप

/* ... */CSS च्या सामान्य वाक्यरचनावांगडाच Less टिप्पणी करपाची आनीक एक शैलीय दिता .

  1. // ही एक टिप्पणी आसा
  2. /* हीय एक टिप्पणी */

वाझू अप मिक्सिन करता

मिक्सिन मुळाव्यान CSS खातीर समाविष्ट वा आंशिक आसात, जे तुमकां कोडाच्या ब्लॉकाक एकांत एकठांय करपाक परवानगी दितात. ते विक्रेत्या उपसर्ग गुणधर्मां खातीर बरे आसात जशे की box-shadow, क्रॉस-ब्राउझर ग्रेडियेंट, फॉन्ट स्टॅक, आनी हेर. Bootstrap कडेन आशिल्ल्या मिक्सिनांचो नमुनो सकयल दिला.

फॉन्ट स्टॅक करतात

  1. # फॉन्ट { 1 .
  2.   हें . आशुलिपि ( @वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {     
  3.     फॉन्ट - आकार : @ आकार ; 
  4.     फॉन्ट - वजन : @ वजन ; 
  5.     रेखा - उंचाय : @lineHeight ; 
  6.   } हें .
  7.   हें . sans - serif ( @वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {     
  8.     font - family : "हेल्व्हेटिका न्यू" , हेल्व्हेटिका , एरियल , sans - serif ;   
  9.     फॉन्ट - आकार : @ आकार ; 
  10.     फॉन्ट - वजन : @ वजन ; 
  11.     रेखा - उंचाय : @lineHeight ; 
  12.   } हें .
  13.   ...
  14. } हें .

प्रवणताय

  1. # ग्रेडियेंट { 1 .
  2.   ...
  3.   हें . उभ्या ( @startColor : # 555, @endColor: # 333) { 
  4.     पार्श्वभूंय - रंग : @endColor ; 
  5.     पार्श्वभूंय - पुनरावृत्ती : पुनरावृत्ती - x ;
  6.     पार्श्वभूंय - प्रतिमा : - khtml - ग्रेडिएंट ( रेखीव , डावें वयर , डावें सकयल , पासून ( @startColor ), ते ( @endColor )); // कोंकणी करपी   
  7.     पार्श्वभूंय - प्रतिमा : - moz - रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // एफएफ 3.6+ आसा   
  8.     पार्श्वभूंय - प्रतिमा : - ms - रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // आयई10 हें   
  9.     पार्श्वभूंय - प्रतिमा : - वेबकिट - ग्रेडिएंट ( रेखीव , डावें वयर , डावें सकयल , रंग - थांब ( 0 %, @startColor ), रंग - थांब ( 100 %, @endColor )); // सफारी 4+, क्रोम 2+    
  10.     पार्श्वभूंय - प्रतिमा : - वेबकिट - रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // सफारी 5.1+, क्रोम 10+   
  11.     पार्श्वभूंय - प्रतिमा : - o - रेखीव - ग्रेडियेंट ( @startColor , @endColor ); // ओपेरा 11.10   
  12.     पार्श्वभूंय - प्रतिमा : रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // मानक हें  
  13.   } हें .
  14.   ...
  15. } हें .

ऑपरेशन्स करतात

फॅन्सी घेयात आनी सकयल दिल्ल्या प्रमाणें लवचीक आनी बळिश्ट मिक्सिन तयार करपाक कांय गणित करात.

  1. // जाळीदारी
  2. @gridस्तंभ : 16 ;       
  3. @gridस्तंभरुंदी : 40px ;   
  4. @gridगटररुंदी : 20px ;   
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @ग्रिडस्तंभ - 1 ));                 
  6.  
  7. // कांय स्तंभ तयार करात
  8. हें . स्तंभ ( @columnSpan : 1 ) { 1 .  
  9.   width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @स्तंभविस्तार - 1 ));         
  10. } हें .

उणें संकलन करप

After modifying the .less files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.

Ways to compile

Method Steps
Node with makefile

Install the less command line compiler with npm by running the following command:

$ npm install lessc

Once installed just run make from the root of your bootstrap directory and you're all set.

Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).
Javascript

Download the latest Less.js and include the path to it (and Bootstrap) in the head.

  1. <link rel="stylesheet/less" href="/path/to/bootstrap.less">
  2. <script src="/path/to/less.js"></script>

To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.
Command line

If you already have the less command line tool installed, simply run the following command:

$ lessc ./lib/bootstrap.less > bootstrap.css

Be sure to include --compress in that command if you're trying to save some bytes!
Less Mac app

अनधिकृत Mac ऍप्लिकेशन .less फायलींच्यो निर्देशिका पळयता आनी पळयल्ल्या .less फायलीन दरेक सेव्ह केल्या उपरांत कोड थळाव्या फायलींनी संकलित करता.

तुमकां आवडल्यार, तुमी स्वयंचलित ल्हान करपा खातीर ऍप्लिकेशनांत प्राधान्यां टॉगल करूंक शकतात आनी संकलित फायली खंयच्या निर्देशिकेंत सोंपतात.