आधार सीएसएस के बा

मचान के ऊपर, बेसिक एचटीएमएल तत्व सभ के स्टाइल कइल गइल बा आ बिस्तार करे लायक क्लास सभ के साथ बढ़ावल गइल बा जेह से कि ताजा, सुसंगत लुक आ फीलिंग दिहल जा सके।

हेडिंग & बॉडी कॉपी के बारे में बतावल गइल बा

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

पूरा टाइपोग्राफिक ग्रिड हमनी के variables.less फाइल में दू गो Less चर पर आधारित बा: @baseFontSizeआ @baseLineHeight. पहिला बेस फॉन्ट-साइज के पूरा में इस्तेमाल कइल गइल बा आ दूसरा बेस लाइन-हाईट बा।

हमनी के ओह चर के इस्तेमाल करेनी जा, आ कुछ गणित के, अपना सगरी टाइप आ अउरी बहुत कुछ के मार्जिन, पैडिंग, आ लाइन-हाइट बनावे खातिर.

उदाहरण के देह पाठ के बारे में बतावल गइल बा

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

सीसा के शरीर के प्रतिलिपि बा

जोड़ के कवनो पैराग्राफ के अलगा बना दीं .lead.

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

ज1 के बा। शीर्षक 1 के बा

ज2 के बा। शीर्षक 2 के बा

ज3 के बा। शीर्षक 3 के बा

ज4 के बा। शीर्षक 4 के बा

ज5 के बा। शीर्षक 5 के बा

ज6 के बा। शीर्षक 6 के बा

जोर, संबोधन, आ संक्षिप्त रूप दिहल गइल बा

तत्त्व	प्रयोग के बारे में बतावल गइल बा	ऐच्छिक
`<strong>`	महत्वपूर्ण के साथ पाठ के एगो स्निपेट पर जोर देवे खातिर	कवनो ना
`<em>`	तनाव के साथे पाठ के एगो स्निपेट पर जोर देवे खातिर	कवनो ना
`<abbr>`	होवर पर बिस्तारित संस्करण देखावे खातिर संक्षिप्त आ संक्षिप्त नाँव सभ के लपेटे ला	`title`विस्तारित पाठ खातिर वैकल्पिक विशेषता शामिल करीं `.initialism`बड़का संक्षिप्त रूप खातिर क्लास के प्रयोग करीं ।
`<address>`	एकर नजदीकी पूर्वज भा पूरा काम के निकाय खातिर संपर्क जानकारी खातिर	से सभ लाइन के समाप्त क के फॉर्मेटिंग के संरक्षित करीं`<br>`

जोर देबे के प्रयोग करत बानी

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

नोट: बेझिझक इस्तेमाल करीं <b>आ <i>एचटीएमएल 5 में, बाकिर ओह लोग के इस्तेमाल में तनी बदलाव आइल बा. <b>के मतलब होला शब्द भा वाक्यांश के बिना कवनो अतिरिक्त महत्व के उजागर कइल जबकि <i>ई अधिकतर आवाज, तकनीकी शब्द वगैरह खातिर होला.

उदाहरण के पता दिहल जाव

<address>टैग के इस्तेमाल कइसे कइल जा सके ला एकर दू गो उदाहरण दिहल गइल बा:

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

पूरा नाम
[email protected] पर दिहल गइल बा

उदाहरण संक्षिप्त रूप के रूप में दिहल गइल बा

एट्रिब्यूट वाला संक्षिप्त नाँव सभ में titleनीचे के सीमा हल्का बिंदीदार होला आ होवर पर हेल्प कर्सर होला। एहसे यूजर के अतिरिक्त संकेत मिल जाई कि होवर पर कुछ देखावल जाई.

कक्षा के संक्षिप्त रूप में जोड़ के initialismटाइपोग्राफिक हार्मोनियम बढ़ावे खातिर ओकरा के तनिका छोट टेक्स्ट साइज दे के देखल जा सकेला।

एचटीएमएल कटा रोटी के बाद से सबसे बढ़िया चीज बा।

विशेषता शब्द के एगो संक्षिप्त रूप ह attr .

ब्लॉककोट कइल गइल बा

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

ब्लॉककोट शामिल करे खातिर <blockquote>कवनो भी एचटीएमएल के कोट के रूप में लपेट लीं। सीधा उद्धरण खातिर हमनी के एगो <p>.

अपना स्रोत के हवाला देबे खातिर एगो वैकल्पिक तत्व शामिल करीं आ स्टाइलिंग के मकसद से एकरा से पहिले <small>रउरा के एगो एम डैश मिल जाई .—

<ब्लॉककोट> के बा
  <p> लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट एगो एंटी वेनेनेटिस। </p>के बा
  <छोट> केहू मशहूर </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> के बा
  <tbody> के बा
    <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> के बा

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	प्रयोगकर्ता के नाम बा
1 के बा	मार्क कइल जाव	ओटो के नाम से जानल जाला	@mdo के बा
2 के बा	याकूब के नाम से जानल जाला	थॉर्नटन के नाम से जानल जाला	@मोट
3 के बा	लैरी के नाम से जानल जाला	चिरई के नाम से जानल जाला	@ट्विटर पर दिहल गइल बा

2. धारीदार टेबल के बा

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

नोट: धारीदार टेबल सभ में :nth-childCSS चयनकर्ता के इस्तेमाल होला आ ई IE7-IE8 में उपलब्ध नइखे।

<तालिका वर्ग = "तालिका तालिका-धारीदार" > 
  ...
</table> के बा

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	प्रयोगकर्ता के नाम बा
1 के बा	मार्क कइल जाव	ओटो के नाम से जानल जाला	@mdo के बा
2 के बा	याकूब के नाम से जानल जाला	थॉर्नटन के नाम से जानल जाला	@मोट
3 के बा	लैरी के नाम से जानल जाला	चिरई के नाम से जानल जाला	@ट्विटर पर दिहल गइल बा

3. सीमाबद्ध टेबल के बा

सौंदर्य के उद्देश्य से पूरा टेबल के चारों ओर सीमा अवुरी गोल कोना जोड़ल जाए।

<table class = "टेबल टेबल-सीमा वाला" > 
  ...
</table> के बा

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	प्रयोगकर्ता के नाम बा
1 के बा	मार्क कइल जाव	ओटो के नाम से जानल जाला	@mdo के बा
1 के बा	मार्क कइल जाव	ओटो के नाम से जानल जाला	@getbootstrap के बा
2 के बा	याकूब के नाम से जानल जाला	थॉर्नटन के नाम से जानल जाला	@मोट
3 के बा	लैरी द बर्ड के नाम से जानल जाला		@ट्विटर पर दिहल गइल बा

4. संघनित तालिका के बारे में बतावल गइल बा

.table-condensedटेबल सेल पैडिंग के आधा में काट के (8px से 4px तक) क्लास जोड़ के आपन टेबल सभ के अउरी कॉम्पैक्ट बनाईं ।

<तालिका वर्ग = "तालिका तालिका-घनीभूत" > 
  ...
</table> के बा

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	प्रयोगकर्ता के नाम बा
1 के बा	मार्क कइल जाव	ओटो के नाम से जानल जाला	@mdo के बा
2 के बा	याकूब के नाम से जानल जाला	थॉर्नटन के नाम से जानल जाला	@मोट
3 के बा	लैरी द बर्ड के नाम से जानल जाला		@ट्विटर पर दिहल गइल बा

5. एह सब के मिला लीं!

उपलब्ध कवनो क्लास के उपयोग करके अलग-अलग लुक हासिल करे खातिर कवनो टेबल क्लास के संयोजन करे में बेझिझक महसूस करीं।

<table class = "टेबल तालिका-धारीदार तालिका-सीमा वाला तालिका-घनीभूत" > 
  ...
</table> के बा

	पूरा नाम बा
# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	प्रयोगकर्ता के नाम बा
1 के बा	मार्क कइल जाव	ओटो के नाम से जानल जाला	@mdo के बा
2 के बा	याकूब के नाम से जानल जाला	थॉर्नटन के नाम से जानल जाला	@मोट
3 के बा	लैरी द बर्ड के नाम से जानल जाला		@ट्विटर पर दिहल गइल बा

लचीला एचटीएमएल आ सीएसएस बा

बूटस्ट्रैप में फॉर्म के बारे में सबसे बढ़िया बात इ बा कि आपके सभ इनपुट अवुरी कंट्रोल बहुत बढ़िया लागता चाहे आप अपना मार्कअप में एकरा के कईसे बनाईं। कवनो फालतू एचटीएमएल के जरूरत नइखे बाकिर हमनी का ओह लोग खातिर पैटर्न देत बानी जा जेकरा एकर जरूरत बा.

अउरी जटिल लेआउट सभ में आसान स्टाइलिंग आ इवेंट बाइंडिंग खातिर संक्षिप्त आ स्केल करे लायक क्लास सभ के साथ आवे ला, एह से हर स्टेप पर रउआँ के कवर कइल जाला।

चार गो लेआउट शामिल बा

बूटस्ट्रैप चार तरह के फॉर्म लेआउट खातिर सपोर्ट के संगे आवेला:

ऊर्ध्वाधर (डिफ़ॉल्ट) के बा।
तलाशी
इनलाइन के बा
क्षैतिज

अलग-अलग किसिम के फॉर्म लेआउट सभ में मार्कअप खातिर कुछ बदलाव के जरूरत होला, बाकी खुद नियंत्रण सभ एकही नियर रहे लें आ व्यवहार करे लें।

नियंत्रण राज्य आ अउरी बहुत कुछ

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

हर प्रकार के फॉर्म कंट्रोल खातिर त्रुटि, चेतावनी, आ सफलता जइसन राज्य शामिल कइल गइल बा। एकरे अलावा अक्षम नियंत्रण सभ खातिर शैली सभ के भी सामिल कइल गइल बा।

चार तरह के रूप होला

बूटस्ट्रैप आम वेब फॉर्म सभ के चार गो स्टाइल सभ खातिर सरल मार्कअप आ स्टाइल सभ के उपलब्ध करावे ला।

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

उदाहरण खातिर खाली फॉर्म कंट्रोल के इस्तेमाल से फार्म, कवनो अतिरिक्त मार्कअप ना

मूल रूप के रूप में बा

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

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

खोज के फार्म बा

.form-searchफार्म में जोड़ल जाव .search-queryआ input.

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

इनलाइन फार्म के बा

.form-inlineफॉर्म कंट्रोल के ऊर्ध्वाधर संरेखण आ स्पेसिंग के बारीक करे खातिर जोड़ल जाव.

<फॉर्म क्लास = "अच्छा फॉर्म-इनलाइन" > बा 
  <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-छोट" प्लेसहोल्डर = "ईमेल" >   
  <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-छोट" प्लेसहोल्डर = "पासवर्ड" >   
  <लेबल वर्ग = "चेकबॉक्स" > बा 
    <input type = "checkbox" > हमरा के याद रखीं 
  </label> के बा
  <बटन प्रकार = "सबमिट" क्लास = "btn" > साइन इन करीं </बटन>  
</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 के बा

बटन के साथ जोड़ल जाला

दू गो बटन वाला जोड़ल जाला

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

1 के बा 2 के बा 3 के बा

चेकबॉक्स के बा

विकल्प एक ई आ ऊ बा-जरूर शामिल करीं कि ई काहे बढ़िया बा विकल्प दू के भी जांच कईल जा सकता अवुरी फॉर्म के नतीजा में शामिल कईल जा सकता विकल्प तीन के भी-हँ, रउआ अंदाजा लगा लेले बानी-ओकर जांच कइल जा सकेला आ फॉर्म रिजल्ट में शामिल कइल जा सकेला

नोट: लेबल सभ बहुत बड़ क्लिक क्षेत्र आ ढेर इस्तेमाल करे लायक फॉर्म खातिर सभ विकल्प सभ के घेर लेलें।

रेडियो के बटन बा

विकल्प एक ई आ ऊ बा-जरूर शामिल करीं कि ई काहे बढ़िया बा विकल्प दू कुछ अउर हो सकेला आ ओकरा के चुनला से विकल्प एक के चयन रद्द हो जाई

बटन	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तत्व सभ के जंफाई करे ला, टेक्स्ट के एगो गंदा टेक्स्ट-शैडो के साथ ग्रे रेंडर करे ला जेकरा के हमनी के ठीक नइखीं कर सकत।

कई गो साइज के होला

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

अक्षम अवस्था में बा

अक्षम बटन सभ खातिर, .disabledलिंक सभ में क्लास आ तत्व disabledसभ खातिर एट्रिब्यूट जोड़ीं।<button>

प्राथमिक कड़ी बा संपर्क

हेड अप हो गइल बा! हमनी के .disabledइहाँ उपयोगिता वर्ग के रूप में इस्तेमाल करेनी जा, आम वर्ग के समान .active, एहसे कवनो उपसर्ग के जरूरत नईखे।

एक क्लास, कई गो टैग बा

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

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

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

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

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

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

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

स्प्राइट के रूप में बनल बा

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

सभ आइकन क्लास सभ के उपसर्ग .icon-उचित नेमस्पेसिंग आ स्कोपिंग खातिर दिहल गइल बा, बहुत कुछ हमनी के बाकी घटक सभ नियर। एहसे दोसरा औजारन से टकराव से बचे में मदद मिली.

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

कइसे इस्तेमाल कइल जाला

बूटस्ट्रैप <i>सभ आइकन सभ खातिर टैग के इस्तेमाल करे ला, बाकी इनहन में कौनों केस क्लास ना होला-केवल साझा उपसर्ग। इस्तेमाल करे खातिर, निम्नलिखित कोड के लगभग कहीं भी रखीं:

<i class = "आइकन-खोज" </i> के बारे में बतावल गइल बा

उल्टा (सफेद) आइकन सभ खातिर भी स्टाइल उपलब्ध बाड़ें, एक ठो अतिरिक्त क्लास के साथ तइयार कइल गइल बा:

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

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

हेड अप हो गइल बा! <i>पाठ के स्ट्रिंग के बगल में इस्तेमाल करत समय, जइसे कि बटन भा nav लिंक में, सही स्पेसिंग खातिर टैग के बाद स्पेस जरूर छोड़ीं ।

केस के प्रयोग कइल जाला

आइकन त बढ़िया होला बाकिर एकर इस्तेमाल कहाँ करी? इहाँ कुछ विचार दिहल जा रहल बा:

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

अनिवार्य रूप से, कहीं भी रउआ <i>टैग लगा सकेनी, रउआ आइकन लगा सकेनी।

उदाहरण खातिर दिहल गइल बा

इनहन के बटन, टूलबार खातिर बटन समूह, नेविगेशन, या प्रीपेंड फॉर्म इनपुट में इस्तेमाल करीं।

ताज़ा कर दिहल जाव चेकआउट कइल जाव हटाईं

टिप्पणी सेटिंग्स के बारे में बतावल गइल बा अधिक जानकारी खातिर देखीं

टाइपोग्राफी हेडिंग, पैराग्राफ, लिस्ट, आ अउरी इनलाइन टाइप के तत्व