शीर्षकां

सगळ्यो HTML शीर्षकां, <h1>माध्यमांतल्यान <h6>उपलब्ध आसात.

h1. शीर्षक 1

h2. शीर्षक 2

h3 हें नांव. शीर्षक 3

h4 हें नांव. शीर्षक 4

h5. शीर्षक 5

h6 हें नांव. शीर्षक 6

शरीराची प्रत

बूटस्ट्रॅपाचो जागतीक font-sizeमुलभूत 14px , line-heightएक 20px . हें <body>आनी सगळ्या परिच्छेदांक लागू जाता. ते भायर, <p>(परिच्छेद) तांच्या अर्द्या ओळी-उंचायेचें सकयलें मार्जिन मेळटा (मुळाव्यान 10px).

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

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

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

<p> ... </p> हें नांव

शिंशें बॉडी कॉपी

जोडून एक परिच्छेद वेगळो उबो करचो .lead.

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

<p वर्ग = "लीड" > ... </p>

कमी घेवन बांदिल्लें

मुद्रण प्रमाण चयापचयांतल्या दोन LESS चयापचयाचेर आदारीत आसा .less : @baseFontSizeआनी @baseLineHeight. पयलो पुराय वापरिल्लो बेस फॉन्ट-आकार आनी दुसरो बेस लायन-उंचाय. आमी त्या व्हेरिएबल्स आनी कांय सादें गणित वापरून आमच्या सगळ्या प्रकाराचे मार्जिन, पॅडिंग, आनी लायन-हायट्स तयार करतात आनी हेर. तांकां सानुकूल करात आनी बूटस्ट्रॅप अनुकूल जाता.

भर दिवप

हलके वजनाच्या शैलींनी HTML च्या मुलभूत भर टॅगांचो वापर करचो.

`<small>`

इनलायन वा मजकूराच्या ब्लॉकांचेर भर काडून उडोवपाखातीर, ल्हान टॅग वापरात.

ही मजकूर ओळ बारीक छाप म्हणून मानपाचो आसा.

<p> <small> ही मजकूर ओळ बारीक छाप म्हणून मानपाची आसा. </small> </p> हें नांव

ठळक

जड फॉन्ट-वजन आशिल्ल्या मजकूराच्या स्निपेटाचेर भर दिवपाखातीर.

सकयल दिल्लो मजकूर स्निपेट मोटवो मजकूर म्हणून रेंडर केला .

<strong> मोटव्या मजकूर म्हणून रेंडर केला </strong>

इटालिक

इटालिक आशिल्ल्या मजकूराच्या एका स्निपेटाचेर भर दिवपा खातीर.

सकयल दिल्लो मजकूर स्निपेट इटालिक केल्लो मजकूर म्हणून रेंडर केला .

<em> इटालिक केल्लो मजकूर म्हणून रेंडर केला </em>

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

संरेखण वर्ग

मजकूर संरेखण वर्ग आशिल्ल्या घटकांक मजकूर सहजपणान परतून संरेखित करात.

डावें संरेखित मजकूर.

केंद्र संरेखित मजकूर.

उजवे वटेन संरेखित केल्लो मजकूर.

<p class = "text-left" > डावें संरेखित मजकूर. </p> हें नांव 
<p class = "text-center" > केंद्र संरेखित मजकूर. </p> हें नांव 
<p class = "text-right" > उजवे वटेन संरेखित केल्लो मजकूर. </p> हें नांव

भर दिवपाचे वर्ग

मुठीभर भर दिवपी उपयुक्तताय वर्गां सयत रंगा वरवीं अर्थ दिवप.

फुसे दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस निभ.

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

डोनेक उल्लमकोर्पर नुल्ला नॉन मेटस ऑक्टर फ्रिंगिला.

एनियन यु लियो क्वाम. पेलेन्टेस्क ऑर्नारे सेम लॅसिनिया क्वाम व्हेनेनेटिस.

डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला.

<p class = "muted" > फुस्से दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस निभ. </p> हें नांव 
<p class = "मजकूर-शिटकावणी" > एटियाम पोर्टा सेम मॅलेसुआडा मॅग्ना मोलिस युइसमोड. </p> हें नांव 
<p class = "text-error" > डोनेक उल्लामकोर्पर शून्य नॉन मेटस ऑक्टर फ्रिंगिला. </p> हें नांव 
<p class = "मजकूर-माहिती" > एनियन ईयू लियो क्वाम. पेलेन्टेस्क ऑर्नारे सेम लॅसिनिया क्वाम व्हेनेनेटिस. </p> हें नांव 
<p class = "मजकूर-यश" > डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला. </p> हें नांव

संक्षेप

<abbr>होवराचेर विस्तारीत आवृत्ती दाखोवपाखातीर संक्षेप आनी संक्षिप्त नांवांखातीर HTML च्या घटकाची शैलीबद्ध कार्यान्वयन . गुणधर्म आशिल्ल्या संक्षेपांक titleहळदुव्या बिंदू आशिल्ली तळाची शिमो आनी होवराचेर मदत कर्सर आसता, होवराचेर अतिरिक्त संदर्भ दिता.

`<abbr>`

संक्षेपाच्या लांब होवराचेर विस्तारीत मजकूराखातीर, titleगुणधर्म समाविष्ट करात.

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

<abbr title = "गुणधर्म" > attr </abbr>

`<abbr class="initialism">`

.initialismमात्सो ल्हान फॉन्ट-आकार खातीर संक्षेपांत जोडात .

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

<abbr title = "हायपरटेक्स्ट मार्कअप भास" class = "आरक्षणवाद" > एचटीएमएल </abbr>

संबोधन करता

लागींच्या पूर्वजा खातीर वा कामाच्या पुराय कुडी खातीर संपर्काची म्हायती सादर करप.

`<address>`

सगळ्यो ओळींनी सोंपयतना स्वरूपण सांबाळचें <br>.

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

पुराय नांव
[email protected]

<पत्तो> हें नांव
  <strong> ट्विटर, इंक. </strong><br>
  795 फोल्सम अॅव्हे, सुट 600 <br>
  सॅन फ्रांसिस्को, सीए 94107 <br>
  <abbr title = "फोन" > पी: </abbr> (123) 456-7890 
</पत्तो>
 
<पत्तो> हें नांव
  <strong> पुराय नांव </strong><br>
  <a href = "mailto:#" > पयलें.निमाणें@उदाहरण .com </a> 
</पत्तो>

ब्लॉककोट्स हांचो आस्पाव जाता

तुमच्या दस्तावेजा भितरल्या दुसऱ्या स्त्रोता कडल्यान सामुग्री ब्लॉक उद्धृत करपा खातीर.

मुलभूत ब्लॉककोट

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

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

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

ब्लॉककोट पर्याय

मानक ब्लॉककोटचेर साद्या बदलाखातीर शैली आनी सामुग्री बदलतात.

एका स्रोताचें नांव दिवप

<small>स्त्रोत वळखुपाखातीर टॅग जोडात . स्त्रोत कार्याचें नांव <cite>.

लोरेम इप्सम डोलोर बस आमेत, कॉन्सेक्टेटर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक आंते.
स्रोत शीर्षकांत कोण तरी फामाद

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

पर्यायी प्रदर्शनां करप

.pull-rightतरंगपी, उजवे-संरेखित ब्लॉककोटा खातीर वापरात .

लोरेम इप्सम डोलोर बस आमेत, कॉन्सेक्टेटर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक आंते.
स्रोत शीर्षकांत कोण तरी फामाद

<blockquote वर्ग = "ओड-उजवें" > 
  ...
</blockquote> हें नांव

यादी दिता

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

ज्या वस्तूंत क्रमाक स्पश्टपणान म्हत्व ना अशा वस्तूंची वळेरी .

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

<उल> हें नांव
  <li> ... </li> हें नांव
</ul> हें नांव

आदेश दिलो

ज्या वस्तूंत क्रम स्पश्टपणान म्हत्वाचो आसता ताची वळेरी.

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

<ol> हें नांव
  <li> ... </li> हें नांव
</ol> हें नांव

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

यादी आयटमांचेर मुलभूत list-styleआनी डावें पॅडींग काडून उडोवचें (फकत तात्काळ भुरग्यांक).

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

<ul वर्ग = "अशैली" > 
  <li> ... </li> हें नांव
</ul> हें नांव

इनलायन

सगळ्यो यादी वस्तू एकाच ओळीचेर inline-blockआनी कांय उजवाड पॅडींग दवरात.

लोरेम इप्सम हें नांव
फासेलस इअकुलिस हें नांव
नुल्ला वोलुत्पात

<ul वर्ग = "इनलायन" > 
  <li> ... </li> हें नांव
</ul> हें नांव

वर्णन

संज्ञांची वळेरी तांचे संबंदीत वर्णनां सयत.

वर्णन यादी: संज्ञा व्याख्या करपाखातीर वर्णन वळेरी परिपूर्ण आसा.
युइस्मोड हांणी केला: वेस्टिबुलम आयडी लिगुला पोर्टा फेलिस युइसमोड सेम्पर एगेट लॅसिनिया ओडियो सेम नेसी एलिट.; डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस.
मालेसुआदा पोर्टा: एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड.

<dl> हें नांव
  <dt> ... </dt> हें नांव
  <dd> ... </dd> हें नांव
</dl> हें नांव

आडवें वर्णन

<dl>बाजू बाजून लायन अपांत संज्ञा आनी वर्णनां करात .

वर्णन यादी: संज्ञा व्याख्या करपाखातीर वर्णन वळेरी परिपूर्ण आसा.
युइस्मोड हांणी केला: वेस्टिबुलम आयडी लिगुला पोर्टा फेलिस युइसमोड सेम्पर एगेट लॅसिनिया ओडियो सेम नेसी एलिट.; डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस.
मालेसुआदा पोर्टा: एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड.
फेलिस युइसमोड सेम्पर एगेट लॅसिनिया: फुसे दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस कॉन्डिमेंटम निभ, उत फर्मेन्टम मासा जस्टो बस अमेट रिसुस.

<dl वर्ग = "dl-आडवें" > 
  <dt> ... </dt> हें नांव
  <dd> ... </dd> हें नांव
</dl> हें नांव

तकली वयर काडटा!आडवी वर्णन यादी डाव्या स्तंभ फिक्सांत बसपाक चड लांब आशिल्लीं संज्ञा कापून उडयतलीं text-overflow. अरुंद दृश्यपोर्टांत, ते मुलभूत स्टॅक केल्ली मांडावळ बदलतले.

इनलायन

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

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

देखीक , <कोड > & lt ; section & gt ;</ code > इनलायन म्हणून गुठलावपाक जाय .

मुळावो ब्लॉक

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

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

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

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

तुमी पर्यायीपणान .pre-scrollableवर्ग जोडूंक शकतात जो 350px ची चडांत चड-उंचाय सेट करतलो आनी y-अक्ष स्क्रोलबार दितलो.

मुलभूत शैली

मुळाव्या स्टायलिंग खातीर-हलक्या पॅडींग आनी फकत आडवे डिव्हायडर- .tableखंयच्याय <table>.

# 1 .	पयलें नांव	निमाणें नांव	वापरप्याचें नांव
१	मार्क हें नांव	ओटो हांणी केला	@mdo हांणी केला
२	जाकोब	थॉर्नटन हांणी केला	@चरबी
३	लॅरी हांणी केला	सुकणें हें	@twitter हांणी केला

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

पर्यायी वर्ग

मुळाव्या वर्गांत सकयल दिल्ल्यांतले खंयचेय वर्ग जोडात .table.

`.table-striped`

<tbody>via :nth-childCSS निवडक (IE7-8 त उपलब्ध ना) भितर खंयचेय कोश्टक ओळींत झेब्रा-स्ट्राइपिंग जोडटा .

# 1 .	पयलें नांव	निमाणें नांव	वापरप्याचें नांव
१	मार्क हें नांव	ओटो हांणी केला	@mdo हांणी केला
२	जाकोब	थॉर्नटन हांणी केला	@चरबी
३	लॅरी हांणी केला	सुकणें हें	@twitter हांणी केला

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

`.table-bordered`

मेजाचेर शिमो आनी वाटकुळे कोनशे घालचे.

# 1 .	पयलें नांव	निमाणें नांव	वापरप्याचें नांव
१	मार्क हें नांव	ओटो हांणी केला	@mdo हांणी केला
१	मार्क हें नांव	ओटो हांणी केला	@getbootstrap हांणी केला
२	जाकोब	थॉर्नटन हांणी केला	@चरबी
३	लॅरी द बर्ड हांणी केला		@twitter हांणी केला

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

`.table-hover`

एक भितर कोश्टक ओळींचेर होवर स्थिती सक्षम करात <tbody>.

# 1 .	पयलें नांव	निमाणें नांव	वापरप्याचें नांव
१	मार्क हें नांव	ओटो हांणी केला	@mdo हांणी केला
२	जाकोब	थॉर्नटन हांणी केला	@चरबी
३	लॅरी द बर्ड हांणी केला		@twitter हांणी केला

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

`.table-condensed`

सेल पॅडींग अर्दांत कापून कोश्टकां चड संकुचीत करता.

# 1 .	पयलें नांव	निमाणें नांव	वापरप्याचें नांव
१	मार्क हें नांव	ओटो हांणी केला	@mdo हांणी केला
२	जाकोब	थॉर्नटन हांणी केला	@चरबी
३	लॅरी द बर्ड हांणी केला		@twitter हांणी केला

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

पर्यायी ओळी वर्ग

कोश्टक ओळींक रंग दिवपाक संदर्भ वर्ग वापरात.

वर्ग	वर्णन
`.success`	यशस्वी वा सकारात्मक कृती दाखयता.
`.error`	धोक्याची वा संभाव्य नकारात्मक कृती दाखयता.
`.warning`	लक्ष दिवपाची गरज आसूं येता अशी शिटकावणी दाखयता.
`.info`	मुलभूत शैलींचो पर्याय म्हणून वापरतात.

# 1 .	उत्पादन	फारीकणी घेतली	स्थिती
१	टीबी - म्हयन्याळें	०१/०४/२०१२ ह्या दिसा जाली	मान्यतायप्राप्त
२	टीबी - म्हयन्याळें	०२/०४/२०१२ ह्या दिसा जाली	न्हयकार दिलो
३	टीबी - म्हयन्याळें	०३/०४/२०१२ ह्या दिसा	अनिर्णित
४	टीबी - म्हयन्याळें	०४/०४/२०१२ ह्या दिसा जाली	पुष्टी करपाक कॉल इन करात

...
  < tr class = "यशस्वी" >
    <td> 1 < /td> हें नांव
    <td>टीबी - म्हयन्याळें</ td >
    <td> 01 / 04 / 2012 < /td> ह्या दिसा
    <td>मान्य</ td >
  </ tr > हें नांव
...

समर्थीत कोश्टक मार्कअप

समर्थीत कोश्टक HTML घटकांची वळेरी आनी तांचो वापर कसो करचो.

टॅग	वर्णन
`<table>`	कोश्टकीय स्वरूपांत डेटा दाखोवपाखातीर रॅपिंग घटक
`<thead>`	कोश्टक शीर्षक ओळींखातीर कंटेनर घटक ( `<tr>`) कोश्टक स्तंभांक लेबल करपाक
`<tbody>`	`<tr>`कोश्टकाच्या आंगांतल्या कोश्टक ओळींखातीर ( ) कंटेनर घटक
`<tr>`	एकाच ओळीचेर दिसपी कोश्टक कक्षांच्या संचाखातीर ( `<td>`वा ) कंटेनर घटक`<th>`
`<td>`	मुलभूत कोश्टक कक्ष
`<th>`	स्तंभ (वा ओळी, व्याप्ती आनी प्लेसमेंटाचेर आदारून) लेबलांखातीर खाशेलो कोश्टक कक्ष
`<caption>`	कोश्टकांत कितें आसा हाचें वर्णन वा सारांश, खास करून स्क्रीन रीडरांक उपेगी

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

मुलभूत शैली

<form>वैयक्तीक फॉर्म नियंत्रणांक स्टायलिंग मेळटा, पूण मार्कअपांत वा व्हड बदलांचेर कसलोच गरजेचो बेस क्लास नासतना . फॉर्म नियंत्रणां वयल्यान स्टॅक केल्लीं, डावी-संरेखित लेबलां परिणाम करता.

<रूप> हें नांव
  <फील्डसेट> हें नांव
    <आख्यायिका> आख्यायिका </legend>
    <label> लेबलाचें नांव </label>
    <input type = "text" placeholder = "कितें तरी टाइप करात..." >  
    <span class = "help-block" > उदाहरण ब्लॉक-पातळेचो मदत मजकूर हांगा. </span> हें नांव 
    <लेबल वर्ग = "चेकबॉक्स" > 
      <input type = "checkbox" > म्हाका तपासात 
    </label> हें नांव
    <बटण प्रकार = "सबमिट" class = "btn" > सबमिट करचें </button>  
  </फील्डसेट> हें नांव
</form> हें नांव

पर्यायी मांडावळी

Bootstrap कडेन सामान्य वापर प्रकरणां खातीर तीन पर्यायी फॉर्म मांडावळ समाविष्ट केल्या.

सोद फॉर्म

अतिरिक्त-गोल मजकूर इनपुटा खातीर .form-searchफॉर्मांत आनी .search-queryकडेन जोडात .<input>

<form class = "फॉर्म-सोद" > 
  <इनपुट प्रकार = "मजकूर" वर्ग = "इनपुट-माध्यम सोद-क्वेरी" >  
  <बटण प्रकार = "सबमिट" वर्ग = "btn" > सोद </बटण>  
</form> हें नांव

इनलायन फॉर्म

.form-inlineडावी-संरेखित लेबलांखातीर आनी संकुचीत मांडावळीखातीर इनलायन-ब्लॉक नियंत्रणांखातीर जोडात .

<फॉर्म वर्ग = "फॉर्म-इनलायन" > 
  <इनपुट प्रकार = "मजकूर" वर्ग = "इनपुट-ल्हान" प्लेसहोल्डर = "ईमेल" >   
  <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-ल्हान" प्लेसहोल्डर = "पासवर्ड" >   
  <लेबल वर्ग = "चेकबॉक्स" > 
    <input type = "checkbox" > म्हाका याद दवरात 
  </label> हें नांव
  <बटण प्रकार = "सबमिट" वर्ग = "btn" > सायन इन करात </बटण>  
</form> हें नांव

आडवें रूप

लेबलां उजवे वटेन संरेखित करात आनी नियंत्रणां प्रमाणच ओळीचेर दिसपाक तीं डावी वटेन तरंगात. मुलभूत फॉर्मांतल्यान चडांत चड मार्कअप बदलांची गरज आसा:

.form-horizontalफॉर्मांत जोडचें
लेबल आनी नियंत्रणां मदीं गुठलावचीं.control-group
.control-labelलेबलांत जोडचें
.controlsयोग्य संरेखणाखातीर खंयचेय संबंदीत नियंत्रण गुठलावचे

<form class = "रूप-आडवें" > 
  <div वर्ग = "नियंत्रण-समूह" > 
    <label class = "नियंत्रण-लेबल" for = "इनपुटईमेल" > ईमेल </label>  
    <div वर्ग = "नियंत्रण" > 
      <इनपुट प्रकार = "मजकूर" id = "इनपुटईमेल" प्लेसहोल्डर = "ईमेल" >   
    </div> हें नांव
  </div> हें नांव
  <div वर्ग = "नियंत्रण-समूह" > 
    <label class = "control-label" for = "इनपुटपासवर्ड" > पासवर्ड </label>  
    <div वर्ग = "नियंत्रण" > 
      <इनपुट प्रकार = "पासवर्ड" id = "इनपुटपासवर्ड" प्लेसहोल्डर = "पासवर्ड" >   
    </div> हें नांव
  </div> हें नांव
  <div वर्ग = "नियंत्रण-समूह" > 
    <div वर्ग = "नियंत्रण" > 
      <लेबल वर्ग = "चेकबॉक्स" > 
        <input type = "checkbox" > म्हाका याद दवरात 
      </label> हें नांव
      <बटण प्रकार = "सबमिट" वर्ग = "btn" > सायन इन करात </बटण>  
    </div> हें नांव
  </div> हें नांव
</form> हें नांव

समर्थीत फॉर्म नियंत्रणां

उदाहरण फॉर्म मांडावळींत समर्थीत केल्ल्या मानक फॉर्म नियंत्रणांचीं उदाहरणां.

आदान-प्रदान करतात

चडशे सामान्य फॉर्म नियंत्रण, मजकूर-आधारीत इनपुट क्षेत्रां. सगळ्या HTML5 प्रकारांखातीर आदार समाविष्ट करता: मजकूर, पासवर्ड, तारीखवेळ, तारीखवेळ-स्थानीक, तारीख, म्हयनो, वेळ, सप्तक, क्रमांक, ईमेल, url, सोद, दूरध्वनी, आनी रंग.

typeसगळ्या वेळार एक निर्दिश्ट वापरपाची गरज आसा .

<इनपुट प्रकार = "मजकूर" प्लेसहोल्डर = "मजकूर इनपुट" >

पाठक्षेत्र

मजकूराच्या जायत्या ओळींनी आदार दिवपी फॉर्म नियंत्रण. rowsगरज पडल्यार गुणधर्म बदलात .

<textarea rows = "3" ></textarea>

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

चेकबॉक्स हे वळेरेंत एक वा जायते पर्याय निवडपाखातीर आसतात जाल्यार रेडिओ जायत्यांतल्यान एक पर्याय निवडपाखातीर आसतात.

मुलभूत (स्टॅक केल्लें) .

<लेबल वर्ग = "चेकबॉक्स" > 
  <इनपुट प्रकार = "चेकबॉक्स" मोल = "" >  
  पर्याय एक हो आनी तो-तो कित्याक म्हान आसा हाची खात्रीन आस्पाव करात
</label> हें नांव
 
<लेबल वर्ग = "रेडियो" > 
  <इनपुट प्रकार = "रेडियो" नाव = "पर्यायरेडियो" id = "पर्यायरेडियो1" मोल = "पर्याय1" तपासले >     
  पर्याय एक हो आनी तो-तो कित्याक म्हान आसा हाची खात्रीन आस्पाव करात
</label> हें नांव
<लेबल वर्ग = "रेडियो" > 
  <इनपुट प्रकार = "रेडियो" नाव = "पर्यायरेडियो" id = "पर्यायरेडियो2" मोल = "पर्याय2" >    
  पर्याय दोन आनीक कितें तरी आसूं येता आनी तो निवडल्यार पर्याय एक निवड रद्द जातली
</label> हें नांव

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

.inlineत्याच ओळीचेर दिसपी नियंत्रणां खातीर चेकबॉक्स वा रेडिओ माळेंत वर्ग जोडात .

<label class = "चेकबॉक्स इनलायन" > 
  <इनपुट प्रकार = "चेकबॉक्स" id = "इनलायनचेकबॉक्स1" मोल = "पर्याय1 " > 1   
</label> हें नांव
<label class = "चेकबॉक्स इनलायन" > 
  <इनपुट प्रकार = "चेकबॉक्स" id = "इनलायनचेकबॉक्स2" मोल = "पर्याय2 " > 2   
</label> हें नांव
<label class = "चेकबॉक्स इनलायन" > 
  <इनपुट प्रकार = "चेकबॉक्स" id = "इनलायनचेकबॉक्स3" मोल = "पर्याय3 " > 3   
</label> हें नांव

निवडटा

multiple="multiple"एकाच वेळार जायते पर्याय दाखोवपाक मुलभूत पर्याय वापरात वा a निर्देशीत करात .

<निवडचें>
  <पर्याय> 1 </option>
  <पर्याय> २ </option>
  <पर्याय> 3 </option>
  <पर्याय> ४ </option>
  <पर्याय> ५ </option>
</निवडचें>
 
< बहु निवडात = "बहु" > 
  <पर्याय> 1 </option>
  <पर्याय> २ </option>
  <पर्याय> 3 </option>
  <पर्याय> ४ </option>
  <पर्याय> ५ </option>
</निवडचें>

फॉर्म नियंत्रणांचो विस्तार करप

सद्याच्या ब्राउझर नियंत्रणां वयल्यान जोडून, बूटस्ट्रॅप हेर उपेगी फॉर्म घटकांचो आस्पाव करता.

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

खंयच्याय मजकूर-आधारीत इनपुटा पयलीं वा उपरांत मजकूर वा बटणां जोडात. selectहांगा घटकांक तेंको ना हें लक्षांत दवरात .

मुलभूत पर्याय

इनपुटाक मजकूर प्रीपेंड करपाक वा जोडपाक दोन वर्गांतल्या एका वर्गांत an .add-onआनी an गुठलावचें.input

<div वर्ग = "इनपुट-प्रीपेंड" > 
  <span वर्ग = "जोड-ऑन" > @ </span> 
  <इनपुट वर्ग = "span2" id = "prependedInput" प्रकार = "मजकूर" प्लेसहोल्डर = "वापरप्याचें नांव" >    
</div> हें नांव
<div वर्ग = "इनपुट-जोड" > 
  <इनपुट वर्ग = "span2" id = "जोडलेलेइनपुट " प्रकार = "मजकूर" >   
  <span वर्ग = "जोड-ऑन" > .00 </span> 
</div> हें नांव

एकठांय केल्लें

.add-onइनपुट प्रीपेंड करपाक आनी जोडपाक दोनूय वर्ग आनी दोन प्रसंग वापरात .

<div class = "इनपुट-प्रीपेंड इनपुट-एपेंड" > 
  <span वर्ग = "जोड-ऑन" > $ </span> 
  <इनपुट क्लास = "span2" id = "appendedPrependedInput " प्रकार = "मजकूर" >   
  <span वर्ग = "जोड-ऑन" > .00 </span> 
</div> हें नांव

मजकूर बदला बटण

<span>मजकूर आशिल्ल्या a बदला , .btnइनपुटाक बटण (वा दोन) जोडपाक a वापरात.

<div वर्ग = "इनपुट-जोड" > 
  <इनपुट वर्ग = "span2" id = "जोडिल्लेंइनपुटबटण " प्रकार = "मजकूर" >   
  <बटण वर्ग = "btn" प्रकार = "बटण" > जा! </बटण> हें नांव  
</div> हें नांव

<div वर्ग = "इनपुट-जोड" > 
  <इनपुट वर्ग = "span2" id = "जोडलेलेइनपुटबटण " प्रकार = "मजकूर" >   
  <बटण वर्ग = "btn" प्रकार = "बटण" > सोद </बटण>  
  <बटण वर्ग = "btn" प्रकार = "बटण" > पर्याय </बटण>  
</div> हें नांव

बटण ड्रॉपडावन करतात

<div वर्ग = "इनपुट-जोड" > 
  <इनपुट वर्ग = "span2" id = "जोडिल्लेंड्रॉपडावनबटण " प्रकार = "मजकूर" >   
  <div वर्ग = "बीटीएन-समूह" > 
    <बटण वर्ग = "btn ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" >  
      कृती
      <span वर्ग = "कॅरेट" </span> 
    </बटण> हें नांव
    <ul वर्ग = "ड्रॉपडावन-मेनू" > 
      ...
    </ul> हें नांव
  </div> हें नांव
</div> हें नांव

<div वर्ग = "इनपुट-प्रीपेंड" > 
  <div वर्ग = "बीटीएन-समूह" > 
    <बटण वर्ग = "btn ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" >  
      कृती
      <span वर्ग = "कॅरेट" </span> 
    </बटण> हें नांव
    <ul वर्ग = "ड्रॉपडावन-मेनू" > 
      ...
    </ul> हें नांव
  </div> हें नांव
  <इनपुट वर्ग = "span2" id = "prependedDropdownButton" प्रकार = "मजकूर" >   
</div> हें नांव

<div class = "इनपुट-प्रीपेंड इनपुट-एपेंड" > 
  <div वर्ग = "बीटीएन-समूह" > 
    <बटण वर्ग = "btn ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" >  
      कृती
      <span वर्ग = "कॅरेट" </span> 
    </बटण> हें नांव
    <ul वर्ग = "ड्रॉपडावन-मेनू" > 
      ...
    </ul> हें नांव
  </div> हें नांव
  <इनपुट वर्ग = "span2" id = "जोडलेलेउपरांतड्रॉपडावनबटण " प्रकार = "मजकूर" >   
  <div वर्ग = "बीटीएन-समूह" > 
    <बटण वर्ग = "btn ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" >  
      कृती
      <span वर्ग = "कॅरेट" </span> 
    </बटण> हें नांव
    <ul वर्ग = "ड्रॉपडावन-मेनू" > 
      ...
    </ul> हें नांव
  </div> हें नांव
</div> हें नांव

विभागणी केल्ले ड्रॉपडावन गट

<रूप> हें नांव
  <div वर्ग = "इनपुट-प्रीपेंड" > 
    <div वर्ग = "बीटीएन-समूह" > ... </div> 
    <इनपुट प्रकार = "मजकूर" > 
  </div> हें नांव
  <div वर्ग = "इनपुट-जोड" > 
    <इनपुट प्रकार = "मजकूर" > 
    <div वर्ग = "बीटीएन-समूह" > ... </div> 
  </div> हें नांव
</form> हें नांव

सोद फॉर्म

<form class = "फॉर्म-सोद" > 
  <div वर्ग = "इनपुट-जोड" > 
    <इनपुट प्रकार = "मजकूर" वर्ग = "span2 सोद-क्वेरी" >  
    <बटण प्रकार = "सबमिट" वर्ग = "btn" > सोद </बटण>  
  </div> हें नांव
  <div वर्ग = "इनपुट-प्रीपेंड" > 
    <बटण प्रकार = "सबमिट" वर्ग = "btn" > सोद </बटण>  
    <इनपुट प्रकार = "मजकूर" वर्ग = "span2 सोद-क्वेरी" >  
  </div> हें नांव
</form> हें नांव

आकारमानाचेर नियंत्रण दवरप

.input-largeवर्ग वापरून तुमच्या इनपुटांक ग्रिड स्तंभ आकारां सारके वा जुळोवपी सापेक्ष आकारमान वर्ग वापरात .span*.

ब्लॉक पातळेचे इनपुट

खंयच्याय <input>वा <textarea>घटकाक ब्लॉक पातळेच्या घटकाभशेन वागपाक लावचें.

<इनपुट वर्ग = "इनपुट-ब्लॉक-पातळी" प्रकार = "मजकूर" प्लेसहोल्डर = ".इनपुट-ब्लॉक-स्तर" >

सापेक्ष आकारमान करप

<इनपुट वर्ग = "इनपुट-मिनी" प्रकार = "मजकूर" प्लेसहोल्डर = ".इनपुट-मिनी" >   
<इनपुट वर्ग = "इनपुट-ल्हान" प्रकार = "मजकूर" प्लेसहोल्डर = ".इनपुट-ल्हान" >   
<इनपुट वर्ग = "इनपुट-माध्यम" प्रकार = "मजकूर" प्लेसहोल्डर = ".इनपुट-माध्यम" >   
<इनपुट वर्ग = "इनपुट-लार्ज" प्रकार = "मजकूर" प्लेसहोल्डर = ".इनपुट-लार्ज" >   
<इनपुट वर्ग = "इनपुट-xlarge" प्रकार = "मजकूर" प्लेसहोल्डर = ".इनपुट-xlarge" >   
<इनपुट वर्ग = "इनपुट-xxlarge" प्रकार = "मजकूर" प्लेसहोल्डर = ".इनपुट-xxlarge" >

तकली वयर काडटा!फुडल्या आवृत्त्यांनी, आमी आमच्या बटण आकारांकडेन जुळोवपाखातीर ह्या सापेक्ष इनपुट वर्गांचो वापर बदलतले. देखीक, .input-largeइनपुटाचें पॅडींग आनी फॉन्ट-आकार वाडयतले.

जाळी आकारमान करप

ग्रिड स्तंभांच्या समान आकारांकडेन जुळपी इनपुटांखातीर .span1to वापरात ..span12

<इनपुट वर्ग = "span1" प्रकार = "मजकूर" प्लेसहोल्डर = ".span1" >   
<इनपुट वर्ग = "span2" प्रकार = "मजकूर" प्लेसहोल्डर = ".span2" >   
<इनपुट वर्ग = "span3" प्रकार = "मजकूर" प्लेसहोल्डर = ".span3" >   
< वर्ग निवडात = "span1" > 
  ...
</निवडचें>
< वर्ग निवडात = "span2" > 
  ...
</निवडचें>
< वर्ग निवडात = "span3" > 
  ...
</निवडचें>

दर ओळीक जायत्या ग्रिड इनपुटांखातीर, योग्य अंतराखातीर संशोधक वर्ग वापरात.controls-row . तो व्हाइट-स्पेस कोसपाक इनपुट फ्लोट करता, योग्य मार्जिन सेट करता आनी फ्लोट निवळ करता.

<div वर्ग = "नियंत्रण" > 
  <इनपुट वर्ग = "span5" प्रकार = "मजकूर" प्लेसहोल्डर = ".span5" >   
</div> हें नांव
<div class = "नियंत्रण-ओळ नियंत्रीत करता" > 
  <इनपुट वर्ग = "span4" प्रकार = "मजकूर" प्लेसहोल्डर = ".span4" >   
  <इनपुट वर्ग = "span1" प्रकार = "मजकूर" प्लेसहोल्डर = ".span1" >   
</div> हें नांव
...

संपादन करपाक शकना अशे इनपुट

प्रत्यक्ष फॉर्म मार्कअप वापरिनासतना संपादन करपाक मेळना अशा फॉर्मांत डेटा सादर करचो.

<span class = "input-xlarge uneditable-input" > हांगा कांय मोल </span>

कृती तयार करतात

कृतीच्या गटान (बटणां) एक फॉर्म सोंपयतले. a भितर दवरल्यार .form-actions, बटणां आपोआप फॉर्म नियंत्रणां वांगडा लायन करपाक इंडेंट जातलीं.

<div class = "रूप-क्रिया" > 
  <button type = "submit" class = "btn btn-primary" > बदल जतनाय घेयात </button>  
  <बटण प्रकार = "बटण" वर्ग = "btn" > रद्द करचें </बटण>  
</div> हें नांव

मदत मजकूर

फॉर्म नियंत्रणां भोंवतणी दिसपी मदत मजकूराखातीर इनलायन आनी ब्लॉक पातळेचो आदार.

इनलायन मदत

<input type = "text" ><span class = "मदत-इनलायन" > इनलायन मदत मजकूर </span>

मदत आडावप

<input type = "text" ><span class = "help-block" > मदत मजकूराचो एक लांब ब्लॉक जो नव्या ओळीचेर मोडटा आनी एका ओळी भायर पातळूंक शकता. </span> हें नांव

फॉर्म नियंत्रण राज्यां

फॉर्म नियंत्रण आनी लेबलां विशीं मुळाव्या प्रतिसाद राज्यां सयत वापरप्यांक वा भेट दिवप्यांक प्रतिसाद दिवप.

इनपुट फोकस करप

outlineआमी कांय फॉर्म नियंत्रणांचेर मुलभूत शैली काडून उडयतात आनी box-shadowताचे सुवातेर a लागू करतात :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "हें केंद्रीत आसा..." >

अवैध इनपुट

कडेन मुलभूत ब्राउझर कार्यक्षमताय वरवीं शैली इनपुट :invalid. a निर्देशीत करात , क्षेत्र पर्यायी ना जाल्यार गुणधर्म typeजोडात , आनी (लागू आसल्यार) a निर्देशीत करात .requiredpattern

CSS छद्म निवडकांक तेंको नाशिल्ल्यान Internet Explorer 7-9 च्या आवृत्त्यांनी हें उपलब्ध ना.

<input class = "span3" प्रकार = "ईमेल" जाय >

अक्षम केल्ले इनपुट

disabledवापरपी इनपुट आडावपाक आनी मात्सो वेगळो देखावो सुरू करपाक इनपुटाचेर गुणधर्म जोडात .

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "हांगा इनपुट अक्षम केला..." अक्षम केला >

प्रमाणीकरण राज्यां

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

<div class = "नियंत्रण-समूह शिटकावणी" > 
  <label class = "control-label" for = "inputWarning" > शिटकावणी आशिल्ली इनपुट </label>  
  <div वर्ग = "नियंत्रण" > 
    <इनपुट प्रकार = "मजकूर" id = "इनपुटचेतावणी" >  
    <span class = "help-inline" > कितें तरी चुकलां आसूं येता </span> 
  </div> हें नांव
</div> हें नांव
 
<div class = "नियंत्रण-समूह त्रुटी" > 
  <label class = "control-label" for = "inputError" > त्रुटी वांगडा इनपुट </label>  
  <div वर्ग = "नियंत्रण" > 
    <इनपुट प्रकार = "मजकूर" id = "इनपुटError" >  
    <span class = "help-inline" > उपकार करून त्रुटी दुरुस्त करात </span> 
  </div> हें नांव
</div> हें नांव
 
<div class = "नियंत्रण-समूह माहिती" > 
  <label class = "control-label" for = "inputInfo" > म्हायती वांगडा इनपुट </label>  
  <div वर्ग = "नियंत्रण" > 
    <इनपुट प्रकार = "मजकूर" id = "इनपुट इन्फो" >  
    <span class = "help-inline" > वापरप्याचें नांव पयलींच घेतलां </span> 
  </div> हें नांव
</div> हें नांव
 
<div class = "नियंत्रण-समूह यशस्वी" > 
  <label class = "control-label" for = "inputSuccess" > यशस्वीपणान इनपुट करात </label>  
  <div वर्ग = "नियंत्रण" > 
    <इनपुट प्रकार = "मजकूर" id = "इनपुटसक्सेस" >  
    <span class = "मदत-इनलायन" > वूहू! </span> हें नांव 
  </div> हें नांव
</div> हें नांव

मुलभूत बटण

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

बटन	वर्ग="" हें नांव.	वर्णन
	`btn`	ग्रेडियेंट आशिल्लें मानक राशीचें बटण
	`btn btn-primary`	अतिरिक्त दृश्य वजन पुरवण करता आनी बटणांच्या संचांत प्राथमीक कृती वळखता
	`btn btn-info`	मुलभूत शैलींचो पर्याय म्हणून वापरतात
	`btn btn-success`	यशस्वी वा सकारात्मक कृती दाखयता
	`btn btn-warning`	हे कृती वांगडा जतनाय घेवची अशें दाखयता
	`btn btn-danger`	धोक्याची वा संभाव्य नकारात्मक कृती दाखयता
	`btn btn-inverse`	पर्यायी गडद करड्या रंगाचें बटण, अर्थक्रिया वा वापराक बांदिल्लें न्हय
	`btn btn-link`	बटण वागणूक सांबाळून दवरतना बटणाक दुव्या सारकें करून बटणाचेर चड भर दिवचो

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

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

बटणाचे आकार

फॅन्सी व्हडले वा ल्हान बटण? अतिरिक्त आकारांखातीर .btn-large, .btn-small, वा जोडात ..btn-mini

<p> हें नांव
  <button class = "btn btn-large btn-primary" प्रकार = "बटण" > व्हड बटण </बटण>  
  <button class = "btn btn-large" type = "बटण" > व्हडलें बटण </बटण>  
</p> हें नांव
<p> हें नांव
  <बटण वर्ग = "btn btn-primary" प्रकार = "बटण" > मुलभूत बटण </बटण>  
  <बटण वर्ग = "btn" प्रकार = "बटण" > मुलभूत बटण </बटण>  
</p> हें नांव
<p> हें नांव
  <बटण वर्ग = "btn btn-ल्हान btn-प्राथमिक" प्रकार = "बटण" > ल्हान बटण </बटण>  
  <बटण वर्ग = "btn btn-ल्हान" प्रकार = "बटण" > ल्हान बटण </बटण>  
</p> हें नांव
<p> हें नांव
  <बटण वर्ग = "btn btn-मिनी btn-प्राथमिक" प्रकार = "बटण" > मिनी बटण </बटण>  
  <बटण वर्ग = "btn btn-mini" प्रकार = "बटण" > मिनी बटण </बटण>  
</p> हें नांव

ब्लॉक पातळेचे बटण तयार करात-जे पालकाची पुराय रुंदाय पातळटात- जोडून .btn-block.

<button class = "btn btn-large btn-block btn-primary" प्रकार = "बटण" > ब्लॉक पातळी बटण </बटण>  
<button class = "btn btn-large btn-block" type = "बटण" > ब्लॉक पातळी बटण </बटण>

अक्षम स्थिती

बटणां परतून 50% फीकी करून क्लिक करपाक शकना अशें दिसपाक करात.

एंकर तत्व

बटणां कडेन .disabledवर्ग जोडात .<a>

प्राथमीक दुवो लिंक

<a href = "#" class = "btn btn-large btn-प्राथमिक अक्षम" > प्राथमीक दुवो </a>  
<a href = "#" class = "btn btn-large अक्षम" > दुवो </a>

तकली वयर काडटा!आमी .disabledहांगा एक उपयुक्तताय वर्ग म्हणून वापरतात, सामान्य वर्गा सारकोच .active, देखून उपसर्गाची गरज ना. तशेंच, हो वर्ग फकत सौंदर्यशास्त्रा खातीर आसता; हांगा दुवे अक्षम करपाक तुमी सानुकूल जावास्क्रिप्ट वापरपाक जाय.

बटण तत्व

बटणां कडेन disabledगुणधर्म जोडात .<button>

<बटण प्रकार = "बटण" वर्ग = "btn btn-large btn-प्राथमिक अक्षम" अक्षम = "अक्षम" > प्राथमीक बटण </बटण>   
<बटण प्रकार = "बटण" वर्ग = "btn btn-large" अक्षम > बटण </बटण>

एक वर्ग, जायते टॅग

, , वा घटकाचेर .btnवर्ग वापरात .<a><button><input>

<a class = "btn" href = "" > दुवो </a>  
<बटण वर्ग = "btn" प्रकार = "सबमिट" > बटण </बटण>  
<इनपुट वर्ग = "btn" प्रकार = "बटण" मूल्य = "इनपुट" >   
<input class = "btn" type = "सबमिट" मूल्य = "सबमिट" >

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

<img>खंयच्याय प्रकल्पांत प्रतिमा सहज शैली करपाक एका घटकाक वर्ग जोडात .

<img src = "..." वर्ग = "img-गोल" >  
<img src = "..." वर्ग = "img-सर्कल" >  
<img src = "..." वर्ग = "इमजी-पोलारॉयड" >

तकली वयर काडटा! .img-roundedआनी आदार .img-circleनाशिल्ल्यान IE7-8 त काम करिनात border-radius.

चिन्न ग्लिफ

स्प्राइट स्वरुपांत 140 चिन्नां, गडद करड्या रंगांत (मुळावें) आनी धव्या रंगांत उपलब्ध आसात, Glyphicons कडल्यान पुरवण केल्या .

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

ग्लिफिकॉन्स एट्रिब्यूशन

Glyphicons Halflings सादारणपणान फुकट उपलब्ध नात, पूण Bootstrap आनी Glyphicons निर्मात्यां मदल्या वेवस्थेक लागून तुमकां विकसक म्हणून कसलोच खर्च करिनासतना हें शक्य केलां. उपकार म्हणून, आमी तुमकां सांगतात की जेन्ना वेव्हारीक जाता तेन्ना Glyphicons कडेन परतून पर्यायी दुवो समाविष्ट करचो.

वापर कसो करचो

सगळ्या चिन्नांक <i>एक खाशेलो वर्ग आशिल्लो टॅग जाय पडटा, ताचो उपसर्ग icon-. वापरपाक, सकयल दिल्लो कोड फकत खंयच्याय सुवातेर दवरात:

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

तशेंच उलट्या (धव्या) चिन्नांखातीर शैली उपलब्ध आसात, एक अतिरिक्त वर्ग घेवन तयार केल्यात. आमी हो वर्ग खासा करून nav आनी ड्रॉपडावन दुव्यां खातीर होवर आनी सक्रिय राज्यांचेर लागू करतले.

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

तकली वयर काडटा!मजकूराच्या बाजूक स्ट्रिंग वापरतना, बटणां वा nav दुव्यां प्रमाणें, <i>योग्य अंतराखातीर टॅगा उपरांत सुवात सोडपाची खात्री करात.

चिन्न उदाहरणां

बटणां, साधनपट्टी खातीर बटण गट, नेव्हिगेशन, वा पूर्वप्रलंबित फॉर्म इनपुटांत तांचो वापर करचो.

बटणां घालतात

बटण साधनपट्टींत बटण गट

<div वर्ग = "btn-साधनपट्टी" > 
  <div वर्ग = "बीटीएन-समूह" > 
    <a class = "btn" href = "#" ><i class = "चिन्न-संरेखित-डावें" ></i></a>   
    <a class = "btn" href = "#" ><i class = "चिन्न-संरेखित-केंद्र" ></i></a>   
    <a class = "btn" href = "#" ><i class = "चिन्न-संरेखित-उजवें" ></i></a>   
    <a class = "btn" href = "#" ><i class = "चिन्न-संरेखित-समर्थन" ></i></a>   
  </div> हें नांव
</div> हें नांव

बटण गटांत ड्रॉपडावन

वापरपी

<div वर्ग = "बीटीएन-समूह" > 
  <a class = "btn btn-primary" href = "#" ><i class = "चिन्न-वापरपी चिन्न-धवें" ></i> वापरपी </a>   
  <a वर्ग = "btn btn-प्राथमिक ड्रॉपडावन-टॉगल" data-toggle = "ड्रॉपडावन" href = "#" ><span वर्ग = "कॅरेट" ></span></a>    
  <ul वर्ग = "ड्रॉपडावन-मेनू" > 
    <li><a href = "#" ><i class = "चिन्न-पेन्सिल" </i> संपादन करचें </a></li>  
    <li><a href = "#" ><i class = "चिन्न-कचरो" </i> काडून उडोवप </a></li>  
    <li><a href = "#" ><i class = "चिन्न-बॅन-सर्कल" ></i> बंदी </a></li>  
    <li वर्ग = "विभाजक" </li> 
    <li><a href = "#" ><i class = "i" </i> प्रशासन करचें </a></li>  
  </ul> हें नांव
</div> हें नांव

बटणाचे आकार

नखेत्र नखेत्र नखेत्र

<a class = "btn btn-large" href = "#" ><i class = "चिन्न-तारा" </i> तारो </a>   
<a class = "btn btn-small" href = "#" ><i class = "चिन्न-तारा" </i> तारो </a>   
<a class = "btn btn-mini" href = "#" ><i class = "चिन्न-तारा" </i> तारो </a>

नेव्हिगेशन करप

<ul वर्ग = "nav नव-सूची" > 
  <li class = "सक्रीय" ><a href = "#" ><i class = "चिन्न-घर चिन्ह-धवें" </i> घर </a></li>   
  <li><a href = "#" ><i class = "चिह्न-पुस्तक" </i> लायब्ररी </a></li>  
  <li><a href = "#" ><i class = "चिन्न-पेन्सिल" </i> अनुप्रयोग </a></li>  
  <li><a href = "#" ><i वर्ग = "हांव" </i> विविध </a></li>  
</ul> हें नांव

फॉर्म शेतां

<div वर्ग = "नियंत्रण-समूह" > 
  <label class = "control-label" for = "inputIcon" > ईमेल पत्तो </label>  
  <div वर्ग = "नियंत्रण" > 
    <div वर्ग = "इनपुट-प्रीपेंड" > 
      <span class = "एड-ऑन" ><i class = "चिन्न-लिफाफा" ></i></span>  
      <इनपुट वर्ग = "span2" id = "इनपुट Icon" प्रकार = "मजकूर" >   
    </div> हें नांव
  </div> हें नांव
</div> हें नांव

मुद्रणकला

शीर्षकां

h1. शीर्षक 1

h2. शीर्षक 2

h3 हें नांव. शीर्षक 3

h4 हें नांव. शीर्षक 4

h5. शीर्षक 5

h6 हें नांव. शीर्षक 6

शरीराची प्रत

शिंशें बॉडी कॉपी

कमी घेवन बांदिल्लें

भर दिवप

<small>

ठळक

इटालिक

संरेखण वर्ग

भर दिवपाचे वर्ग

संक्षेप

<abbr>

<abbr class="initialism">

संबोधन करता

<address>

ब्लॉककोट्स हांचो आस्पाव जाता

मुलभूत ब्लॉककोट

ब्लॉककोट पर्याय

एका स्रोताचें नांव दिवप

पर्यायी प्रदर्शनां करप

यादी दिता

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

आदेश दिलो

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

इनलायन

वर्णन

आडवें वर्णन

संहिता

इनलायन

मुळावो ब्लॉक

कोश्टकां

मुलभूत शैली

पर्यायी वर्ग

.table-striped

.table-bordered

.table-hover

.table-condensed

पर्यायी ओळी वर्ग

समर्थीत कोश्टक मार्कअप

रूपां

मुलभूत शैली

पर्यायी मांडावळी

सोद फॉर्म

इनलायन फॉर्म

आडवें रूप

समर्थीत फॉर्म नियंत्रणां

आदान-प्रदान करतात

पाठक्षेत्र

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

मुलभूत (स्टॅक केल्लें) .

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

निवडटा

फॉर्म नियंत्रणांचो विस्तार करप

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

मुलभूत पर्याय

एकठांय केल्लें

मजकूर बदला बटण

बटण ड्रॉपडावन करतात

विभागणी केल्ले ड्रॉपडावन गट

सोद फॉर्म

आकारमानाचेर नियंत्रण दवरप

ब्लॉक पातळेचे इनपुट

सापेक्ष आकारमान करप

जाळी आकारमान करप

संपादन करपाक शकना अशे इनपुट

कृती तयार करतात

मदत मजकूर

इनलायन मदत

मदत आडावप

फॉर्म नियंत्रण राज्यां

इनपुट फोकस करप

अवैध इनपुट

अक्षम केल्ले इनपुट

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`