टाइपोग्राफिक पैमाने पर

पूरा टाइपोग्राफिक ग्रिड साढ़ी variables.less फाइल च दो Less चर उप्पर आधारत ऐ: @baseFontSizeते @baseLineHeight. पैह् ला आधार फॉन्ट-आकार ऐ जेह् ड़ा पूरे च बरतेआ गेदा ऐ ते दूआ आधार रेखा-ऊँचाई ऐ ।

अस उनें चर, ते किश गणित दा इस्तेमाल करदे आं, अपने सारे किस्म दे मार्जिन, पैडिंग, ते लाइन-हाईट बनाने आस्तै ते होर मते।

उदाहरण देह पाठ

नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ओरनारे वेल ईउ लियो। सह सोसियस नटोक पेनाटिबस एट मैग्निस डिस प्रसव मोंटेस, नास्सेटर रिडिकुलस मस। नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

विवामस सैजिटिस लैकस वेल औग लाओरीत रुट्रम फौसिबस डोलोर नीलामी। डुइस मोलिस, एस्ट गैर कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट। डोनेक सेद ओडियो दुई।

जोर देने दा प्रयोग करदे होई

फुस्से दापिबस , टेलस एसी कर्सस कोमोडो , टॉर्टोर मौरिस कंडिमेंटम निभ , उत फर्मेंटम मासा जस्टो बैठो अमेट रिसुस। मेसेनास फौसिबस मोलिस इंटरडम। नुल्ला विटाए एलिट लिबेरो, इक फारेत्रा औग।

नोट: इस्तेमाल करने च बेझिझक <b>ते <i>HTML5 च, पर उंदा इस्तेमाल थोड़ा बदली गेदा ऐ। <b>दा मतलब ऐ शब्दें जां वाक्यांशें गी बिना कुसै अतिरिक्त महत्व दे उजागर करना जदके <i>एह् मते सारें शा मता आवाज़ , तकनीकी शब्दें बगैरा आस्तै ऐ ।

उदाहरण दे पते

<address>टैग दा इस्तेमाल किस चाल्ली कीता जाई सकदा ऐ इसदे दो उदाहरण दित्ते गेदे न :

उदाहरण संक्षिप्त नाम

संक्षेपें गी बड्डे अक्षर ते हल्के बिंदीदार निचले सीमा कन्नै शैली कीती गेदी ऐ। उंदे कोल होवर पर इक मदद कर्सर बी ऐ तां जे बरतूनी गी अतिरिक्त संकेत होंदा ऐ जे होवर पर किश दस्सेआ जाग।

एचटीएमएल कटा हुआ रोटी दे बाद दी सबतूं अच्छी चीज ऐ।

विशेषता शब्द दा इक संक्षिप्त रूप ऐ attr .

ब्लॉककोट गी शामल करने आस्तै, उद्धरण दे रूप च कुसै बी एचटीएमएल<blockquote> दे चारों-पार लपेटो। सीधे उद्धरणें लेई अस इक .<p>

अपने स्रोत दा हवाला देने लेई इक वैकल्पिक तत्व शामल करो ते तुसेंगी स्टाइलिंग मकसदें लेई इसदे शा पैह् ले <small>इक एम डैश मिलग ।—

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

डिफ़ॉल्ट ब्लॉककोट्स इस चाल्ली शैली कीते गेदे न:

लोरेम इप्सम डोलोर बैठो अमेट, कन्सेक्टेतुर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट ए एंटी वेनेनेटिस।

बॉडी ऑफ वर्क च कोई मशहूर

अपने ब्लॉककोट गी दाएं पास्से फ्लोट करने लेई, जोड़ो class="pull-right":

लोरेम इप्सम डोलोर बैठो अमेट, कन्सेक्टेतुर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट ए एंटी वेनेनेटिस।

बॉडी ऑफ वर्क च कोई मशहूर

अनऑर्डर

<ul>

• लोरेम इप्सम डोलोर बैठो अमेत
• कन्सेक्टेतुर एडिपिसिंग एलिट
• पूर्णांक मोलेस्टी लोरेम एट मासा
• प्रीटियम निस्ल एलिकेट च फैसिलिसिस
• नुल्ला वोलुतपत अलिक्वाम वेलित
  • फेसेलस इअकुलिस नेके
  • पुरुष सोडलेस अल्ट्रिसीस
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
  • एसी ट्रिस्टिक लिबेरो वोलुतपत एट
• फौसिबस पोर्टा लैकस फ्रिंगिला वेल
• ऐन बैठा अमेत एरात नुंक
• एगेट पोर्टिटोर लोरेम

अनस्टाइल

<ul class="unstyled">

• लोरेम इप्सम डोलोर बैठो अमेत
• कन्सेक्टेतुर एडिपिसिंग एलिट
• पूर्णांक मोलेस्टी लोरेम एट मासा
• प्रीटियम निस्ल एलिकेट च फैसिलिसिस
• नुल्ला वोलुतपत अलिक्वाम वेलित
  • फेसेलस इअकुलिस नेके
  • पुरुष सोडलेस अल्ट्रिसीस
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
  • एसी ट्रिस्टिक लिबेरो वोलुतपत एट
• फौसिबस पोर्टा लैकस फ्रिंगिला वेल
• ऐन बैठा अमेत एरात नुंक
• एगेट पोर्टिटोर लोरेम

आर्डर दे दी

<ol>

1. लोरेम इप्सम डोलोर बैठो अमेत
2. कन्सेक्टेतुर एडिपिसिंग एलिट
3. पूर्णांक मोलेस्टी लोरेम एट मासा
4. प्रीटियम निस्ल एलिकेट च फैसिलिसिस
5. नुल्ला वोलुतपत अलिक्वाम वेलित
6. फौसिबस पोर्टा लैकस फ्रिंगिला वेल
7. ऐन बैठा अमेत एरात नुंक
8. एगेट पोर्टिटोर लोरेम

ब्यौरा

<dl>

विवरण सूची दी

शब्दें गी परिभाशित करने आस्तै इक विवरण सूची बिल्कुल सही ऐ ।

यूइसमोद ने दी

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

डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।

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

एटियाम पोर्टा सेम मलेसुआदा मैग्ना मोलिस यूइसमोड।

इनलाइन

कोड दे इनलाइन स्निपेटें गी <code>.

मसाल आस्तै , <code> खंड </ code > गी इनलाइन दे रूप च लपेटेआ जाना चाहिदा .  

बेसिक ब्लॉक

<pre>कोड दी कई लाइनें लेई इस्तेमाल करो । उचित रेंडरिंग आस्तै कुसै बी कैरेट गी उंदे यूनिकोड वर्णें च जरूर बदलो.

<p>इत्थें नमूना पाठ...</p>

<प्री> दा
  <p>इत्थें नमूना पाठ...</p>
</pre> दा

नोट:<pre> टैग दे अंदर कोड गी जितना होई सकै बाएं दे नेड़े जरूर रक्खो ; एह् सारे टैब रेंडर करग।

गूगल प्रीटिफाई करना

इक गै तत्व गी लैओ <pre>ते बधाए गेदे रेंडरिंग आस्तै दो वैकल्पिक वर्गें गी जोड़ो.

<p> नमूना पाठ इत्थें... </p>

<pre class = "सुन्दर छाप।" 
     लिनम" > ऐ
  <p>इत्थें नमूना पाठ...</p>
</pre> दा

google-code-prettify डाउनलोड करो ते इसदा इस्तेमाल करने आस्तै रीडमी दिक्खो।

<टेबल> दा
  <सिर> दा
    <tr> दा
      <th> ... </th> दा
      <th> ... </th> दा
    </tr> दा
  </thead> दा
  <टीबॉडी> दा
    <tr> दा
      <td> ... </td> दा
      <td> ... </td> दा
    </tr> दा
  </tbody> दा
</table> दा

पठनीयता गी सुनिश्चित करने ते संरचना गी बनाए रखने लेई तालिकाएं गी स्वतः शैल कीता जंदा ऐ ते सिर्फ किश सीमाएं कन्नै। 2.0 कन्नै, .tableक्लास दी लोड़ ऐ।

<तालिका वर्ग = "तालिका" > 
  ...
</table> दा

ज़ेबरा-स्ट्राइपिंग जोड़ के अपनी टेबल के साथ थोड़ा फैंसी हो जाओ-बस .table-stripedक्लास जोड़ो।

नोट: स्प्रिटेड टेबल :nth-childCSS चयनकर्ता दा उपयोग करदे न ते IE7-IE8 च उपलब्ध नेईं ऐ।

<table class = "तालिका तालिका-धारीदार" > 
  ...
</table> दा

सौंदर्य प्रयोजनें लेई पूरी मेज दे चारों ओर सीमाएं ते गोल कोने जोड़ो।

<table class = "तालिका तालिका-सीमाबद्ध" > 
  ...
</table> दा

.table-condensedटेबल सेल पैडिंग गी आधे च (8px थमां 4px तगर) कटौती करने आस्तै क्लास गी जोड़ियै अपनी तालिकाएं गी होर कॉम्पैक्ट बनाओ ।

<table class = "तालिका तालिका-संक्षिप्त" > 
  ...
</table> दा

उपलब्ध वर्गें च कुसै बी दा उपयोग करियै बक्ख-बक्ख रूप हासल करने आस्तै कुसै बी तालिका वर्ग गी इकट्ठा करने च बेझिझक होओ।

<table class = "तालिका तालिका-धारी तालिका-सीमा तालिका-संक्षिप्त" > 
  ...
</table> दा

लचीला एचटीएमएल ते सीएसएस

बूटस्ट्रैप च फार्म दे बारे च सबनें शा बेहतर हिस्सा एह् ऐ जे तुंदे सारे इनपुट ते नियंत्रण शानदार लगदे न चाहे तुस उनेंगी अपने मार्कअप च किस चाल्ली बनाओ। कोई फालतू एचटीएमएल दी लोड़ नेईं ऐ, पर अस उनें लोकें लेई पैटर्न उपलब्ध करोआने आं जिनेंगी इसदी लोड़ ऐ।

होर जटिल लेआउट आसान स्टाइलिंग ते इवेंट बाइंडिंग आस्तै संक्षिप्त ते स्केल करने योग्य वर्गें कन्नै औंदे न, तां जे तुस हर कदम पर कवर कीते गेदे ओ।

चार लेआउट शामल कीते गे

बूटस्ट्रैप चार किस्म दे फार्म लेआउट आस्तै समर्थन कन्नै आवै करदा ऐ:

• ऊर्ध्वाधर (डिफ़ॉल्ट) ऐ।
• तपाश
• इनलाइन
• आढा

बक्ख-बक्ख किस्म दे फार्म लेआउटें गी मार्कअप करने आस्तै किश बदलावें दी लोड़ होंदी ऐ , पर नियंत्रण अपने आपै च इक गै रौंह्दे न ते बर्ताव करदे न ।

नियंत्रण राज्यें ते होर मते

बूटस्ट्रैप दे फार्म च सारे आधार फार्म नियंत्रणें आस्तै शैलियां शामल न जिऱयां इनपुट, टेक्स्टएरिया, ते चयन जेह् ड़ी तुस उम्मीद करदे ओ. पर एह् इक नंबर दे कस्टम घटकें कन्नै बी औंदा ऐ जि’यां संलग्न ते प्रीपेंड इनपुट ते चेकबॉक्सें दी सूची आस्तै समर्थन।

हर इक किस्म दे फार्म नियंत्रण लेई त्रुटि, चेतावनी, ते सफलता जनेह् राज्यें गी शामल कीता गेआ ऐ। अक्षम नियंत्रणें लेई शैलियां बी शामल न।

v2.0 कन्नै, साढ़े कोल फार्म शैलियें आस्तै हल्के ते स्मार्ट डिफ़ॉल्ट न। कोई अतिरिक्त मार्कअप नेईं, बस नियंत्रण फार्म।

डिफ़ॉल्ट वेबकिट शैलियें गी दर्शांदे होई, बस .form-searchअतिरिक्त गोल सर्च फील्डें आस्तै जोड़ो.

इनपुट शुरू करने लेई ब्लॉक स्तर होंदे न। .form-inlineते , आस्तै .form-horizontalअस इनलाइन-ब्लॉक दा इस्तेमाल करदे आं।

क्या शामिल ऐ

बाएं पास्से दित्ते गेदे सारे डिफाल्ट फार्म नियंत्रण न जिंदा अस समर्थन करदे आं। इत्थें एह् बुलेट कीती गेदी सूची ऐ:

• पाठ इनपुट (पाठ, पासवर्ड, ईमेल, बगैरा)
• चेकबॉक्स ऐ
• रेडियो दा
• चुनो
• कई चयन करो
• फाइल इनपुट करना
• पाठ क्षेत्र

v2.0 कन्नै नमें डिफ़ॉल्ट

v1.4 तगर, बूटस्ट्रैप दी डिफाल्ट फार्म शैलियां क्षैतिज लेआउट दा इस्तेमाल करदे न. बूटस्ट्रैप 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 करदा ऐ, पाठ गी इक गंदा पाठ-छाया कन्नै ग्रे रेंडर करदा ऐ-दुर्भाग्यवश अस इसगी ठीक नेईं करी सकदे.

स्प्राइट दे रूप च बनाया गेआ

हर इक आइकन गी इक अतिरिक्त अनुरोध बनाने दे बजाय, असें उनेंगी इक स्प्राइट च संकलित कीता ऐ- इक फाइल च छवियें दा इक गुच्छा जेह् ड़ा छवियें गी background-position. एह् उसी तरीका ऐ जिसगी अस ट्विटर डॉट कॉम पर इस्तेमाल करदे आं ते एह् साढ़े आस्तै बी खरा कम्म कीता ऐ।

सारे आइकन वर्गें गी .icon-उचित नेमस्पेसिंग ते स्कोपिंग आस्तै कन्नै उपसर्ग कीता गेदा ऐ, जेह् ड़ा साढ़े होर घटकें दी तर्ज पर ऐ। इस कन्नै होर उपकरणें कन्नै टकराव थमां बचने च मदद मिलग।

ग्लिफिकॉन्स ने असेंगी साढ़ी ओपन-सोर्स टूलकिट च सेट कीते गेदे हाफलिंग्स दा इस्तेमाल करने दी इजाजत दित्ती ऐ जदूं तगर अस इत्थें डॉक्स च इक लिंक ते क्रेडिट उपलब्ध करोआने आं। कृपया अपने प्रोजेक्टें च बी इ'यै करने पर विचार करो।

इस्तेमाल किवें करना

v2.0.0 कन्नै, असें <i>अपने सारे आइकनें आस्तै इक टैग दा इस्तेमाल करने दा विकल्प चुनेआ ऐ, पर उंदे कोल कोई केस वर्ग नेईं ऐ-केवल इक साझा उपसर्ग ऐ. इस्तेमाल करने आस्तै, निम्नलिखित कोड गी लगभग कुतै बी रक्खो:

<i class = "चिह्न-खोज" </i> 

उल्टे (सफेद) आइकनें लेई शैलियां बी उपलब्ध न, जेह् ड़ियां इक अतिरिक्त वर्ग कन्नै तैयार कीतियां गेदियां न:

<i class = "चिह्न-खोज आइकन-सफेद" ></i> 

अपने आइकनें लेई चुनने आस्तै 120 क्लासां न। बस <i>सही क्लासें कन्नै इक टैग जोड़ो ते तुस सेट होई गेदे ओ। तुस पूरी सूची sprites.less च जां ठीक इत्थै इस दस्तावेज़ च पाई सकदे ओ.

केस दा इस्तेमाल करो

आइकन महान होंदे न, पर उंदा इस्तेमाल कुत्थें करग? इत्थें किश विचार दित्ते गेदे न:

• अपने साइडबार नेविगेशन आस्तै विजुअल दे रूप च
• विशुद्ध रूप कन्नै आइकन-चालित नेविगेशन आस्तै
• बटनें लेई इक क्रिया दे अर्थ गी संप्रेषित करने च मदद करने आस्तै
• इक बरतूनी दी गंतव्य पर संदर्भ साझा करने आस्तै लिंक कन्नै

अनिवार्य रूप कन्नै, जित्थें बी तुस इक <i>टैग ला सकदे ओ, तुस इक आइकन बी पाई सकदे ओ।

ताज़ा करो चेकआउट करो म्हेसना

टिप्पनी सेटिंग्स होर जानकारी