मुद्रण प्रमाण

पुराय मुद्रण जाळी आमच्या variables.less फायलीन दोन Less चडांत चड आदारीत आसा: @baseFontSizeआनी @baseLineHeight. पयलो पुराय वापरिल्लो बेस फॉन्ट-आकार आनी दुसरो बेस लायन-उंचाय.

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

उदाहरण शरीर मजकूर

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

विवामस सॅजिटिस लेकस वेल ऑग लाओरीट रुट्रम फॉसिबस डोलोर ऑक्टर. डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लॅसिनिया ओडियो सेम नेक एलिट. डोनेक सेड ओडियो दुई.

भर दिवपाचो उपेग करून

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

टिप: वापरपाक मेकळीक दिवची <b>आनी <i>HTML5 त, पूण तांचे वापर मात्सो बदलला. <b>अतिरिक्त म्हत्व दिवंक नासतना उतरां वा वाक्यां उजवाडावपाखातीर आसता जाल्यार <i>चड करून आवाज, तंत्रीक संज्ञा आदी खातीर आसता.

उदाहरण पत्ते

<address>टॅग कसो वापरूं येता हाचीं दोन उदाहरणां हांगा दिल्यांत :

उदाहरण संक्षेप

संक्षेपांत व्हड मजकूर आनी हळदुव्या बिंदू आशिल्ली सकयली शिमेची शैली केल्ली आसता. तशेंच तांकां होवराचेर मदत कर्सर आसता देखून वापरप्यांक होवराचेर कितें तरी दाखयतले असो अतिरिक्त संकेत आसता.

कातरून काडिल्ली भाकरी उपरांत एचटीएमएल ही सगळ्यांत बरी गजाल.

गुणधर्म ह्या शब्दाचें संक्षिप्त रूप म्हळ्यार attr .

ब्लॉककोट समाविष्ट करपाक, <blockquote>खंयच्याय HTML भोंवतणी कोट म्हणून गुठलावचें. सरळ उतारे खातीर आमी एक शिफारस करतात <p>.

तुमचो स्रोत उल्लेख करपाक पर्यायी <small>घटक समाविष्ट करात आनी तुमकां —स्टायलिंग उद्देशां खातीर ताचे आदीं एम डॅश मेळटलो.

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

मुलभूत ब्लॉककोट अशे तरेन शैली केल्यात:

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

Body of work हातूंत कोण तरी फामाद

तुमचो ब्लॉककोट उजवे वटेन फ्लोट करपाक, जोडात class="pull-right":

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

Body of work हातूंत कोण तरी फामाद

अनऑर्डर केल्लें

<ul>

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

अनस्टायल केल्लें

<ul class="unstyled">

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

आदेश दिलो

<ol>

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

वर्णन

<dl>

वर्णन यादी

संज्ञा व्याख्या करपाखातीर वर्णन वळेरी परिपूर्ण आसा.

युइस्मोड हांणी केला

वेस्टिबुलम आयडी लिगुला पोर्टा फेलिस युइसमोड सेम्पर एगेट लॅसिनिया ओडियो सेम नेसी एलिट.

डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस.

मालेसुआदा पोर्टा

एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड.

इनलायन

कोडाचे इनलायन स्निपेट 1 च्या आदारान गुठलावचे <code>.

देखीक , <code> विभाग </ code > इनलायन म्हणून गुठलावपाक जाय .  

मुळावो ब्लॉक

<pre>कोडाच्या जायत्या ओळींखातीर वापरात . योग्य रेंडरींग खातीर खंयच्याय कॅरेटाक तांच्या युनिकोड अक्षरांनी रुपांतरीत करपाची खात्री करात.

<p>हांगा नमुनो मजकूर...</p>

<पूर्व> हें नांव
  <p>हांगा नमुनो मजकूर...</p>
</pre> हें नांव

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

गूगल प्रीटिफाय हें नांव

तोच <pre>घटक घेयात आनी वाडयल्ल्या रेंडरींगा खातीर दोन पर्यायी वर्ग जोडात.

<p> हांगा नमुनो मजकूर... </p>

<pre class = "सुंदर छाप." 
     लिनम" > हें नांव
  <p>हांगा नमुनो मजकूर...</p>
</pre> हें नांव

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

<कोश्टक> हें नांव
  <शीर्ष> हें नांव
    <tr> हें नांव
      <th> ... </th> हें नांव
      <th> ... </th> हें नांव
    </tr> हें नांव
  </thead> हें नांव
  <tbody> हें नांव
    <tr> हें नांव
      <td> ... </td> हें नांव
      <td> ... </td> हें नांव
    </tr> हें नांव
  </tbody> हें नांव
</कोश्टक>

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

<कोष्टक वर्ग = "कोष्टक" > 
  ...
</कोश्टक>

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

टिप: स्प्रिटेड कोश्टकां :nth-childCSS निवडक वापरतात आनी IE7-IE8 त उपलब्ध ना.

<table class = "कोश्टक कोश्टक-पट्टीदार" > 
  ...
</कोश्टक>

सौंदर्यशास्त्रीय उद्देशान पुराय मेजा भोंवतणी शिमो आनी वाटकुळे कोनशे घालचे.

<table class = "कोश्टक कोश्टक-सीमा आशिल्लें" > 
  ...
</कोश्टक>

.table-condensedकोश्टक कक्ष पॅडींग अर्दांत (8px ते 4px मेरेन) कापपाक वर्ग जोडून तुमचीं कोश्टकां चड संकुचीत करात .

<table class = "कोश्टक कोश्टक-घनीभूत" > 
  ...
</कोश्टक>

उपलब्ध आशिल्ल्या खंयच्याय वर्गाचो वापर करून वेगवेगळे देखावे मेळोवपा खातीर खंयच्याय कोश्टक वर्ग एकठांय करपाक मेकळीक दिवची.

<table class = "कोश्टक कोश्टक-पट्टीदार कोश्टक-सीमा आशिल्लें कोश्टक-घनीभूत" > 
  ...
</कोश्टक>

लवचीक एचटीएमएल आनी सीएसएस

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

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

चार मांडावळ आस्पावता

बूटस्ट्रॅप चार प्रकारच्या फॉर्म मांडावळीं खातीर आदार दिता:

• उबें (मुळावें) .
• सोद
• इनलायन
• आडवें

वेगवेगळ्या प्रकारच्या फॉर्म मांडावळींनी मार्कअप करपाक कांय बदल करचे पडटात, पूण नियंत्रणां स्वता तशींच उरतात आनी वागतात.

नियंत्रण राज्यां आनी हेर

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

दरेक प्रकारच्या फॉर्म नियंत्रणा खातीर चुक, शिटकावणी, आनी यश सारकिल्ल्यो अवस्था आस्पावल्यांत. तशेंच अक्षम नियंत्रणांखातीर शैलींचो आस्पाव केला.

v2.0 कडेन, आमचे कडेन फॉर्म शैलीं खातीर हळुवार आनी हुशार डिफॉल्ट आसात. अतिरिक्त मार्कअप ना, फकत फॉर्म नियंत्रणां.

मुलभूत WebKit शैलींचें प्रतिबिंबीत करपी, फकत .form-searchअतिरिक्त गोल सोद क्षेत्रां खातीर जोडात.

इनपुट सुरू करपाक ब्लॉक पातळेचे आसात. .form-inlineआनी खातीर .form-horizontal, आमी inline-block वापरतात.

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

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

• मजकूर इनपुट (मजकूर, पासवर्ड, ईमेल, आदी)
• चेकबॉक्स आसा
• रेडिओचेर मेळटा
• वेंचचें
• एका परस चड निवडात
• फायल इनपुट करप
• पाठक्षेत्रांतलें

v2.0 कडेन नवे मुलभूत आसात

v1.4 मेरेन, Bootstrap च्या मुलभूत फॉर्म शैलींनी आडवी मांडावळ वापरली. बूटस्ट्रॅप 2 वरवीं, खंयच्याय फॉर्मा खातीर चड हुशार, चड मापनीय मुलभूत आसपाक आमी ती मर्यादा काडून उडयली.

नव्यान डिझायन केल्लीं ब्राउझर राज्यां

बूटस्ट्रॅप ब्राउझर-समर्थीत केंद्रीत आनी disabledराज्यां खातीर शैली वैशिश्ट्य करता. आमी मुलभूत वेबकिट काडून उडयतात आनी ताचे सुवातेर outlineएक लागू करतात .box-shadow:focus

फॉर्म प्रमाणीकरण करप

तशेंच चुको, शिटकावणी, आनी यश हांचे खातीर प्रमाणीकरण शैलींचो आस्पाव आसा. वापरपाक, भोंवतणच्या कडेन त्रुटी वर्ग जोडात .control-group.

<फील्डसेट हें नांव
  class = "नियंत्रण-समूह त्रुटी" >
  ...
</फील्डसेट> हें नांव

इनपुट प्रीपेंड करप & जोडप

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

चेकबॉक्स आनी रेडिओ

v1.4 मेरेन, बूटस्ट्रॅपाक चेकबॉक्स आनी रेडिओ भोंवतणी अतिरिक्त मार्कअपाची गरज आशिल्ली तांकां स्टॅक करपाक. आतां, ती एक सादी गजाल परतून सांगपाची की <label class="checkbox">ती गुठलायता <input type="checkbox">.

इनलायन चेकबॉक्स आनी रेडिओकय तेंको आसा. .inlineफकत खंयच्याय .checkboxवा कडेन जोडचें .radioआनी तुमी पुराय जाल्यात.

इनलायन फॉर्म आनी जोडप/प्रीपेंड करप

इनलायन फॉर्मांत प्रीपेंड वा एपेंड इनपुट वापरपाक, .add-onआनी inputत्याच ओळीचेर, रिक्त स्थान नासतना दवरपाची खात्री करात.

मदत मजकूर तयार करात

तुमच्या फॉर्म इनपुटांखातीर मदत मजकूर जोडपाक , इनपुट घटका उपरांत इनलायन मदत मजकूर <span class="help-inline">वा वांगडा मदत मजकूर ब्लॉक समाविष्ट करचो.<p class="help-block">

कृतींखातीर बटण

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

नांगर आनी रूपांखातीर

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

टिप:.btn सगळ्या बटणांनी वर्ग आसपावपाक जाय . <button>बटण शैली आनी <a>सुसंगती खातीर घटक लागू करपाक जाय .

एका परस चड आकारांचो

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

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

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

अक्षम स्थिती

अक्षम बटणांखातीर, .btn-disabledदुव्यांखातीर आनी :disabledघटकांखातीर वापरात <button>.

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

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

क्रॉस ब्राउझर सुसंगती

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

संबंदीत, IE9 अक्षम buttonघटकांक janifies करता, एक वायट मजकूर-सावळी वांगडा मजकूर करडो रेंडर करता-दुर्दैवान आमी हें सुदारूंक शकनात.

स्प्राइट म्हणून बांदिल्लें

दरेक चिन्न एक अतिरिक्त विनंती करचे परस, आमी तांकां स्प्राइटांत संकलित केल्यात-एका फायलीन प्रतिमांचो एक गट जो CSS वापरता प्रतिमा कडेन स्थापन करपाक background-position. हीच पद्दत आमी ट्विटर डॉट कॉमचेर वापरतात आनी ती आमकां बरी काम केल्या.

सगळ्या चिन्न वर्गांक .icon-योग्य नांव अंतर आनी व्याप्ती खातीर उपसर्ग केला, आमच्या हेर घटकां प्रमाण. हाका लागून हेर साधनां कडेन संघर्श टाळपाक मदत जातली.

जो मेरेन आमी हांगा डॉक्सांत दुवो आनी श्रेय दितात तो मेरेन Glyphicons हांणी आमकां आमच्या मुक्त-स्त्रोत साधनपुस्तिकांत सेट केल्ल्या Halflings वापरपाक परवानगी दिल्या. उपकार करून तुमच्या प्रकल्पांतय तशें करपाचो विचार करात.

वापर कसो करचो

v2.0.0 कडेन, आमी <i>आमच्या सगळ्या चिन्नां खातीर टॅग वापरपाचो पर्याय घेतला, पूण तांकां केस वर्ग ना-फकत शेअर केल्लो उपसर्ग. वापरपाक, सकयल दिल्लो कोड फकत खंयच्याय सुवातेर दवरात:

<i class = "चिन्न-सोद" </i> 

तशेंच उलट्या (धव्या) चिन्नांखातीर शैली उपलब्ध आसात, एक अतिरिक्त वर्ग घेवन तयार केल्यात:

<i class = "चिन्न-सोद चिन्ह-धवें" ></i> 

तुमच्या चिन्नां खातीर वेंचपाक 120 वर्ग आसात. फकत योग्य वर्गां सयत टॅग जोडात <i>आनी तुमी सेट जाल्यात. तुमकां पुराय वळेरी sprites.less हातूंत वा हांगाच ह्या दस्तावेजांत मेळूं येता.

वापर केस

चिन्नां म्हान आसतात, पूण तांचो वापर खंय जातलो? हांगा थोडीं कल्पना दिल्यांत: १.

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

मुळाव्यान खंयच्याय सुवातेर <i>टॅग घालूंक मेळटा थंय चिन्न घालूंक मेळटा.

ताजें करचें चेकआउट करचें वगळावचें

टिप्पणी मांडावळी चड म्हायती