बेस सीएसएस ऐ

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

हेडिंग्स & बॉडी कॉपी

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

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

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

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

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

सीसा शरीर नकल

जोड़कर इक पैराग्राफ गी अलग बनाओ .lead.

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

एच१ ऐ। शीर्षक 1 दा

ज २। हेडिंग 2 दा

ज ३। हेडिंग 3 दा

ह4 ऐ। हेडिंग 4 दा

ज ५। हेडिंग 5 दा

एच6 ऐ। हेडिंग 6 दा

जोर, संबोधन, ते संक्षिप्त रूप

तत्व	प्रयोग करना	विकल्पी
`<strong>`	महत्वपूर्ण कन्नै पाठ दे इक स्निपेट पर जोर देने आस्तै	कोई नेईं
`<em>`	तनाव कन्नै पाठ दे इक स्निपेट पर जोर देने आस्तै	कोई नेईं
`<abbr>`	होवर पर विस्तारित संस्करण गी दस्सने आस्तै संक्षिप्त ते संक्षिप्त नाम लपेटदा ऐ	`title`विस्तारित पाठ आस्तै वैकल्पिक विशेषता शामल करो `.initialism`बड्डे संक्षेपें आस्तै वर्ग दा इस्तेमाल करो ।
`<address>`	अपने नजदीकी पूर्वज जां कम्मै दे पूरे निकाय आस्तै संपर्क दी जानकारी आस्तै	सारे लाइनें गी कन्नै समाप्त करियै स्वरूपण गी संरक्षित करो`<br>`

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

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

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

उदाहरण दे पते

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

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

पूरा नाम
[email protected]

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

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

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

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

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

ब्लॉककोट्स

तत्व	प्रयोग करना	विकल्पी
`<blockquote>`	कुसै होर स्रोत थमां सामग्री दा उद्धरण देने लेई ब्लॉक-स्तरीय तत्व	`cite`स्रोत URL आस्तै विशेषता जोड़ो फ्लोटेड विकल्पें लेई इस्तेमाल `.pull-left`ते क्लासें`.pull-right`
`<small>`	बरतूनी-मुखी प्रशस्ति पत्र जोड़ने आस्तै वैकल्पिक तत्व, आमतौर पर कम्मै दे शीर्शक कन्नै इक लेखक	`<cite>`स्रोत दे शीर्षक जां नांऽ दे आसपास रक्खो

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

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

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

उदाहरण ब्लॉककोट्स दा

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

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

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

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

लिस्टां करदा ऐ

अनऑर्डर

<ul>

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

अनस्टाइल

<ul class="unstyled">

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

आर्डर दे दी

<ol>

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

ब्यौरा

<dl>

विवरण सूची दी: शब्दें गी परिभाशित करने आस्तै इक विवरण सूची बिल्कुल सही ऐ ।
यूइसमोद ने दी: वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमोड सेम्पर एगेट लैसिनिया ओडियो सेम नेसी एलिट।; डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।
मलेसुआदा पोर्टा: एटियाम पोर्टा सेम मलेसुआदा मैग्ना मोलिस यूइसमोड।

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

<dl class="dl-horizontal">

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

सिर ऊपर ! क्षैतिज वर्णन सूची उनें शब्दें गी कटौती करग जेह् ड़े बाएं स्तंभ ठीक च फिट करने आस्तै मते लम्मे न text-overflow. संकीर्ण व्यूपोर्टें च, ओह् डिफाल्ट स्टैक कीते गेदे लेआउट च बदली जाङन.

इनलाइन

कोड दे इनलाइन स्निपेटें गी <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> दा

तालिका विकल्प

नां	जमात	ब्यौरा
डिफाल्ट	कोई नेईं	कोई शैलियाँ नहीं, बस स्तंभ ते पंक्तियां
बुनियादी	`.table`	पंक्तियां दे बिच्च सिर्फ क्षैतिज रेखाएं
बॉर्डर कर दी	`.table-bordered`	कोने गोल करदा ऐ ते बाहरी सीमा जोड़दा ऐ
ज़ेबरा-पट्टी दा	`.table-striped`	विषम पंक्तियें (1, 3, 5, बगैरा) च हल्के ग्रे पृष्ठभूमि रंग जोड़दा ऐ
संघनित हो गया	`.table-condensed`	ऊर्ध्वाधर पैडिंग आधे च कटौती करदा ऐ, 8px थम��ं 4px तगर, सारें `td`ते `th`तत्वें दे अंदर

उदाहरण तालिकाएं

1. डिफ़ॉल्ट तालिका शैलियां

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

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

# ऐ	पैहला नां	अखीरी नां	यूजरनेम दा
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

2. धारीदार मेज

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

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

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

# ऐ	पैहला नां	अखीरी नां	यूजरनेम दा
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

3. सीमाबद्ध मेज

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

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

# ऐ	पैहला नां	अखीरी नां	यूजरनेम दा
१	मार्क करो	ओटो ने दी	@ एमडीओ
१	मार्क करो	ओटो ने दी	@ गेटबूटस्ट्रैप दा
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी द बर्ड		@ ट्विटर पर

4. संघनित तालिका

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

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

# ऐ	पैहला नां	अखीरी नां	यूजरनेम दा
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी द बर्ड		@ ट्विटर पर

5. इन्हें सारें गी मिलाओ !

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

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

	पूरा नाम
# ऐ	पैहला नां	अखीरी नां	यूजरनेम दा
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी द बर्ड		@ ट्विटर पर

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

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

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

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

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

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

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

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

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

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

चार किस्म दे रूप

बूटस्ट्रैप आम वेब फार्म दी चार शैलियें आस्तै सरल मार्कअप ते शैलियां उपलब्ध करोआंदा ऐ।

नां	जमात	ब्यौरा
ऊर्ध्वाधर (डिफ़ॉल्ट) ऐ।	`.form-vertical` (जरूरी नहीं)	नियंत्रणें उप्पर ढेर कीते गेदे, बाएं-संरेखित लेबल
इनलाइन	`.form-inline`	कॉम्पैक्ट शैली आस्तै बाएं-संरेखित लेबल ते इनलाइन-ब्लॉक नियंत्रण
तपाश	`.form-search`	इक ठेठ खोज सौंदर्यशास्त्र आस्तै अतिरिक्त-गोल पाठ इनपुट
आढा	`.form-horizontal`	नियंत्रणें दे समान लाइन पर बाएं, दाएं-संरेखित लेबल गी फ्लोट करो

सिर्फ फार्म नियंत्रण दा उपयोग करदे होई उदाहरण फार्म , कोई अतिरिक्त मार्कअप नेईं

मूल रूप

बिना अतिरिक्त मार्कअप दे स्मार्ट ते हल्के डिफ़ॉल्ट।

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

सर्च फार्म

फार्म च .form-searchते ..search-queryinput

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

इनलाइन फार्म

.form-inlineफार्म नियंत्रणें दी ऊर्ध्वाधर संरेखण ते अंतराल गी बारीक करने च जोड़ो ।

<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> दा

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

बूटस्ट्रैप ब्राउज़र-समर्थित फोकस ते 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">

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

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

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

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

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

@ ऐ

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

संलग्न पाठ

.00 ऐ

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

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

$ ऐ .00 ऐ

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

दो-बटन संलग्न करना

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

१ २ ३

चेकबॉक्स ऐ

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

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

रेडियो बटन

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

बटन	class="" ऐ।	ब्यौरा
	`btn`	ढाल कन्नै मानक ग्रे बटन
	`btn btn-primary`	अतिरिक्त दृश्य वजन प्रदान करदा ऐ ते बटनें दे सेट च प्राथमिक क्रिया दी पन्छान करदा ऐ
	`btn btn-info`	डिफाल्ट शैलियां दे विकल्प दे रूप च इस्तेमाल कीता जंदा ऐ
	`btn btn-success`	सफल जां सकारात्मक कार्रवाई दा संकेत दिंदा ऐ
	`btn btn-warning`	संकेत करदा ऐ जे इस कार्रवाई कन्नै सावधानी बरतनी चाहिदी
	`btn btn-danger`	खतरनाक जां संभावित नकारात्मक कार्रवाई दा संकेत दिंदा ऐ
	`btn btn-inverse`	गहरे धूसर रंग दा बटन वैकल्पिक करो, कुसै शब्दार्थ क्रिया जां इस्तेमाल कन्नै नेईं बंधे दा

कार्रवाईयें लेई बटन

कन्वेंशन दे तौर पर, बटनें दा इस्तेमाल सिर्फ कम्में आस्तै कीता जाना चाहिदा जिसलै के हाइपरलिंक दा इस्तेमाल वस्तुएं आस्तै कीता जाना ऐ। मसाल आस्तै, "डाउनलोड" इक बटन होना चाहिदा ऐ जिसलै के "हाल दी गतिविधि" इक लिंक होना चाहिदा ऐ.

बटन शैलियां गी कुसै बी चीज़ पर लागू कीता जाई सकदा ऐ जिस च .btnक्लास लागू कीती गेई ऐ। <a>हालांकि, आमतौर पर तुस इन्हें गी सिर्फ ते <button>तत्वें पर लागू करना चांह्गे ।

पार ब्राउज़र संगतता

IE9 गोल कोने पर बैकग्राउंड ढाल फसल नेईं करदा ऐ, इसलेई अस इसगी हटांदे आं। संबंधित, IE9 अक्षम buttonतत्वें गी janifies करदा ऐ, पाठ गी इक गंदा पाठ-छाया कन्नै ग्रे रेंडर करदा ऐ जेह् ड़ा अस ठीक नेईं करी सकदे.

कई साइज दा

फैंसी बड़े या छोटे बटन? दो अतिरिक्त आकारें लेई .btn-large, .btn-small, जां जोड़ो ।.btn-mini

अक्षम राज्य

अक्षम बटनें आस्तै, .disabledलिंक च वर्ग ते तत्वें disabledआस्तै विशेषता जोड़ो.<button>

प्राथमिक कड़ी तार

सिर ऊपर ! अस .disabledइत्थें इक उपयोगिता वर्ग दे रूप च इस्तेमाल करदे आं , आम .activeवर्ग दे समान , इसलेई कोई उपसर्ग दी लोड़ नेईं ऐ ।

इक क्लास, कई टैग

इक , , जां तत्व .btnपर क्लास दा इस्तेमाल करो ।<a><button><input>

<a class = "btn" href = "" > लिंक </a> ऐ  
<बटन वर्ग = "बीटीएन" प्रकार = "सबमिट" >  
  बटन
</बटन> दा
<इनपुट वर्ग = "बीटीएन" प्रकार = "बटन"।  
         मान = "इनपुट" > ऐ
<इनपुट वर्ग = "बीटीएन" प्रकार = "सबमिट"।  
         value = "सबमिट करो" >

इक बेहतरीन अभ्यास दे तौर पर, क्रॉस-ब्राउज़र रेंडरिंग गी मिलान सुनिश्चत करने आस्तै तुंदे संदर्भ आस्तै तत्व गी मिलान करने दी कोशश करो. जेकर तुंदे कोल इक ऐ तां अपने बटन आस्तै inputइक दा इस्तेमाल करो।<input type="submit">

आइकन-ग्लास दा
आइकन-संगीत
आइकन-खोज करना
आइकन-लिफाफा ऐ
आइकन-दिल
आइकन-स्टार
आइकन-स्टार-खाली
आइकन-उपयोगकर्ता
आइकन-फिल्म ऐ
आइकन-थ-बड़े
आइकन-थ
आइकन-वीं-सूची
आइकन-ठीक ऐ
आइकन-हटाओ
आइकन-ज़ूम-इन करना
आइकन-ज़ूम-आउट करना
आइकन-बंद करना
आइकन-संकेत दा
आइकन-कोग
आइकन-कचरा
आइकन-घर
आइकन-फाइल ऐ
आइकन-समय
आइकन-रोड
आइकन-डाउनलोड-अल्ट
आइकन-डाउनलोड करो
आइकन-अपलोड करना
आइकन-इनबॉक्स ऐ
आइकन-खेल-सर्कल
आइकन-दोहराओ
आइकन-ताज़ा करना
आइकन-सूची-अल्ट
आइकन-लॉक करना
आइकन-झंडा
आइकन-हेडफोन ऐ

आइकन-वॉल्यूम-बंद करना
आइकन-वॉल्यूम-डाउन करना
आइकन-वॉल्यूम-अप करना
आइकन-qrcode ऐ
आइकन-बारकोड ऐ
आइकन-टैग ऐ
आइकन-टैग ऐ
आइकन-पुस्तक
आइकन-बुकमार्क ऐ
आइकन-प्रिंट करना
आइकन-कैमरा ऐ
आइकन-फॉन्ट दा
आइकन-बोल्ड ऐ
आइकन-इटालिक ऐ
आइकन-पाठ-ऊँचाई
आइकन-पाठ-चौड़ाई
आइकन-संरेखित-बाएं
आइकन-संरेखित-केंद्र
आइकन-संरेखित-दाएं
आइकन-संरेखित-जस्टिफाई करना
आइकन-सूची ऐ
आइकन-इंडेंट-बाएं
आइकन-इंडेंट-दाएं
आइकन-फेसटाइम-वीडियो
आइकन-चित्र
आइकन-पेंसिल दा
आइकन-नक्शा-मार्कर
आइकन-समायोजित करना
आइकन-टिंट
आइकन-संपादन करना
आइकन-शेयर करो
आइकन-जाँच करो
आइकन-चलना
आइकन-कदम-पिछड़े
आइकन-तेज-पिछड़े

आइकन-पिछड़े दा
आइकन-खेलना
आइकन-विराम दे
आइकन-स्टॉप करना
आइकन-आगे दा
आइकन-फास्ट-फॉरवर्ड करना
आइकन-कदम-अग्गें
आइकन-इजेक्ट करना
आइकन-शेवरॉन-बाएं
आइकन-शेवरॉन-दाएं
आइकन-प्लस-चिन्ह
आइकन-माइनस-चिन्ह
आइकन-हटाओ-चिन्ह
आइकन-ठीक ऐ-साइन
आइकन-प्रश्न-चिन्ह
आइकन-जानकारी-चिन्ह
आइकन-स्क्रीनशॉट ऐ
आइकन-हटाओ-वृत्त
आइकन-ठीक ऐ-सर्कल
आइकन-बैन-सर्कल
आइकन-तीर-बाएं
आइकन-तीर-दाएं
आइकन-तीर-ऊपर
आइकन-तीर-नीचे
आइकन-शेयर-अल्ट
आइकन-आकार-पूरा
आइकन-आकार-छोटा
आइकन-प्लस ऐ
आइकन-माइनस दा
आइकन-तारा चिह्न
आइकन-विस्मयादिबोधक-चिन्ह
आइकन-उपहार
आइकन-पत्ता
आइकन-आग
आइकन-आँख खुली

आइकन-आँख-बंद करना
आइकन-चेतावनी-चिन्ह
आइकन-प्लेन
आइकन-कैलेंडर दा
आइकन-रैंडम ऐ
आइकन-टिप्पणी करो
आइकन-चुंबक
आइकन-शेवरॉन-अप करना
आइकन-शेवरॉन-नीचे
आइकन-रीट्वीट करो
आइकन-खरीदारी-गाड़ी
आइकन-फोल्डर-बंद करो
आइकन-फोल्डर-ओपन करना
आइकन-आकार बदलें-ऊर्ध्वाधर
आइकन-आकार-क्षैतिज
आइकन-एचडीडी
आइकन-बुलहॉर्न
आइकन-घंटी
आइकन-प्रमाण पत्र दा
आइकन-अंगूठा-अप
आइकन-अंगूठा-नीचे
आइकन-हाथ-दाएं
आइकन-हाथ-बाएं
आइकन-हैथ-अप
आइकन-हत्थ-नीचे
आइकन-वृत्त-तीर-दाएं
आइकन-वृत्त-तीर-बाएं
आइकन-वृत्त-तीर-ऊपर
आइकन-वृत्त-तीर-नीचे
आइकन-ग्लोब दा
आइकन-रिंच ऐ
आइकन-कार्य करदे न
आइकन-फिल्टर ऐ
आइकन-अटैची
आइकन-फुलस्क्रीन ऐ

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

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

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

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

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

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

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

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

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

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

सिर ऊपर ! <i>पाठ दी स्ट्रिंगें दे बक्खी दा इस्तेमाल करदे बेल्लै, जिऱयां बटन जां nav लिंक च, उचित स्पेसिंग आस्तै टैग दे बाद इक स्पेस जरूर छोड़ो .

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

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

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

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

उदाहरण दे

बटनें च, इक टूलबार, नेविगेशन, जां प्रीपेंड फार्म इनपुटें आस्तै बटन समूहें च उंदा इस्तेमाल करो.

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

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

टाइपोग्राफी हेडिंग, पैराग्राफ, सूची, ते होर इनलाइन टाइप तत्व