मथळे

सर्व एचटीएमएल शीर्षके <h1>उपलब्ध <h6>आहेत.

h1. मथळा १

h2. मथळा 2

h3. मथळा 3

h4. मथळा 4

h5. मथळा 5

h6. मथळा 6

शरीराची प्रत

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

नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नरे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रिकेस वाहने.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

लीड बॉडी कॉपी

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ड्यूस मोलिस, हे नॉन कमोडो लक्टस आहे.

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

कमी सह बांधले

टायपोग्राफिक स्केल variables.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 वर्ग = "मजकूर-उजवे" > उजवीकडे संरेखित मजकूर. </p>

भर वर्ग

मूठभर भर युटिलिटी क्लासेससह रंगाद्वारे अर्थ व्यक्त करा.

फ्यूस डॅपीबस, टेलस एसी कर्सस कमोडो, टॉर्टर मौरिस निभ.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p वर्ग = "निःशब्द" > फ्यूस डॅपिबस, टेलस एसी कर्स कमोडो, टॉर्टर मौरिस निभ. </p> 
<p वर्ग = "टेक्स्ट-चेतावणी" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

लघुरुपे

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

`<abbr>`

संक्षेपाच्या लांब होवरवर विस्तारित मजकूरासाठी, titleविशेषता समाविष्ट करा.

विशेषता शब्दाचे संक्षेप attr आहे .

<abbr शीर्षक = "विशेषता" > attr </abbr>

`<abbr class="initialism">`

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

स्लाईस ब्रेड नंतर HTML ही सर्वोत्तम गोष्ट आहे.

<abbr शीर्षक = "हायपरटेक्स्ट मार्कअप भाषा" वर्ग = "प्रारंभ" > HTML </abbr>

पत्ते

जवळच्या पूर्वजांसाठी किंवा कामाच्या संपूर्ण भागासाठी संपर्क माहिती सादर करा.

`<address>`

सह सर्व ओळी समाप्त करून स्वरूपन जतन करा <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

पूर्ण नाव
[email protected]

<address>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  सॅन फ्रान्सिस्को, CA 94107 <br>
  <abbr शीर्षक = "फोन" > P: </abbr> (१२३) ४५६-७८९० 
</address>
 
<address>
  <strong> पूर्ण नाव </strong><br>
  <a href="mailto:#" > [email protected] </a> _ _ 
</address>

ब्लॉककोट्स

तुमच्या दस्तऐवजातील दुसर्‍या स्रोतावरील सामग्रीचे ब्लॉक्स उद्धृत करण्यासाठी.

डीफॉल्ट ब्लॉककोट

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante. </p>
</blockquote>

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

मानक ब्लॉककोटवर साध्या भिन्नतेसाठी शैली आणि सामग्री बदल.

स्त्रोताचे नाव देणे

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante.
स्रोत शीर्षक मध्ये प्रसिद्ध कोणीतरी

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante. </p>
  <small> कोणीतरी प्रसिद्ध <cite title = "Source Title" > स्रोत शीर्षक </cite></small> 
</blockquote>

पर्यायी डिस्प्ले

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante.
स्रोत शीर्षक मध्ये प्रसिद्ध कोणीतरी

<blockquote वर्ग = "पुल-राइट" > 
  ...
</blockquote>

याद्या

क्रमरहित

आयटमची सूची ज्यामध्ये ऑर्डर स्पष्टपणे फरक पडत नाही .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
नुल्ला volutpat aliquam velit
- फॅसेलस आयकुलिस नेक
- पुरूस सोडलेस ultricies
- वेस्टिबुलम लाओरेट पोर्टिटर सेम
- Ac tristique libero volutpat येथे
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
porttitor lorem Eget

<ul>
  <li> ... </li>
</ul>

आज्ञा केली

आयटमची सूची ज्यामध्ये ऑर्डर स्पष्टपणे महत्त्वाची आहे.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
नुल्ला volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
porttitor lorem Eget

<ol>
  <li> ... </li>
</ol>

अनस्टाइल

list-styleसूची आयटमवरील डीफॉल्ट आणि डावे पॅडिंग काढा (फक्त तात्काळ मुलांसाठी).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
नुल्ला volutpat aliquam velit
- फॅसेलस आयकुलिस नेक
- पुरूस सोडलेस ultricies
- वेस्टिबुलम लाओरेट पोर्टिटर सेम
- Ac tristique libero volutpat येथे
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
porttitor lorem Eget

<ul class = "unstyled" > 
  <li> ... </li>
</ul>

इनलाइन

सर्व सूची आयटम एका ओळीवर inline-blockआणि काही हलके पॅडिंगसह ठेवा.

Lorem ipsum
फॅसेलस आयकुलिस
नुल्ला वोलतपाट

<ul class = "इनलाइन" > 
  <li> ... </li>
</ul>

वर्णन

त्यांच्या संबंधित वर्णनांसह संज्ञांची सूची.

वर्णन याद्या: अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.
Euismod: Vestibulum id ligula porta felis euismod Semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
मालेसुडा पोर्टा: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

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

अटी आणि वर्णने <dl>शेजारी-शेजारी करा.

वर्णन याद्या: अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.
Euismod: Vestibulum id ligula porta felis euismod Semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
मालेसुडा पोर्टा: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, टेलस ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl वर्ग = "dl-क्षैतिज" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

सावधान!क्षैतिज वर्णन सूची डाव्या स्तंभ निराकरणात बसण्यासाठी खूप लांब असलेल्या अटी कापून टाकतील text-overflow. अरुंद व्ह्यूपोर्टमध्ये, ते डीफॉल्ट स्टॅक केलेल्या लेआउटमध्ये बदलतील.

इनलाइन

सह कोडचे इनलाइन स्निपेट गुंडाळा <code>.

उदाहरणार्थ, <section>इनलाइन म्हणून गुंडाळले पाहिजे.

उदाहरणार्थ , <code > & lt ; विभाग & gt ;</ code > इनलाइन म्हणून गुंडाळले जावे .

मूलभूत ब्लॉक

<pre>कोडच्या एकाधिक ओळींसाठी वापरा . योग्य रेंडरिंगसाठी कोडमधील कोणत्याही कोन कंसातून बाहेर पडण्याची खात्री करा.

<p>येथे नमुना मजकूर...</p>

<पूर्व>
  <p>येथे नमुना मजकूर...</p>
</pre>

सावधान!टॅगमधील कोड <pre>शक्य तितक्या डावीकडे ठेवण्याची खात्री करा; ते सर्व टॅब रेंडर करेल.

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

डीफॉल्ट शैली

बेसिक स्टाइलसाठी—लाइट पॅडिंग आणि फक्त क्षैतिज डिव्हायडर— .tableकोणत्याही मध्ये बेस क्लास जोडा <table>.

#	पहिले नाव	आडनाव	वापरकर्तानाव
१	खूण करा	ओटो	@mdo
2	जेकब	थॉर्नटन	@फॅट
3	लॅरी	पक्षी	@ट्विटर

<टेबल वर्ग = "टेबल" > 
  …
</ टेबल>

पर्यायी वर्ग

.tableखालीलपैकी कोणताही वर्ग बेस क्लासमध्ये जोडा .

`.table-striped`

CSS सिलेक्टरद्वारे (IE7-8 मध्ये उपलब्ध नाही) मध्ये <tbody>कोणत्याही टेबल पंक्तीमध्ये झेब्रा-स्ट्रीपिंग जोडते .:nth-child

#	पहिले नाव	आडनाव	वापरकर्तानाव
१	खूण करा	ओटो	@mdo
2	जेकब	थॉर्नटन	@फॅट
3	लॅरी	पक्षी	@ट्विटर

<टेबल वर्ग = "टेबल टेबल-स्ट्रीप" > 
  …
</ टेबल>

`.table-bordered`

टेबलवर किनारी आणि गोलाकार कोपरे जोडा.

#	पहिले नाव	आडनाव	वापरकर्तानाव
१	खूण करा	ओटो	@mdo
१	खूण करा	ओटो	@getbootstrap
2	जेकब	थॉर्नटन	@फॅट
3	लॅरी द बर्ड		@ट्विटर

<टेबल वर्ग = "टेबल टेबल-बॉर्डर" > 
  …
</ टेबल>

`.table-hover`

टेबलच्या पंक्तींवर होव्हर स्थिती सक्षम करा <tbody>.

#	पहिले नाव	आडनाव	वापरकर्तानाव
१	खूण करा	ओटो	@mdo
2	जेकब	थॉर्नटन	@फॅट
3	लॅरी द बर्ड		@ट्विटर

<टेबल वर्ग = "टेबल टेबल-होवर" > 
  …
</ टेबल>

`.table-condensed`

सेल पॅडिंग अर्ध्यामध्ये कापून टेबल अधिक कॉम्पॅक्ट बनवते.

#	पहिले नाव	आडनाव	वापरकर्तानाव
१	खूण करा	ओटो	@mdo
2	जेकब	थॉर्नटन	@फॅट
3	लॅरी द बर्ड		@ट्विटर

<टेबल वर्ग = "टेबल टेबल-कंडेन्स्ड" > 
  …
</ टेबल>

पर्यायी पंक्ती वर्ग

सारणीच्या पंक्ती रंगविण्यासाठी संदर्भित वर्ग वापरा.

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

#	उत्पादन	पेमेंट घेतले	स्थिती
१	टीबी - मासिक	०१/०४/२०१२	मंजूर
2	टीबी - मासिक	०२/०४/२०१२	नकार दिला
3	टीबी - मासिक	०३/०४/२०१२	प्रलंबित
4	टीबी - मासिक	०४/०४/२०१२	पुष्टी करण्यासाठी कॉल करा

...
  < tr वर्ग = "यश" >
    <td> 1 < /td>
    <td>टीबी - मासिक</ td >
    < td > ०१/०४/२०१२ < / td >
    <td>मंजूर</ td >
  </ tr >
...

समर्थित टेबल मार्कअप

समर्थित सारणी HTML घटकांची सूची आणि ते कसे वापरावे.

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

<टेबल>
  <caption> ... </caption>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</ टेबल>

डीफॉल्ट शैली

वैयक्तिक फॉर्म नियंत्रणे स्टाइल प्राप्त करतात, परंतु मार्कअपमधील कोणत्याही आवश्यक बेस क्लासशिवाय <form>किंवा मोठ्या बदलांशिवाय. फॉर्म कंट्रोल्सच्या शीर्षस्थानी स्टॅक केलेल्या, डावीकडे संरेखित लेबलमध्ये परिणाम.

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

पर्यायी मांडणी

बूटस्ट्रॅपसह सामान्य वापराच्या प्रकरणांसाठी तीन पर्यायी फॉर्म लेआउट समाविष्ट आहेत.

शोध फॉर्म

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

<फॉर्म वर्ग = "फॉर्म-शोध" > 
  <इनपुट प्रकार = "मजकूर" वर्ग = "इनपुट-माध्यम शोध-क्वेरी" >  
  <button type = "submit" class = "btn" > शोधा </button>  
</form>

इनलाइन फॉर्म

.form-inlineकॉम्पॅक्ट लेआउटसाठी डावीकडे संरेखित लेबल आणि इनलाइन-ब्लॉक नियंत्रणांसाठी जोडा .

<फॉर्म वर्ग = "फॉर्म-इनलाइन" > 
  <इनपुट प्रकार = "टेक्स्ट" वर्ग = "इनपुट-स्मॉल" प्लेसहोल्डर = "ईमेल" >   
  <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-स्मॉल" प्लेसहोल्डर = "पासवर्ड" >   
  <लेबल वर्ग = "चेकबॉक्स" > 
    <इनपुट प्रकार = "चेकबॉक्स" > मला लक्षात ठेवा 
  </label>
  <button type = "submit" class = "btn" > साइन इन करा </button>  
</form>

क्षैतिज फॉर्म

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

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

<फॉर्म वर्ग = "फॉर्म-क्षैतिज" > 
  <div वर्ग = "कंट्रोल-ग्रुप" > 
    <label class = "control-label" for = "inputEmail" > ईमेल </label>  
    <div वर्ग = "नियंत्रण" > 
      <इनपुट प्रकार = "text" id = "inputEmail" प्लेसहोल्डर = "ईमेल" >   
    </div>
  </div>
  <div वर्ग = "कंट्रोल-ग्रुप" > 
    <label class = "control-label" for = "inputPassword" > पासवर्ड </label>  
    <div वर्ग = "नियंत्रण" > 
      <इनपुट प्रकार = "पासवर्ड" आयडी = "इनपुट पासवर्ड" प्लेसहोल्डर = "पासवर्ड" >   
    </div>
  </div>
  <div वर्ग = "कंट्रोल-ग्रुप" > 
    <div वर्ग = "नियंत्रण" > 
      <लेबल वर्ग = "चेकबॉक्स" > 
        <इनपुट प्रकार = "चेकबॉक्स" > मला लक्षात ठेवा 
      </label>
      <button type = "submit" class = "btn" > साइन इन करा </button>  
    </div>
  </div>
</form>

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

उदाहरण फॉर्म लेआउटमध्ये समर्थित मानक फॉर्म नियंत्रणांची उदाहरणे.

इनपुट्स

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

नेहमी निर्दिष्ट वापरणे आवश्यक आहे type.

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

मजकूर

मजकूराच्या एकाधिक ओळींना समर्थन देणारे फॉर्म नियंत्रण. rowsआवश्यकतेनुसार विशेषता बदला .

<textarea पंक्ती = "3" ></textarea>

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

चेकबॉक्स हे सूचीतील एक किंवा अनेक पर्याय निवडण्यासाठी असतात तर रेडिओ अनेक पर्यायांमधून एक पर्याय निवडण्यासाठी असतात.

डीफॉल्ट (स्टॅक केलेले)

<लेबल वर्ग = "चेकबॉक्स" > 
  <इनपुट प्रकार = "चेकबॉक्स" मूल्य = "" >  
  पर्याय एक हा आहे आणि तो—ते छान का आहे ते समाविष्ट करण्याचे सुनिश्चित करा
</label>
 
<लेबल वर्ग = "रेडिओ" > 
  <इनपुट प्रकार = "रेडिओ" नाव = "optionsRadios" id = "optionsRadios1 " मूल्य = "option1" चेक केलेले >     
  पर्याय एक हा आहे आणि तो—ते छान का आहे ते समाविष्ट करण्याचे सुनिश्चित करा
</label>
<लेबल वर्ग = "रेडिओ" > 
  <इनपुट प्रकार = "रेडिओ" नाव = "optionsRadios" id = "optionsRadios2 " मूल्य = "option2" >    
  पर्याय दोन काहीतरी वेगळे असू शकतात आणि ते निवडल्याने पर्याय एकची निवड रद्द केली जाईल
</label>

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

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

<लेबल वर्ग = "चेकबॉक्स इनलाइन" > 
  <इनपुट प्रकार = "checkbox " id = "inlineCheckbox1" मूल्य = "option1" > 1   
</label>
<लेबल वर्ग = "चेकबॉक्स इनलाइन" > 
  <इनपुट प्रकार = "checkbox " id = "inlineCheckbox2" value = "option2" > 2   
</label>
<लेबल वर्ग = "चेकबॉक्स इनलाइन" > 
  <इनपुट प्रकार = "चेकबॉक्स" आयडी = "इनलाइनचेकबॉक्स3" मूल्य = "पर्याय3 " > 3   
</label>

निवडते

multiple="multiple"डिफॉल्ट पर्याय वापरा किंवा एकाच वेळी अनेक पर्याय दाखवण्यासाठी a निर्दिष्ट करा .

<निवडा>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
< एकाधिक निवडा = "एकाधिक" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

फॉर्म नियंत्रणे वाढवणे

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

प्रीपेंड केलेले आणि जोडलेले इनपुट

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

डीफॉल्ट पर्याय

इनपुटमध्ये मजकूर प्रीपेंड करण्यासाठी किंवा जोडण्यासाठी दोन वर्गांपैकी एकासह an .add-onआणि an गुंडाळा.input

<div वर्ग = "इनपुट-प्रीपेंड" > 
  <span वर्ग = "अॅड-ऑन" > @ </span> 
  <input class = "span2" id = "prependedInput " type = "text" प्लेसहोल्डर = "वापरकर्तानाव" >    
</div>
<div वर्ग = "इनपुट-अपेंड" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span वर्ग = "अॅड-ऑन" > .00 </span> 
</div>

एकत्रित

.add-onप्रीपेंड आणि इनपुट जोडण्यासाठी दोन्ही वर्ग आणि दोन उदाहरणे वापरा .

<div class = "input-prepend input-append" > 
  <span वर्ग = "अॅड-ऑन" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  <span वर्ग = "अॅड-ऑन" > .00 </span> 
</div>

मजकुराऐवजी बटणे

<span>मजकुरासह ए ऐवजी, .btnइनपुटला बटण (किंवा दोन) जोडण्यासाठी a वापरा.

<div वर्ग = "इनपुट-अपेंड" > 
  <input class = "span2" id = "appendedInputButton " type = "text" >   
  <button class = "btn" type = "button" > जा! </button>  
</div>

<div वर्ग = "इनपुट-अपेंड" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "button" > शोधा </button>  
  <button class = "btn" type = "button" > पर्याय </button>  
</div>

बटण ड्रॉपडाउन

<div वर्ग = "इनपुट-अपेंड" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div वर्ग = "btn-ग्रुप" > 
    <button class = "btn dropdown-toggle" data-toggle = "ड्रॉपडाउन" >  
      कृती
      <span वर्ग = "कॅरेट" ></span> 
    </ बटन>
    <ul class = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul>
  </div>
</div>

<div वर्ग = "इनपुट-प्रीपेंड" > 
  <div वर्ग = "btn-ग्रुप" > 
    <button class = "btn dropdown-toggle" data-toggle = "ड्रॉपडाउन" >  
      कृती
      <span वर्ग = "कॅरेट" ></span> 
    </ बटन>
    <ul class = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul>
  </div>
  <इनपुट वर्ग = "span2" id = "prependedDropdownButton " type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div वर्ग = "btn-ग्रुप" > 
    <button class = "btn dropdown-toggle" data-toggle = "ड्रॉपडाउन" >  
      कृती
      <span वर्ग = "कॅरेट" ></span> 
    </ बटन>
    <ul class = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul>
  </div>
  <इनपुट वर्ग = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  <div वर्ग = "btn-ग्रुप" > 
    <button class = "btn dropdown-toggle" data-toggle = "ड्रॉपडाउन" >  
      कृती
      <span वर्ग = "कॅरेट" ></span> 
    </ बटन>
    <ul class = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul>
  </div>
</div>

खंडित ड्रॉपडाउन गट

<फॉर्म>
  <div वर्ग = "इनपुट-प्रीपेंड" > 
    <div class = "btn-group" > ... </div> 
    <इनपुट प्रकार = "मजकूर" > 
  </div>
  <div वर्ग = "इनपुट-अपेंड" > 
    <इनपुट प्रकार = "मजकूर" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

शोध फॉर्म

<फॉर्म वर्ग = "फॉर्म-शोध" > 
  <div वर्ग = "इनपुट-अपेंड" > 
    <इनपुट प्रकार = "मजकूर" वर्ग = "span2 शोध-क्वेरी" >  
    <button type = "submit" class = "btn" > शोधा </button>  
  </div>
  <div वर्ग = "इनपुट-प्रीपेंड" > 
    <button type = "submit" class = "btn" > शोधा </button>  
    <इनपुट प्रकार = "मजकूर" वर्ग = "span2 शोध-क्वेरी" >  
  </div>
</form>

नियंत्रण आकारमान

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

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

कोणतेही <input>किंवा <textarea>घटक ब्लॉक लेव्हल घटकासारखे वर्तन करा.

<input class = "input-block-level" type = "text" प्लेसहोल्डर = ".input-block-level" >

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

<input class = "input-mini" type = "text" प्लेसहोल्डर = ".input-mini" >   
<input class = "input-small" type = "text" प्लेसहोल्डर = ".input-small" >   
<इनपुट वर्ग = "इनपुट-माध्यम" प्रकार = "मजकूर" प्लेसहोल्डर = ".इनपुट-माध्यम" >   
<input class = "input-large" type = "text" प्लेसहोल्डर = ".input-large" >   
<input class = "input-xlarge" type = "text" प्लेसहोल्डर = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" प्लेसहोल्डर = ".input-xxlarge" >

सावधान!भविष्यातील आवृत्त्यांमध्ये, आम्ही आमच्या बटणाच्या आकारांशी जुळण्यासाठी या सापेक्ष इनपुट वर्गांच्या वापरामध्ये बदल करू. उदाहरणार्थ, .input-largeइनपुटचे पॅडिंग आणि फॉन्ट-आकार वाढवेल.

ग्रिड आकारमान

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

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

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

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

असंपादित इनपुट

वास्तविक फॉर्म मार्कअप न वापरता संपादन करण्यायोग्य नसलेल्या फॉर्ममध्ये डेटा सादर करा.

<span class = "input-xlarge uneditable-input" > येथे काही मूल्य </span>

फॉर्म क्रिया

क्रियांच्या गटासह (बटण) फॉर्म समाप्त करा. मध्ये ठेवल्यावर .form-actions, बटणे आपोआप फॉर्म कंट्रोल्ससह इंडेंट होतील.

<div वर्ग = "फॉर्म-क्रिया" > 
  <button type = "submit" class = "btn btn-primary" > बदल जतन करा </button>  
  <button type = "button" class = "btn" > रद्द करा </button>  
</div>

मदत मजकूर

फॉर्म कंट्रोल्सच्या आसपास दिसणार्‍या मदत मजकूरासाठी इनलाइन आणि ब्लॉक स्तर समर्थन.

इनलाइन मदत

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

मदत ब्लॉक करा

<इनपुट प्रकार = "मजकूर" ><span वर्ग = "मदत-ब्लॉक" > मदत मजकूराचा एक मोठा ब्लॉक जो नवीन ओळीत मोडतो आणि एका ओळीच्या पुढे वाढू शकतो. </span>

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

वापरकर्त्यांना किंवा अभ्यागतांना फॉर्म कंट्रोल्स आणि लेबल्सवर मूलभूत फीडबॅक स्टेटससह फीडबॅक द्या.

इनपुट फोकस

आम्ही outlineकाही फॉर्म नियंत्रणांवरील डीफॉल्ट शैली काढून टाकतो आणि box-shadowत्याच्या जागी एक लागू करतो :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "हे फोकस केलेले आहे..." >

अवैध इनपुट

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

हे इंटरनेट एक्सप्लोरर 7-9 च्या आवृत्त्यांमध्ये उपलब्ध नाही कारण CSS स्यूडो सिलेक्टर्सना समर्थन मिळत नाही.

<इनपुट वर्ग = "span3" प्रकार = "ईमेल" आवश्यक >

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

disabledवापरकर्ता इनपुट प्रतिबंधित करण्यासाठी आणि थोडे वेगळे स्वरूप ट्रिगर करण्यासाठी इनपुटवर विशेषता जोडा .

<input class = "input-xlarge" id = "disabledInput" type = "text" प्लेसहोल्डर = "येथे इनपुट अक्षम..." अक्षम >

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

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

<div वर्ग = "कंट्रोल-ग्रुप चेतावणी" > 
  <label class = "control-label" for = "inputWarning" > चेतावणीसह इनपुट </label>  
  <div वर्ग = "नियंत्रण" > 
    <इनपुट प्रकार = "text" id = "inputWarning" >  
    <span class = "help-inline" > काहीतरी चूक झाली असावी </span> 
  </div>
</div>
 
<div वर्ग = "कंट्रोल-ग्रुप एरर" > 
  <label class = "control-label" for = "inputError" > त्रुटीसह इनपुट </label>  
  <div वर्ग = "नियंत्रण" > 
    <इनपुट प्रकार = "text" id = "inputError" >  
    <span class = "help-inline" > कृपया त्रुटी दुरुस्त करा </span> 
  </div>
</div>
 
<div वर्ग = "कंट्रोल-ग्रुप माहिती" > 
  <label class = "control-label" for = "inputInfo" > माहितीसह इनपुट </label>  
  <div वर्ग = "नियंत्रण" > 
    <इनपुट प्रकार = "text" id = "inputInfo" >  
    <span class = "help-inline" > वापरकर्तानाव आधीच घेतले आहे </span> 
  </div>
</div>
 
<div वर्ग = "नियंत्रण-समूह यश" > 
  <label class = "control-label" for = "inputSuccess" > यशासह इनपुट </label>  
  <div व��्ग = "नियंत्रण" > 
    <इनपुट प्रकार = "text" id = "inputSuccess" >  
    <span class = "help-inline" > वाह! </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घटकांना जंकीफाय करते, मजकूर राखाडी रेंडरिंग ओंगळ मजकूर-सावलीसह करते ज्याचे आम्ही निराकरण करू शकत नाही.

बटण आकार

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

<p>
  <button class = "btn btn-large btn-primary" type = "button" > मोठे बटण </button>  
  <button class = "btn btn-large" type = "button" > मोठे बटण </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > डीफॉल्ट बटण </button>  
  <button class = "btn" type = "button" > डीफॉल्ट बटण </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > लहान बटण </button>  
  <button class = "btn btn-small" type = "button" > लहान बटण </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > मिनी बटण </button>  
  <button class = "btn btn-mini" type = "button" > मिनी बटण </button>  
</p>

ब्लॉक लेव्हल बटणे तयार करा—ज्या पालकांच्या पूर्ण रुंदीमध्ये असतात— जोडून .btn-block.

<button class = "btn btn-large btn-bt btn-primary" type = "button" > ब्लॉक लेव्हल बटण </button>  
<button class = "btn btn-large btn-block" type = "button" > ब्लॉक लेव्हल बटण </button>

अपंग राज्य

बटणे 50% मागे फेड करून त्यांना क्लिक न करता येणारे दिसावे.

अँकर घटक

.disabledबटणांमध्ये वर्ग जोडा <a>.

प्राथमिक दुवा दुवा

<a href = "#" वर्ग = "btn btn-large btn-primary disabled" > प्राथमिक दुवा </a>  
<a href="#" class="btn btn-large disabled" > लिंक </a> _ _

सावधान!आम्ही .disabledयेथे उपयोगिता वर्ग म्हणून वापरतो, सामान्य .activeवर्गाप्रमाणेच, त्यामुळे उपसर्ग आवश्यक नाही. तसेच, हा वर्ग केवळ सौंदर्यासाठी आहे; येथे दुवे अक्षम करण्यासाठी तुम्ही सानुकूल JavaScript वापरणे आवश्यक आहे.

बटण घटक

disabledबटणांमध्ये विशेषता जोडा <button>.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > प्राथमिक बटण </button>   
<button type = "button" class = "btn btn-large" अक्षम > बटण </button>

एक वर्ग, अनेक टॅग

, किंवा घटकावर .btnवर्ग वापरा .<a><button><input>

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

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

<img>कोणत्याही प्रकल्पातील प्रतिमा सहज शैलीत करण्यासाठी घटकामध्ये वर्ग जोडा .

<img src = "..." वर्ग = "img-rounded" >  
<img src = "..." वर्ग = "img-सर्कल" >  
<img src = "..." वर्ग = "img-polaroid" >

सावधान! .img-roundedआणि समर्थनाच्या .img-circleअभावामुळे IE7-8 मध्ये कार्य करू नका border-radius.

चिन्ह ग्लिफ्स

स्प्राईट स्वरूपात 140 चिन्ह, गडद राखाडी (डिफॉल्ट) आणि पांढर्‍या रंगात उपलब्ध, Glyphicons द्वारे प्रदान केलेले .

आयकॉन-ग्लास
आयकॉन-संगीत
चिन्ह-शोध
आयकॉन-लिफाफा
आयकॉन-हृदय
आयकॉन-स्टार
चिन्ह-तारा-रिक्त
चिन्ह-वापरकर्ता
आयकॉन-चित्रपट
आयकॉन-थ-मोठा
icon-th
icon-th-list
चिन्ह-ठीक आहे
चिन्ह काढा
आयकॉन-झूम-इन
आयकॉन-झूम-आउट
चिन्ह बंद
चिन्ह-सिग्नल
icon-cog
आयकॉन-कचरा
आयकॉन-होम
icon-file
आयकॉन-वेळ
आयकॉन-रोड
icon-download-alt
आयकॉन-डाउनलोड
चिन्ह-अपलोड
आयकॉन-इनबॉक्स
आयकॉन-प्ले-सर्कल
चिन्ह-पुनरावृत्ती
आयकॉन-रिफ्रेश
icon-list-alt
आयकॉन-लॉक
चिन्ह-ध्वज
आयकॉन-हेडफोन
आयकॉन-व्हॉल्यूम-ऑफ
आयकॉन-व्हॉल्यूम-डाउन
आयकॉन-व्हॉल्यूम-अप
icon-qrcode
आयकॉन-बारकोड
आयकॉन-टॅग
आयकॉन-टॅग
आयकॉन-बुक
चिन्ह-बुकमार्क
आयकॉन-प्रिंट
आयकॉन-कॅमेरा
आयकॉन-फॉन्ट
चिन्ह-ठळक
आयकॉन-इटालिक
चिन्ह-मजकूर-उंची
चिन्ह-मजकूर-रुंदी
चिन्ह-संरेखित-डावीकडे
आयकॉन-संरेखित-केंद्र
चिन्ह-संरेखित-उजवे
icon-align-justify
चिन्ह-सूची
आयकॉन-इंडेंट-डावीकडे
चिन्ह-इंडेंट-उजवे
आयकॉन-फेसटाइम-व्हिडिओ
आयकॉन-चित्र
आयकॉन-पेन्सिल
चिन्ह-नकाशा-मार्कर
चिन्ह समायोजित करा
आयकॉन-टिंट
चिन्ह-संपादन
icon-share
चिन्ह-तपासणी
icon-move
चिन्ह-चरण-मागे
आयकॉन-फास्ट-बॅकवर्ड
चिन्ह-मागे
आयकॉन-प्ले
चिन्ह-विराम द्या
आयकॉन-स्टॉप
चिन्ह-फॉरवर्ड
आयकॉन-फास्ट-फॉरवर्ड
आयकॉन-स्टेप-फॉरवर्ड
आयकॉन-बाहेर काढा
आयकॉन-शेवरॉन-डावीकडे
चिन्ह-शेवरॉन-उजवे
आयकॉन-प्लस-चिन्ह
चिन्ह-वजा-चिन्ह
icon-remove-sign
चिन्ह-ठीक-चिन्ह
चिन्ह-प्रश्न-चिन्ह
चिन्ह-माहिती-चिन्ह
आयकॉन-स्क्रीनशॉट
icon-remove-sircle
चिन्ह-ओके-वर्तुळ
चिन्ह-बंदी-वर्तुळ
चिन्ह-बाण-डावीकडे
चिन्ह-बाण-उजवीकडे
चिन्ह-बाण-अप
चिन्ह-बाण-खाली
icon-share-alt
icon-resize-full
icon-resize-small
आयकॉन-प्लस
चिन्ह-वजा
चिन्ह-तारका
चिन्ह-उद्गारवाचक-चिन्ह
आयकॉन-भेट
चिन्ह-पान
आयकॉन-फायर
आयकॉन-डोळा उघडा
आयकॉन-डोळा-बंद
चिन्ह-चेतावणी-चिन्ह
आयकॉन-प्लेन
आयकॉन-कॅलेंडर
चिन्ह-यादृच्छिक
चिन्ह-टिप्पणी
आयकॉन-चुंबक
आयकॉन-शेवरॉन-अप
आयकॉन-शेवरॉन-डाउन
चिन्ह-रिट्विट
आयकॉन-शॉपिंग-कार्ट
आयकॉन-फोल्डर-बंद करा
आयकॉन-फोल्डर उघडा
icon-resize-vertical
चिन्ह-आकार-क्षैतिज
icon-hdd
आयकॉन-बुलहॉर्न
आयकॉन-घंटा
चिन्ह-प्रमाणपत्र
आयकॉन-थंब्स-अप
आयकॉन-थंब्स-डाउन
चिन्ह-हात-उजवे
चिन्ह-हात-डावीकडे
आयकॉन-हँड-अप
आयकॉन-हँड-डाउन
चिन्ह-वर्तुळ-बाण-उजवे
चिन्ह-वर्तुळ-बाण-डावीकडे
चिन्ह-वर्तुळ-बाण-अप
चिन्ह-वर्तुळ-बाण-खाली
आयकॉन-ग्लोब
आयकॉन-रिंच
चिन्ह-कार्ये
आयकॉन-फिल्टर
आयकॉन-ब्रीफकेस
आयकॉन-फुलस्क्रीन

ग्लिफिकॉन विशेषता

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

कसे वापरावे

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

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

उलटे (पांढरे) चिन्हांसाठी शैली देखील उपलब्ध आहेत, एका अतिरिक्त वर्गासह तयार केले आहेत. आम्ही हा वर्ग विशेषत: नेव्ही आणि ड्रॉपडाउन लिंक्ससाठी होव्हर आणि सक्रिय स्थितींवर लागू करू.

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

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

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

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

बटणे

बटण टूलबारमधील बटण गट

<div वर्ग = "btn-टूलबार" > 
  <div वर्ग = "btn-ग्रुप" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

बटण गटामध्ये ड्रॉपडाउन

वापरकर्ता

<div वर्ग = "btn-ग्रुप" > 
  <a वर्ग = "btn btn-primary" href = "#" ><i वर्ग = "icon-user icon-white" ></i> वापरकर्ता </a>   
  <a वर्ग = "btn btn-प्राथमिक ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "ड्रॉपडाउन-मेनू" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> संपादित करा </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> हटवा </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> बंदी </a></li>  
    <li वर्ग = "विभाजक" ></li> 
    <li><a href = "#" ><i class = "i" ></i> प्रशासक बनवा </a></li>  
  </ul>
</div>

बटण आकार

तारा तारा तारा

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> तारा </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> तारा </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> तारा </a>

नेव्हिगेशन

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> होम </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> लायब्ररी </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> अनुप्रयोग </a></li>  
  <li><a href = "#" ><i वर्ग = "i" ></i> विविध </a></li>  
</ul>

फॉर्म फील्ड

<div वर्ग = "कंट्रोल-ग्रुप" > 
  <label class = "control-label" for = "inputIcon" > ईमेल पत्ता </label>  
  <div वर्ग = "नियंत्रण" > 
    <div वर्ग = "इनपुट-प्रीपेंड" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

टायपोग्राफी

मथळे

h1. मथळा १

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`