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

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

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

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

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

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

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

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

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

उदाहरण दे पते

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

ट्विटर, इंक
795 फोल्सम एवेन्यू, सुइट 600
सैन फ्रांसिस्को, सीए 94107
पी: (123) 456-7890

पूरा नाम
[email protected]

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

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

क्लास गी इक संक्षिप्त रूप च जोड़ो तां जे initialismमुद्रण तालमेल बधाया जाई सकै उसी थोड़ा छोटा पाठ आकार देइयै।

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

विशेषता शब्द दा इक संक्षिप्त रूप ऐ 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>

विवरण सूची दी

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

यूइसमोद ने दी

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

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

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

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

क्षैतिज वर्णन

<dl class="dl-horizontal">

विवरण सूची दी

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

यूइसमोद ने दी

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

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

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

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

इनलाइन

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

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

बेसिक ब्लॉक

<pre>कोड दी कई लाइनें लेई इस्तेमाल करो । उचित रेंडरिंग आस्तै कोड च कुसै बी कोण कोष्ठक थमां बचना सुनिश्चत करो.

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

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

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

तुस वैकल्पिक रूप कन्नै उस .pre-scrollableवर्ग गी जोड़ सकदे ओ जेह् ड़ी 350px दी इक मैक्स-ऊँचाई सेट करग ते इक y-अक्ष स्क्रॉलबार प्रदान करग.

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

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

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

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

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

टैग	ब्यौरा
<table>	सारणीबद्ध प्रारूप च डेटा प्रदर्शत करने आस्तै तत्व लपेटना
<thead>	<tr>तालिका स्तंभें गी लेबल करने आस्तै तालिका हेडर पंक्तियें ( ) आस्तै कंटेनर तत्व
<tbody>	<tr>तालिका दे शरीर च तालिका पंक्तियें ( ) आस्तै कंटेनर तत्व
<tr>	तालिका कोशिकाएं ( <td>जां <th>) दे इक सेट आस्तै कंटेनर तत्व जेह् ड़ा इक गै पंक्ति पर दिक्खने गी मिलदा ऐ
<td>	डिफ़ॉल्ट तालिका सेल
<th>	स्तंभ (जां पंक्ति, दायरे ते प्लेसमेंट दे आधार उप्पर) लेबल आस्तै विशेश तालिका कोशिका दा इस्तेमाल करना जरूरी ऐ क<thead>
<caption>	तालिका च केह् ड़ी गल्ल ऐ इसदा वर्णन जां संक्षेप, खास करियै स्क्रीन रीडरें आस्तै उपयोगी

<टेबल> दा
  <सिर> दा
    <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 कन्नै, साढ़े कोल फार्म शैलियें आस्तै हल्के ते स्मार्ट डिफ़ॉल्ट न। कोई अतिरिक्त मार्कअप नेईं, बस नियंत्रण फार्म।

लेबल दा नाम संबद्ध मदद पाठ !

उदाहरण ब्लॉक-स्तरीय मदद पाठ इत्थै।

मुझे चेक करो दर्ज करो

<फॉर्म क्लास = "अच्छा" > ऐ 
  <label> लेबल दा नांऽ </label>
  <input type = "text" class = "span3" प्लेसहोल्डर = "कुछ टाइप करो ..." >   
  <span class = "help-inline" > संबद्ध मदद पाठ! </span> दा 
  <लेबल वर्ग = "चेकबॉक्स" > ऐ 
    <input type = "checkbox" > मिगी चेक आउट करो 
  </label> दा
  <button type = "submit" class = "btn" > सबमिट करो </बटन>  
</form> दा

सर्च फार्म

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

तपाश

<form class = "अच्छा रूप-खोज" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-माध्यम खोज-क्वेरी" >  
  <बटन प्रकार = "सबमिट" वर्ग = "बीटीएन" > खोज </बटन>  
</form> दा

इनलाइन फार्म

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

मेरा याद करो साइन इन करो

<form class = "अच्छा रूप-इनलाइन" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-छोटा" प्लेसहोल्डर = "ईमेल" >   
  <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-छोटा" प्लेसहोल्डर = "पासवर्ड" >   
  <लेबल वर्ग = "चेकबॉक्स" > ऐ 
    <input type = "checkbox" > मिगी याद करो 
  </label> दा
  <बटन प्रकार = "सबमिट" वर्ग = "बीटीएन" > साइन इन करो </बटन>  
</form> दा

बूटस्ट्रैप समर्थन गी नियंत्रत करदा ऐ

पाठ इनपुट करना

फ्रीफॉर्म पाठ दे अलावा, कोई बी HTML5 पाठ-आधारत इनपुट इस चाल्ली दिक्खने गी मिलदा ऐ।

चेकबॉक्स दा

विकल्प इक एह् ऐ ते एह् ऐ- एह् ज़रूर शामल करो जे एह् क्यों शानदार ऐ

सूची चुनें

किश २ ३ ४ ५

मल्टीकॉन-चयन करना

१ २ ३ ४ ५

फाइल इनपुट करना

पाठ क्षेत्र

बदलाव बचाओ रद्द

उदाहरण मार्कअप करना

उपर्युक्त उदाहरन फार्म लेआउट गी दित्ता गेआ ऐ, इत्थै पैह् ले इनपुट ते नियंत्रण समूह कन्नै जुड़े दा मार्कअप ऐ। स्टाइलिंग लेई .control-group, .control-label, ते .controlsक्लास सारें दी लोड़ ऐ।

<रूप वर्ग = "रूप-क्षैतिज" > 
  <फील्डसेट> ऐ
    <legend> किंवदंती पाठ </legend>
    <div वर्ग = "नियंत���रण-समूह" > 
      <label class = "control-label" for = "input01" > पाठ इनपुट </label>  
      <div वर्ग = "नियंत्रण करदा ऐ" > 
        <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-xlarge" आईडी = "इनपुट 01" >   
        <p class = "help-block" > मदद पाठ दा समर्थन करदा ऐ </p> 
      </div> दा
    </div> दा
  </फील्डसेट> दा
</form> दा

क्या शामिल ऐ

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

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

---

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

v1.4 तगर, बूटस्ट्रैप दी डिफाल्ट फार्म शैलियां क्षैतिज लेआउट दा इस्तेमाल करदे न. बूटस्ट्रैप 2 कन्नै, अस उस बाधा गी हटाई दित्ता ऐ तां जे कुसै बी फार्म आस्तै स्मार्ट, मता स्केलेबल डिफाल्ट होऐ.

नियंत्रण राज्यें दा रूप

केंद्रित इनपुट

असंपादन योग्य इनपुट

इत्थे कुछ मूल्य

इनपुट अक्षम कीता गेआ

अक्षम चेकबॉक्स

एह् इक अक्षम चेकबॉक्स ऐ

चेतावनी दे कन्नै इनपुट

कुछ गड़बड़ हो गई हो

त्रुटि कन्नै इनपुट करो

कृपया त्रुटि गी ठीक करो

सफलता दे कन्नै इनपुट

वूहू !

सफलता के साथ चुनें

१ २ ३ ४ ५ वूहू !

बदलाव बचाओ रद्द

ब्राउज़र राज्यें गी नमें सिरेआ डिजाइन कीता गेआ ऐ

बूटस्ट्रैप ब्राउज़र-समर्थित फोकस ते disabledराज्यें आस्तै शैलियें दी सुविधा दिंदा ऐ। अस डिफ़ॉल्ट वेबकिट गी हटांदे न outlineते .box-shadow:focus

---

फार्म सत्यापन करना

एह्दे च त्रुट्टी, चेतावनी, ते सफलता आस्तै सत्यापन शैलियां बी शामल न। इस्तेमाल करने आस्तै, त्रुटि वर्ग गी आसपास दे च जोड़ो .control-group.

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

फार्म नियंत्रण दा विस्तार करना

ग्रिड आकार बनाओ

१ २ ३ ४ ५ १ २ ३ ४ ५ १ २ ३ ४ ५

.span*इनपुट आकारें लेई ग्रिड सिस्टम थमां उस्सै वर्गें दा इस्तेमाल करो ।

बारी-बारी से आकार दे

तुस स्थिर वर्गें दा बी इस्तेमाल करी सकदे ओ जेह् ड़ी ग्रिड कन्नै मैप नेईं करदी ऐ , प्रतिक्रियाशील CSS शैलियें कन्नै अनुकूल नेईं करदी ऐ , जां बक्ख-बक्ख किस्म दे नियंत्रणें दा लेखा-जोखा नेईं करदी ऐ (जियां, inputबनाम select) ।

पूर्व-लंबित पाठ

@ ऐ

इत्थें किश मदद पाठ ऐ

संलग्न पाठ

.00 ऐ

इत्थें होर मदद पाठ ऐ

संलग्न करो ते प्रीपेंड करो

$ ऐ .00 ऐ

बटन दे कन्नै जोड़ो

जाओ!

इनलाइन चेकबॉक्स

१ २ ३

चेकबॉक्स ऐ

विकल्प इक एह् ऐ ते एह् ऐ- एह् ज़रूर शामल करो जे एह् क्यों शानदार ऐ विकल्प दो दी जांच बी कीती जाई सकदी ऐ ते फार्म दे नतीजें च शामल कीता जाई सकदा ऐ विकल्प त्रै गी-हां, तुसें अनुमान लाया ऐ-बी जांच कीती जाई सकदी ऐ ते फार्म दे नतीजें च शामल कीता जाई सकदा ऐ

नोट: लेबल मते बड्डे क्लिक क्षेत्रें ते इक होर उपयोगी फार्म आस्तै सारे विकल्पें गी घेरदे न।

रेडियो बटन

विकल्प इक एह् ऐ ते एह् ऐ- एह् ज़रूर शामल करो जे एह् क्यों शानदार ऐ विकल्प दो कर सकदा ऐ किश होर ऐ ते इसगी चुनने कन्नै विकल्प इक गी डिसैलेक्ट करी दित्ता जाग

बदलाव बचाओ रद्द

इनपुटें गी प्रीपेंड करो & संलग्न करो

इनपुट समूह-संलग्न जां प्रीपेंड पाठ कन्नै-अपने इनपुटें लेई होर संदर्भ देने दा इक आसान तरीका उपलब्ध करोआंदे न। शानदार उदाहरणें च ट्विटर यूजरनेम आस्तै @ चिह् न जां वित्त आस्तै $ शामल ऐ।

---

चेकबॉक्स ते रेडियो

v1.4 तगर, बूटस्ट्रैप गी चेकबॉक्स ते रेडियो दे आसपास अतिरिक्त मार्कअप दी लोड़ ही उनेंगी ढेर करने लेई। हुण, एह् दोहराने दी इक साधारण गल्ल ऐ <label class="checkbox">जेह्ड़ी लपेटदी ऐ <input type="checkbox">.

इनलाइन चेकबॉक्स ते रेडियो बी समर्थत न। बस .inlineकिसी भी .checkboxया च जोड़ो .radioते तुस खत्म होई गेदे ओ।

---

इनलाइन फार्म ते संलग्न/प्रीपेंड

इनलाइन फार्म च प्रीपेंड जां एपेंड इनपुटें दा इस्तेमाल करने आस्तै, .add-onते inputगी इक गै लाइन पर, बिना स्पेस दे, सुनिश्चत करो.

---

मदद पाठ बनाओ

अपने फार्म इनपुटें आस्तै मदद पाठ जोड़ने आस्तै, इनपुट तत्व दे बाद कन्नै इनलाइन मदद पाठ <span class="help-inline">जां इक मदद पाठ ब्लॉक गी शामल करो.<p class="help-block">

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Multiple sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

Primary action Action

Primary action Action

Primary action Action

Disabled state

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

Primary link Link

Primary button Button

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link Button

<a class="btn" href="">Link</a>
<button class="btn" type="submit">
  Button
</button>
<input class="btn" type="button"
         value="Input">
<input class="btn" type="submit"
         value="Submit">

As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

• icon-glass
• icon-music
• icon-search
• icon-envelope
• icon-heart
• icon-star
• icon-star-empty
• icon-user
• icon-film
• icon-th-large
• icon-th
• icon-th-list
• icon-ok
• icon-remove
• icon-zoom-in
• icon-zoom-out
• icon-off
• icon-signal
• icon-cog
• icon-trash
• icon-home
• icon-file
• icon-time
• icon-road
• icon-download-alt
• icon-download
• icon-upload
• icon-inbox
• icon-play-circle
• icon-repeat

• icon-refresh
• icon-list-alt
• icon-lock
• icon-flag
• icon-headphones
• icon-volume-off
• icon-volume-down
• icon-volume-up
• icon-qrcode
• icon-barcode
• icon-tag
• icon-tags
• icon-book
• icon-bookmark
• icon-print
• icon-camera
• icon-font
• icon-bold
• icon-italic
• icon-text-height
• icon-text-width
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• icon-list
• icon-indent-left
• icon-indent-right
• icon-facetime-video
• icon-picture

• icon-pencil
• icon-map-marker
• icon-adjust
• icon-tint
• icon-edit
• icon-share
• icon-check
• icon-move
• icon-step-backward
• icon-fast-backward
• icon-backward
• icon-play
• icon-pause
• icon-stop
• icon-forward
• icon-fast-forward
• icon-step-forward
• icon-eject
• icon-chevron-left
• icon-chevron-right
• icon-plus-sign
• icon-minus-sign
• icon-remove-sign
• icon-ok-sign
• icon-question-sign
• icon-info-sign
• icon-screenshot
• icon-remove-circle
• icon-ok-circle
• icon-ban-circle

• icon-arrow-left
• icon-arrow-right
• icon-arrow-up
• icon-arrow-down
• icon-share-alt
• icon-resize-full
• icon-resize-small
• icon-plus
• icon-minus
• icon-asterisk
• icon-exclamation-sign
• icon-gift
• icon-leaf
• icon-fire
• icon-eye-open
• icon-eye-close
• icon-warning-sign
• icon-plane
• icon-calendar
• icon-random
• icon-comment
• icon-magnet
• icon-chevron-up
• icon-chevron-down
• icon-retweet
• icon-shopping-cart
• icon-folder-close
• icon-folder-open
• icon-resize-vertical
• icon-resize-horizontal

Built as a sprite

Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

<i class="icon-search icon-white"></i>

There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

• As visuals for your sidebar navigation
• For a purely icon-driven navigation
• बटनें लेई इक क्रिया दे अर्थ गी संप्रेषित करने च मदद करने आस्तै
• इक बरतूनी दी गंतव्य पर संदर्भ साझा करने आस्तै लिंक कन्नै

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

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

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

ईमेल पता