शीर्षकाणि

सर्वाणि HTML शीर्षकाणि, <h1>माध्यमेन <h6>उपलभ्यन्ते ।

ह1. शीर्षक 1

ह२. शीर्षक 2

ह३. शीर्षक 3

ह४ । शीर्षक 4

ह५ । शीर्षक 5

ह६ । शीर्षक 6

शरीर प्रतिलिपि

Bootstrap इत्यस्य वैश्विकं पूर्वनिर्धारितं 14pxfont-size अस्ति , with a of 20px . एतत् सर्वेषु च परिच्छेदेषु प्रयुक्तम् । तदतिरिक्तं, (अनुच्छेदाः) स्वस्य रेखा-उच्चतायाः आर्धस्य (पूर्वनिर्धारितरूपेण 10px) अधः मार्जिनं प्राप्नुवन्ति ।line-height<body><p>

Nullam quis risus eget उर्ना mollis ornare वेल ईउ लियो. सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus. नुल्लम इद डोलोर इद निभ उल्ट्रिसीस वेहिकुला।

सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus. Donec ullamcorper nulla गैर metus नीलामी fringilla. Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula, eget lacinia odio सेम nec अभिजात वर्ग. Donec ullamcorper nulla गैर metus नीलामी fringilla.

Maecenas sed diam eget risus varius blandit बैठना amet गैर मैग्ना. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula, eget lacinia odio सेम nec अभिजात वर्ग.

<p> ... </p> इति

सीसा शरीर प्रतिलिपि

योजयित्वा एकं अनुच्छेदं विशिष्टं कुरुत .lead.

Vivamus sagittis lacus vel augue laoreet रटरुम फौसिबस डोलोर नीलामी. Duis mollis, est गैर commodo luctus.

<p class = "सीसा" > ... </p>

कम के साथ निर्मित

मुद्रणमापनं चरयोः LESS चरयोः आधारेण भवति ।less : @baseFontSizeand @baseLineHeight. प्रथमं सम्पूर्णे प्रयुक्तं आधार-अभिलेख-आकारं द्वितीयं च आधार-रेखा-उच्चता । वयं तान् चरानाम् उपयोगं कुर्मः तथा च केचन सरलगणितानि अस्माकं सर्वेषां प्रकारस्य मार्जिन्स्, पैडिंग्स्, रेखा-उच्चताः च निर्मातुं शक्नुमः तथा च अधिकानि । तान् अनुकूलितं कुर्वन्तु तथा च Bootstrap अनुकूलितं भवति।

बलं

हल्केन शैल्याः सह HTML इत्यस्य पूर्वनिर्धारित-बोध-टैग्-इत्यस्य उपयोगं कुर्वन्तु ।

`<small>`

पाठस्य अन्तःरेखायाः अथवा खण्डानां बोधं विना लघुटैग् इत्यस्य उपयोगं कुर्वन्तु ।

एषा पाठपङ्क्तिः सूक्ष्मलेखत्वेन व्यवहर्तुं अभिप्रेता अस्ति ।

<p> <small> एषा पाठपङ्क्तिः सूक्ष्मलेखत्वेन व्यवहर्तुं अभिप्रेता अस्ति । </small> </p> इति

विक्रान्तः

गुरुतरेण font-weight इत्यनेन सह पाठस्य स्निपेट् इत्यस्य उपरि बलं दातुं ।

निम्नलिखित पाठस्य स्निपेट् गाढपाठरूपेण प्रतिपादितम् अस्ति |

<strong> गाढपाठरूपेण प्रतिपादितम् </strong>

इटालिकाः

इटालिकसहितं पाठस्य खण्डं बोधयितुं ।

निम्नलिखित पाठस्य स्निपेट् इटालिककृतपाठरूपेण प्रतिपादितम् अस्ति |

<em> इटालिकपाठरूपेण प्रतिपादितम् </em>

शिरः उपरि !उपयोगं कर्तुं निःशङ्कं भवन्तु <b>तथा <i>च HTML5 मध्ये। <b>अतिरिक्त महत्त्वं न दत्त्वा शब्दान् वा वाक्यानि वा प्रकाशयितुं अभिप्रेतम् अस्ति यदा <i>तु अधिकतया स्वरस्य, तकनीकीपदानां इत्यादीनां कृते भवति।

संरेखण वर्ग

पाठसंरेखणवर्गैः सह घटकेषु पाठं सहजतया पुनः संरेखयन्तु ।

वाम संरेखित पाठ।

केन्द्र संरेखित पाठ।

दक्षिण संरेखित पाठ।

<p class = "text-left" > वाम संरेखित पाठ। </p> इति 
<p class = "text-center" > केन्द्र संरेखित पाठ। </p> इति 
<p class = "text-right" > दक्षिण संरेखित पाठ। </p> इति

बल कक्षाएँ

मुष्टिभ्यां बलोपयोगितावर्गैः सह वर्णद्वारा अर्थं प्रसारयन्तु।

Fusce dapibus, tellus ac cursus commodo, तोर्टोर मौरिस निभ।

Etiam porta सेम malesuada मैग्ना मोलिस euismod.

Donec ullamcorper nulla गैर metus नीलामी fringilla.

एनेन ईउ लियो क्वाम् । Pellentesque ornare सेम लेसिनिया क्वाम वेनेनेटिस।

Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > फुस्से दापिबस, टेलस एसी कर्सुस कोमोडो, टोर्टोर मौरिस निभ। </p> इति 
<p class = "पाठ-चेतावनी" > Etiam porta sem malesuada magna mollis euismod. </p> इति 
<p class = "पाठ-त्रुटि" > Donec ullamcorper nulla गैर metus नीलामी fringilla. </p> इति 
<p class = "पाठ-सूचना" > एनियन यू लियो क्वाम्। Pellentesque ornare सेम लेसिनिया क्वाम वेनेनेटिस। </p> इति 
<p वर्ग = "पाठ-सफलता" > Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula. </p> इति

संक्षेपाः

<abbr>विस्तारितं संस्करणं होवर इत्यत्र दर्शयितुं संक्षिप्तनामानां संक्षिप्तनामानां च कृते HTML इत्यस्य तत्त्वस्य शैलीबद्धं कार्यान्वयनम् । विशेषतायुक्तेषु संक्षिप्तरूपेषु titleहल्के बिन्दुयुक्ता अधः सीमा भवति तथा च होवर इत्यत्र सहायताकर्सरः भवति, यत् होवर इत्यत्र अतिरिक्तसन्दर्भं प्रदाति ।

`<abbr>`

संक्षिप्तस्य दीर्घ-प्रहारस्य विस्तारित-पाठस्य कृते titleविशेषणं समावेशयन्तु ।

विशेषणशब्दस्य एकः संक्षिप्तः नाम attr अस्ति .

<abbr title = "विशेषणम्" > attr </abbr>

`<abbr class="initialism">`

.initialismकिञ्चित् लघु font-size कृते संक्षिप्तरूपेण योजयन्तु ।

HTML इत्येतत् sliced bread इत्यस्मात् परं सर्वोत्तमम् अस्ति।

<abbr title = "अतिपाठ मार्कअप भाषा" class = "प्रारम्भवाद" > HTML </abbr>

सम्बोधयति

निकटतम पूर्वज या सम्पूर्ण कार्य निकाय हेतु सम्पर्क जानकारी प्रस्तुत करें।

`<address>`

सर्वाणि पङ्क्तयः <br>.

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

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

<संबोधनम्>
  <strong> ट्विटर, इन्क </strong><br>
  795 फोल्सम एवेन्यू, सुइट 600 <br>
  सैन फ्रांसिस्को, सीए 94107 <br>
  <abbr title = "फोन" > पु: </abbr> (१२३) ४५६-७८९० 
</address> इति
 
<संबोधनम्>
  <strong> पूर्ण नाम </strong><br>
  <a href = "mailto:#" > प्रथम.अन्तिम@उदाहरण .com </a> 
</address> इति

ब्लॉककोट्स्

भवतः दस्तावेजस्य अन्तः अन्यस्मात् स्रोतः सामग्रीखण्डानां उद्धरणार्थं ।

पूर्वनिर्धारितं blockquote

<blockquote>उद्धरणरूपेण किमपि HTML परितः वेष्टयन्तु । सीधा उद्धरणार्थं वयं एकं <p>.

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.

<blockquote> इति
  <p> लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante. </p> इति
</blockquote> इति

ब्लॉककोट विकल्प

मानक-ब्लॉककोट्-उपरि सरल-विविधतायाः कृते शैली-सामग्री-परिवर्तनं भवति ।

स्रोतस्य नामकरणम्

<small>स्रोतस्य परिचयार्थं टैग् योजयन्तु । स्रोतकार्यस्य नाम <cite>.

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.
Source Title इत्यस्मिन् कश्चन प्रसिद्धः

<blockquote> इति
  <p> लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante. </p> इति
  <small> कश्चन प्रसिद्धः <cite title = "स्रोतशीर्षकम्" > स्रोतशीर्षकं </cite></small> 
</blockquote> इति

वैकल्पिक प्रदर्शनम्

.pull-rightप्लवमानस्य, दक्षिण-संरेखितस्य blockquote कृते उपयुज्यताम् ।

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.
Source Title इत्यस्मिन् कश्चन प्रसिद्धः

<blockquote class = "पुल-राइट" > 
  ...
</blockquote> इति

सूचीति

अक्रमितम्

यस्मिन् द्रव्ये क्रमस्य स्पष्टतया महत्त्वं नास्ति तस्य सूची ।

लोरेम इप्सम डोलोर बैठा अमेत
Consectetur adipiscing अभिजात वर्ग
पूर्णांक molestie lorem पर massa
Facilisis in pretium nisl aliquet
नुल्ला वोलुत्पात अलिक्वाम वेलित
- Phasellus iaculis नेक्वे इति
- पुरुष सोडलेस् ultrices
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- Ac tristique लिबेरो volutpat at
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
Aenean बैठा अमेत एरत nunc
एगेट पोर्टिटोर लोरेम्

<उल> इति
  <li> ... </li> इति
</ul> इति

आदेशित

यस्मिन् द्रव्ये क्रमः स्पष्टतया महत्त्वपूर्णं करोति तस्य सूची।

लोरेम इप्सम डोलोर बैठा अमेत
Consectetur adipiscing अभिजात वर्ग
पूर्णांक molestie lorem पर massa
Facilisis in pretium nisl aliquet
नुल्ला वोलुत्पात अलिक्वाम वेलित
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
Aenean बैठा अमेत एरत nunc
एगेट पोर्टिटोर लोरेम्

<ol> इति
  <li> ... </li> इति
</ol> इति

अशैली

list-styleसूचीवस्तूनाम् (केवलं तत्कालीनबालानां) पूर्वनिर्धारितं वामपैडिंग् च निष्कासयन्तु ।

लोरेम इप्सम डोलोर बैठा अमेत
Consectetur adipiscing अभिजात वर्ग
पूर्णांक molestie lorem पर massa
Facilisis in pretium nisl aliquet
नुल्ला वोलुत्पात अलिक्वाम वेलित
- Phasellus iaculis नेक्वे इति
- पुरुष सोडलेस् ultrices
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- Ac tristique लिबेरो volutpat at
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
Aenean बैठा अमेत एरत nunc
एगेट पोर्टिटोर लोरेम्

<ul class = "अशैली" > 
  <li> ... </li> इति
</ul> इति

इनलाइन

सर्वाणि सूचीवस्तूनि एकस्मिन् पङ्क्तौ स्थापयन्तु with inline-blockand some light padding.

लोरेम् इप्सुम्
Phasellus iaculis इति
नुल्ला वोलुत्पात

<ul वर्ग = "इनलाइन" > 
  <li> ... </li> इति
</ul> इति

वर्णनम्‌

पदानाम् सूची तेषां सम्बद्धवर्णनैः सह ।

वर्णन सूची: पदपरिभाषायै वर्णनसूची परिपूर्णा भवति ।
यूइस्मोदः: वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग.; Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस.
मलेसुअदा पोर्टा: Etiam porta सेम malesuada मैग्ना मोलिस euismod.

<दल्> इति
  <dt> ... </dt> इति
  <dd> ... </dd> इति
</dl> इति

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

<dl>पार्श्वतः पार्श्वतः पङ्क्तिबद्धरूपेण पदानि वर्णनानि च कुर्वन्तु ।

वर्णन सूची: पदपरिभाषायै वर्णनसूची परिपूर्णा भवति ।
यूइस्मोदः: वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग.; Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस.
मलेसुअदा पोर्टा: Etiam porta सेम malesuada मैग्ना मोलिस euismod.
फेलिस euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor मौरिस condimentum निभ, उत fermentum massa justo बैठो amet risus.

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

शिरः उपरि !क्षैतिजवर्णनसूचिकाः तान् पदान् च्छेदयिष्यन्ति ये वामस्तम्भनिराकरणे युक्तं कर्तुं अतिदीर्घाः सन्ति text-overflow| संकीर्णतरेषु viewports मध्ये, ते पूर्वनिर्धारित stacked layout मध्ये परिवर्तयिष्यन्ति ।

इनलाइन

कोडस्य इनलाइन स्निपेट्स् इत्यनेन सह लपेटयन्तु <code>।

यथा - <section>इनलाइन इति वेष्टनीयम् ।

यथा , <code > & lt ; section & gt ;</ code > इत्येतत् inline इति वेष्टनीयम् |

मूलखण्डः

<pre>कोडस्य बहुपङ्क्तयः कृते उपयुज्यताम् । सम्यक् प्रतिपादनार्थं कोडमध्ये किमपि कोणकोष्ठकं अवश्यं पलायन्तु ।

<p>अत्र नमूना पाठः...</p>

<पूर्व> इति
  <p>अत्र नमूना पाठः...</p>
</pre> इति

शिरः उपरि !<pre>टैग्-अन्तर्गतं कोडं यथासम्भवं वामभागे समीपे अवश्यं स्थापयन्तु ; सर्वान् ट्याब्स् रेण्डर् करिष्यति ।

भवान् वैकल्पिकरूपेण .pre-scrollableवर्गं योजयितुं शक्नोति यत् 350px इत्यस्य max-height सेट् करिष्यति तथा च y-axis scrollbar प्रदास्यति ।

पूर्वनिर्धारितशैल्याः

मूलभूत-स्टाइलिंग्-कृते—लघु-गद्दी-करणं तथा केवलं क्षैतिज-विभाजकानाम्—आधारवर्गं .tableकस्मिन् अपि मध्ये योजयन्तु <table>।

# .	प्रथम नाम्ना	अंतिम नाम्ना	उपयोक्तृनाम
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	ल्यारी	the Bird इति	@ twitter इति

<सारणी वर्ग = "सारणी" > 
  ...
</table> इति

वैकल्पिकवर्गाः

.tableआधारवर्गे निम्नलिखितवर्गेषु कश्चन अपि योजयन्तु ।

`.table-striped`

<tbody>via :nth-childCSS चयनकर्ता (IE7-8 मध्ये उपलब्धं नास्ति) अन्तः कस्यापि सारणीपङ्क्तौ zebra-striping योजयति ।

# .	प्रथम नाम्ना	अंतिम नाम्ना	उपयोक्तृनाम
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	ल्यारी	the Bird इति	@ twitter इति

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

`.table-bordered`

सारणीयां सीमाः गोलकोणानि च योजयन्तु ।

# .	प्रथम नाम्ना	अंतिम नाम्ना	उपयोक्तृनाम
१	मार्क	ओटो	@मडो
१	मार्क	ओटो	@ getbootstrap इति
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	लैरी द बर्ड		@ twitter इति

<table class = "सारणी सारणी-सीमायुक्त" > 
  ...
</table> इति

`.table-hover`

एकस्य अन्तः सारणीपङ्क्तिषु एकं होवरस्थितिं सक्षमं कुर्वन्तु <tbody>।

# .	प्रथम नाम्ना	अंतिम नाम्ना	उपयोक्तृनाम
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	लैरी द बर्ड		@ twitter इति

<table class = "सारणी तालिका-होवर" > 
  ...
</table> इति

`.table-condensed`

सेल पैडिंग् अर्धभागे कृत्वा सारणीः अधिकं संकुचितं करोति।

# .	प्रथम नाम्ना	अंतिम नाम्ना	उपयोक्तृनाम
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	लैरी द बर्ड		@ twitter इति

<table class = "सारणी सारणी-सघन" > 
  ...
</table> इति

वैकल्पिकपङ्क्तिवर्गाः

सारणीपङ्क्तयः वर्णयितुं सन्दर्भवर्गाणां उपयोगं कुर्वन्तु ।

श्रेणी	वर्णनम्‌
`.success`	सफलं सकारात्मकं वा कार्यं सूचयति।
`.error`	खतरनाकं सम्भाव्यं वा नकारात्मकं कार्यं सूचयति।
`.warning`	एकं चेतावनी सूचयति यस्य विषये ध्यानस्य आवश्यकता भवेत्।
`.info`	पूर्वनिर्धारितशैल्याः विकल्परूपेण उपयुज्यते ।

# .	उत्पाद	भुगतान लिया	स्थितिः
१	टीबी - मासिकम्	01/04/2012 को	अनुमत
२	टीबी - मासिकम्	02/04/2012 को	अस्वीकृत
३	टीबी - मासिकम्	03/04/2012 को	विचाराधीनः
४	टीबी - मासिकम्	04/04/2012 को	पुष्टि करने के लिए कॉल इन करें

...
  < tr class = "सफलता" >
    <td> १ < /td> इति
    <td>TB - मासिक</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>अनुमोदित</ td > इति
  </ त्र > इति
...

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

समर्थितसारणी HTML तत्त्वानां सूची तथा च तेषां उपयोगः कथं करणीयः इति ।

सूचकपत्त्र	वर्णनम्‌
`<table>`	सारणीबद्धरूपेण दत्तांशं प्रदर्शयितुं वेष्टनतत्त्वम्
`<thead>`	सारणीस्तम्भान् `<tr>`लेबलं कर्तुं सारणीशीर्षकपङ्क्तयः ( ) कृते पात्रतत्त्वम्
`<tbody>`	`<tr>`सारणीयाः शरीरे सारणीपङ्क्तयः ( ) कृते पात्रतत्त्वम्
`<tr>`	एकस्मिन् पङ्क्तौ दृश्यमानस्य सारणीकोशिकानां ( `<td>`अथवा ) समुच्चयस्य कृते पात्रतत्त्वम्`<th>`
`<td>`	पूर्वनिर्धारित सारणी कोष्ठक
`<th>`	स्तम्भस्य (अथवा पङ्क्तिः, व्याप्तिस्थापनस्य च आधारेण) लेबलानां कृते विशेषसारणीकोष्ठकम्
`<caption>`	सारणी किं धारयति तस्य वर्णनं वा सारांशं वा, विशेषतः स्क्रीन रीडराणां कृते उपयोगी

<सारणी>
  <caption> ... </caption> इति
  <शिरः> इति
    <tr> इति
      <थ> ... </th> इति
      <थ> ... </th> इति
    </tr> इति
  </thead> इति
  <त्काय> इति
    <tr> इति
      <td> ... </td> इति
      <td> ... </td> इति
    </tr> इति
  </tbody> इति
</table> इति

पूर्वनिर्धारितशैल्याः

<form>व्यक्तिगतरूपनियन्त्रणानि स्टाइलिंग् प्राप्नुवन्ति, परन्तु मार्कअपस्य वा बृहत् परिवर्तनस्य वा उपरि किमपि आवश्यकं आधारवर्गं विना । परिणामः रूपनियन्त्रणानां उपरि स्तम्भितानि, वाम-संरेखितानि लेबलानि भवन्ति ।

<रूपम्>
  <क्षेत्रसमूहः>
    <legend> आख्यायिका </legend>
    <label> लेबल नाम </label>
    <input type = "text" placeholder = "किञ्चित् टङ्कयतु..." >  
    <span class = "help-block" > अत्र अवरोधस्तरीयसहायतापाठस्य उदाहरणम् । </span> इति 
    <label class = "चेकबॉक्स" > 
      <input type = "checkbox" > मां पश्यन्तु 
    </label> इति
    <button type = "submit" class = "btn" > प्रस्तुत करें </button>  
  </fieldset> इति
</form> इति

वैकल्पिक विन्यास

Bootstrap इत्यनेन सह सामान्यप्रयोगप्रकरणानाम् कृते त्रीणि वैकल्पिकानि रूपविन्यासानि समाविष्टानि सन्ति ।

खोज प्रपत्र

अतिरिक्त-गोल-पाठ-निवेशस्य कृते .form-searchरूपे तथा च .search-queryयोजयन्तु ।<input>

<form class = "रूप-अन्वेषण" > 
  <input type = "text" class = "इनपुट-माध्यम अन्वेषण-प्रश्न" >  
  <button type = "submit" class = "btn" > अन्वेषणम् </button>  
</form> इति

इनलाइन रूप

वाम-संरेखित-लेबल्-कृते योजयन्तु .form-inlineतथा च संकुचित-विन्यासाय इनलाइन-ब्लॉक-नियन्त्रणानि योजयन्तु ।

<form class = "रूप-इनलाइन" > 
  <निवेश प्रकार = "पाठ" वर्ग = "निवेश-लघु" स्थानधारक = "ईमेल" >   
  <इनपुट प्रकार = "गुप्तशब्द" वर्ग = "निवेश-लघु" स्थानधारक = "गुप्तशब्द" >   
  <label class = "चेकबॉक्स" > 
    <input type = "checkbox" > मां स्मर्यताम् 
  </label> इति
  <button type = "submit" class = "btn" > प्रवेशं कुर्वन्तु </button>  
</form> इति

क्षैतिज रूप

लेबल्स् दक्षिणतः संरेखयन्तु तथा वामभागे प्लवन्तु येन ते नियन्त्रणानां समानरेखायां दृश्यन्ते । पूर्वनिर्धारितरूपेण अधिकतमं मार्कअप परिवर्तनम् आवश्यकम् अस्ति:

.form-horizontalरूपे योजयन्तु
लेबल एवं नियंत्रण में लपेटें.control-group
.control-labelलेबल मध्ये योजयन्तु
.controlsसम्यक् संरेखणार्थं किमपि सम्बद्धं नियन्त्रणं लपेटयन्तु

<form class = "रूप-क्षैतिज" > 
  <div वर्ग = "नियंत्रण-समूह" > 
    <label class = "नियन्त्रण-लेबल" for = "inputEmail" > ईमेल </label>  
    <div वर्ग = "नियंत्रण करता है" > 
      <input type = "text" id = "inputEmail" स्थानधारक = "ईमेल" >   
    </div> इति
  </div> इति
  <div वर्ग = "नियंत्रण-समूह" > 
    <label class = "नियन्त्रण-लेबल" for = "inputPassword" > गुप्तशब्दः </label>  
    <div वर्ग = "नियंत्रण करता है" > 
      <input type = "गुप्तशब्द" id = "inputPassword" स्थानधारक = "गुप्तशब्द" >   
    </div> इति
  </div> इति
  <div वर्ग = "नियंत्रण-समूह" > 
    <div वर्ग = "नियंत्रण करता है" > 
      <label class = "चेकबॉक्स" > 
        <input type = "checkbox" > मां स्मर्यताम् 
      </label> इति
      <button type = "submit" class = "btn" > प्रवेशं कुर्वन्तु </button>  
    </div> इति
  </div> इति
</form> इति

समर्थित रूप नियंत्रण

उदाहरणरूपविन्यासे समर्थितानां मानकरूपनियन्त्रणानां उदाहरणानि ।

इनपुट्

अधिकांश सामान्य रूप नियंत्रण, पाठ-आधारित इनपुट क्षेत्र। सर्वेषां HTML5 प्रकाराणां समर्थनं समाविष्टम् अस्ति: पाठः, गुप्तशब्दः, तिथिसमयः, तिथिसमयः-स्थानीयः, तिथिः, मासः, समयः, सप्ताहः, संख्या, ईमेल, url, अन्वेषणं, tel, तथा च वर्णः

typeसर्वदा निर्दिष्टस्य प्रयोगस्य आवश्यकता वर्तते ।

<input type = "पाठ" स्थानधारक = "पाठ इनपुट" >

पाठक्षेत्रम्

रूपनियन्त्रणं यत् पाठस्य बहुपङ्क्तयः समर्थयति। rowsआवश्यकतानुसारं विशेषतां परिवर्तयन्तु ।

<पाठक्षेत्रपङ्क्तयः = "३" ></ textarea >

चेकबॉक्स एवं रेडियो

चेकबॉक्स् सूचीयां एकं वा अनेकं वा विकल्पं चयनार्थं भवति यदा रेडियो बहुभ्यः एकं विकल्पं चयनार्थं भवति ।

पूर्वनिर्धारितं (स्तम्भितम्) .

<label class = "चेकबॉक्स" > 
  <इनपुट प्रकार = "चेकबॉक्स" मान = "" >  
  विकल्पः एकः एषः सः च—अवश्यं समावेशयन्तु यत् एतत् किमर्थं महान् अस्ति
</label> इति
 
<लेबल वर्ग = "रेडियो" > 
  <इनपुट प्रकार = "रेडियो" नाम = "विकल्परेडियो" id = "विकल्परेडियो1" मान = "विकल्प1" जाँचा >     
  विकल्पः एकः एषः सः च—अवश्यं समावेशयन्तु यत् एतत् किमर्थं महान् अस्ति
</label> इति
<लेबल वर्ग = "रेडियो" > 
  <इनपुट प्रकार = "रेडियो" नाम = "विकल्परेडियो" id = "विकल्परेडियो2" मान = "विकल्प2" >    
  विकल्पः द्वितीयः अन्यत् किमपि भवितुम् अर्हति तथा च तस्य चयनेन विकल्पः एकं अचयनं भविष्यति
</label> इति

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

.inlineनियन्त्रणानि एकस्मिन् एव रेखायां दृश्यन्ते इति कृते चेकबॉक्सानाम् अथवा रेडियोनां श्रृङ्खलायां वर्गं योजयन्तु ।

<label class = "चेकबॉक्स इनलाइन" > 
  <इनपुट प्रकार = "चेकबॉक्स" आईडी = "इनलाइनचेकबॉक्स1" मान = "विकल्प1 " > 1   
</label> इति
<label class = "चेकबॉक्स इनलाइन" > 
  <इनपुट प्रकार = "चेकबॉक्स" आईडी = "इनलाइनचेकबॉक्स2" मान = "विकल्प2 " > 2   
</label> इति
<label class = "चेकबॉक्स इनलाइन" > 
  <इनपुट प्रकार = "चेकबॉक्स" आईडी = "इनलाइनचेकबॉक्स3" मान = "विकल्प3 " > 3   
</label> इति

चयनं करोति

multiple="multiple"एकदा एव बहुविकल्पान् दर्शयितुं पूर्वनिर्धारितविकल्पस्य उपयोगं कुर्वन्तु अथवा a निर्दिशन्तु ।

<चयनं> इति
  <विकल्पः> १ </option>
  <विकल्पः> २ </option>
  <विकल्पः> ३ </option> इति
  <विकल्पः> ४ </option> इति
  <विकल्पः> ५ </option> इति
</select> इति
 
< बहुल चयन करें = "बहुल" > 
  <विकल्पः> १ </option>
  <विकल्पः> २ </option>
  <विकल्पः> ३ </option> इति
  <विकल्पः> ४ </option> इति
  <विकल्पः> ५ </option> इति
</select> इति

रूप नियन्त्रणानि विस्तारयन्

विद्यमानब्राउजरनियन्त्रणानां उपरि योजयित्वा, Bootstrap इत्यत्र अन्ये उपयोगीरूपघटकाः समाविष्टाः सन्ति ।

पूर्वनिर्धारित एवं संलग्न इनपुट

कस्यचित् पाठ-आधारित-निवेशस्य पूर्वं वा पश्चात् वा पाठं वा बटनं वा योजयन्तु । selectअत्र तत्त्वानि समर्थितानि न सन्ति इति अवलोकयन्तु ।

पूर्वनिर्धारित विकल्प

एकं इनपुट् मध्ये पाठं पूर्वं योजयितुं वा योजयितुं वा द्वयोः वर्गयोः एकेन सह an .add-onand an इति वेष्टयन्तु ।input

<div class = "निवेश-पूर्वनिर्धारित" > 
  <span class = "जोड़ना" > @ </span> 
  <इनपुट वर्ग = "span2" id = "prependedInput" प्रकार = "पाठ" स्थानधारक = "उपयोक्तृनाम" >    
</div> इति
<div class = "निवेश-संलग्न" > 
  <इनपुट वर्ग = "span2" id = "appendedInput" प्रकार = "पाठ" >   
  <span class = "जोड़-ऑन" > .00 </span> 
</div> इति

संयुक्तः

.add-onएकं input prepend कर्तुं append कर्तुं च classes अपि च द्वौ उदाहरणौ उपयुज्यताम् ।

<div class = "निवेश-पूर्वनिर्धारित इनपुट-संलग्नक" > 
  <span class = "जोड़-ऑन" > $ </span> 
  <इनपुट वर्ग = "span2" id = "appendedPrependedInput" प्रकार = "पाठ" >   
  <span class = "जोड़-ऑन" > .00 </span> 
</div> इति

पाठस्य स्थाने बटन्स्

<span>a with text इत्यस्य स्थाने , .btnएकं बटन् (अथवा द्वौ) इनपुट् मध्ये संलग्नं कर्तुं a इत्यस्य उपयोगं कुर्वन्तु ।

<div class = "निवेश-संलग्न" > 
  <इनपुट वर्ग = "span2" id = "appendedInputButton" प्रकार = "पाठ" >   
  <बटन वर्ग = "btn" प्रकार = "बटन" > जाओ! </बटन> इति  
</div> इति

<div class = "निवेश-संलग्न" > 
  <इनपुट वर्ग = "span2" id = "appendedInputButtons" प्रकार = "पाठ" >   
  <button class = "btn" type = "बटन" > अन्वेषण </button>  
  <button class = "btn" प्रकार = "बटन" > विकल्प </button>  
</div> इति

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

<div class = "निवेश-संलग्न" > 
  <इनपुट वर्ग = "span2" id = "appendedDropdownButton" प्रकार = "पाठ" >   
  <div वर्ग = "btn-समूह" > 
    <बटन वर्ग = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
      नामपत्र
      <span class = "कैरेट्" </span> 
    </बटन> इति
    <ul class = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul> इति
  </div> इति
</div> इति

<div class = "निवेश-पूर्वनिर्धारित" > 
  <div वर्ग = "btn-समूह" > 
    <बटन वर्ग = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
      नामपत्र
      <span class = "कैरेट्" </span> 
    </बटन> इति
    <ul class = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul> इति
  </div> इति
  <इनपुट वर्ग = "span2" id = "prependedDropdownButton" प्रकार = "पाठ" >   
</div> इति

<div class = "निवेश-पूर्वनिर्धारित इनपुट-संलग्नक" > 
  <div वर्ग = "btn-समूह" > 
    <बटन वर्ग = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
      नामपत्र
      <span class = "कैरेट्" </span> 
    </बटन> इति
    <ul class = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul> इति
  </div> इति
  <इनपुट वर्ग = "span2" id = "appendedPrependedDropdownButton" प्रकार = "पाठ" >   
  <div वर्ग = "btn-समूह" > 
    <बटन वर्ग = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
      नामपत्र
      <span class = "कैरेट्" </span> 
    </बटन> इति
    <ul class = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul> इति
  </div> इति
</div> इति

खण्डित ड्रॉपडाउन समूह

<रूपम्>
  <div class = "निवेश-पूर्वनिर्धारित" > 
    <div class = "btn-समूह" > ... </div> 
    <इनपुट प्रकार = "पाठ" > 
  </div> इति
  <div class = "निवेश-संलग्न" > 
    <इनपुट प्रकार = "पाठ" > 
    <div class = "btn-समूह" > ... </div> 
  </div> इति
</form> इति

खोज प्रपत्र

<form class = "रूप-अन्वेषण" > 
  <div class = "निवेश-संलग्न" > 
    <इनपुट प्रकार = "पाठ" वर्ग = "span2 खोज-प्रश्न" >  
    <button type = "submit" class = "btn" > अन्वेषणम् </button>  
  </div> इति
  <div class = "निवेश-पूर्वनिर्धारित" > 
    <button type = "submit" class = "btn" > अन्वेषणम् </button>  
    <इनपुट प्रकार = "पाठ" वर्ग = "span2 खोज-प्रश्न" >  
  </div> इति
</form> इति

आकार निर्धारण को नियंत्रित करें

.input-largeवर्गाणां उपयोगेन भवतः निवेशानां जालस्तम्भाकारानाम् इव वा मेलनं वा सापेक्षिकआकारवर्गाणां उपयोगं .span*कुर्वन्तु ।

ब्लॉक स्तर इनपुट

कस्यचित् <input>अथवा <textarea>तत्त्वं खण्डस्तरस्य तत्त्वस्य इव व्यवहारं कुरुत ।

<input class = "इनपुट-ब्लॉक-स्तर" प्रकार = "पाठ" स्थानधारक = ".इनपुट-ब्लॉक-स्तर" >

सापेक्ष आकारीकरण

<इनपुट वर्ग = "इनपुट-मिनी" प्रकार = "पाठ" स्थानधारक = ".इनपुट-मिनी" >   
<निवेश वर्ग = "निवेश-लघु" प्रकार = "पाठ" स्थानधारक = ".निवेश-लघु" >   
<इनपुट वर्ग = "इनपुट-माध्यम" प्रकार = "पाठ" स्थानधारक = ".इनपुट-माध्यम" >   
<इनपुट वर्ग = "इनपुट-बड़े" प्रकार = "पाठ" स्थानधारक = ".इनपुट-बड़े" >   
<इनपुट वर्ग = "इनपुट-xlarge" प्रकार = "पाठ" स्थानधारक = ".इनपुट-xlarge" >   
<इनपुट वर्ग = "इनपुट-xxlarge" प्रकार = "पाठ" स्थानधारक = ".इनपुट-xxlarge" >

शिरः उपरि !भविष्येषु संस्करणेषु, वयं अस्माकं बटन-आकारैः सह मेलयितुम् एतेषां सापेक्ष-निवेश-वर्गाणां उपयोगं परिवर्तयिष्यामः । यथा, .input-largeएकस्य इनपुट् इत्यस्य पैडिंग्, font-size च वर्धयिष्यति ।

जाल आकारीकरणम्

जालस्तम्भानां समानप्रमाणैः मेलयन्तः निवेशानां कृते .span1to इत्यस्य उपयोगं कुर्वन्तु ।.span12

<इनपुट वर्ग = "span1" प्रकार = "पाठ" स्थानधारक = ".span1" >   
<इनपुट वर्ग = "span2" प्रकार = "पाठ" स्थानधारक = ".span2" >   
<इनपुट वर्ग = "span3" प्रकार = "पाठ" स्थानधारक = ".span3" >   
< वर्ग का चयन करें = "span1" > 
  ...
</select> इति
< वर्ग का चयन करें = "span2" > 
  ...
</select> इति
< वर्ग का चयन करें = "span3" > 
  ...
</select> इति

प्रतिपङ्क्तिं बहुविधजालनिवेशानां कृते, सम्यक् अन्तरालस्य कृते परिवर्तकवर्गस्य उपयोगं कुर्वन्तु.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" > रद्द करें </button>  
</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 वर्ग = "नियंत्रण करता है" > 
    <इनपुट प्रकार = "पाठ" आईडी = "इनपुटError" >  
    <span class = "help-inline" > कृपया त्रुटिं सम्यक् कुर्वन्तु </span> 
  </div> इति
</div> इति
 
<div class = "नियंत्रण-समूह सूचना" > 
  <label class = "control-label" for = "inputInfo" > सूचना सह निवेश </label>  
  <div वर्ग = "नियंत्रण करता है" > 
    <इनपुट प्रकार = "पाठ" आईडी = "इनपुटसूचना" >  
    <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 अक्षमतत्त्वान् janifies करोति button, पाठं एकेन दुष्टेन पाठ-छाया सह धूसरं प्रतिपादयति यत् वयं निवारयितुं न शक्नुमः ।

बटन आकार

आडम्बरपूर्णानि बृहत्तराणि वा लघुतराणि वा बटनानि? अतिरिक्त आकाराणां कृते .btn-large, .btn-small, अथवा योजयन्तु ।.btn-mini

<प> इति
  <button class = "btn btn-बृहत् btn-प्राथमिक" प्रकार = "बटन" > बृहत् बटन </button>  
  <button class = "btn btn-large" type = "बटन" > बृहत् बटन </बटन>  
</p> इति
<प> इति
  <button class = "btn btn-primary" प्रकार = "बटन" > पूर्वनिर्धारित बटन </button>  
  <button class = "btn" type = "बटन" > पूर्वनिर्धारित बटन </button>  
</p> इति
<प> इति
  <button class = "btn btn-लघु btn-प्राथमिक" type = "बटन" > लघु बटन </button>  
  <button class = "btn btn-small" type = "बटन" > लघु बटन </बटन>  
</p> इति
<प> इति
  <button class = "btn btn-mini btn-primary" प्रकार = "बटन" > मिनी बटन </बटन>  
  <button class = "btn btn-mini" प्रकार = "बटन" > मिनी बटन </बटन>  
</p> इति

खण्डस्तरस्य बटन्स् रचयन्तु—ये मातापितृणां पूर्णविस्तारं व्याप्नुवन्ति— , योजयित्वा .btn-block।

<button class = "btn btn-large btn-block btn-primary" प्रकार = "बटन" > अवरोध स्तर बटन </button>  
<button class = "btn btn-large btn-block" type = "बटन" > अवरोध स्तर बटन </button>

अक्षम अवस्था

बटन्स् 50% पुनः फीका कृत्वा अक्लिक् कर्तुं शक्यन्ते इति कुर्वन्तु।

लंगर तत्व

बटन् मध्ये .disabledवर्गं योजयन्तु ।<a>

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

<a href = "#" class = "btn btn-बृहत् btn-प्राथमिकं अक्षमम्" > प्राथमिकलिङ्क् </a>  
<a href = "#" class = "btn btn-बृहत् अक्षमम्" > लिङ्क् </a>

शिरः उपरि !वयम् .disabledअत्र उपयोगितावर्गरूपेण उपयुञ्ज्महे, सामान्यवर्गस्य सदृशं .active, अतः उपसर्गस्य आवश्यकता नास्ति । अपि च, अयं वर्गः केवलं शृङ्गारस्य कृते एव अस्ति; अत्र लिङ्कानि निष्क्रियं कर्तुं भवद्भिः कस्टम् जावास्क्रिप्ट् इत्यस्य उपयोगः अवश्यं करणीयः ।

बटन तत्व

बटन्स् मध्ये disabledविशेषतां योजयन्तु ।<button>

<button type = "बटन" class = "btn btn-बृहत् btn-प्राथमिक अक्षम" disabled = "अक्षम" > प्राथमिक बटन </button>   
<बटन प्रकार = "बटन" वर्ग = "btn btn-बृहत्" अक्षम > बटन </बटन>

एकः वर्गः, बहुविधाः टैग्

, , अथवा तत्वे .btnवर्गस्य उपयोगं कुर्वन्तु ।<a><button><input>

<a class = "btn" href = "" > लिङ्क </a>  
<button class = "btn" type = "सबमिट" > बटन </बटन>  
<इनपुट वर्ग = "btn" प्रकार = "बटन" मान = "इनपुट" >   
<input class = "btn" प्रकार = "सबमिट" मान = "सबमिट" >

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

<img>कस्मिन् अपि परियोजनायां चित्राणि सुलभतया शैलीं कर्तुं कस्मिंश्चित् एलिमेण्ट् मध्ये क्लास्स् योजयन्तु ।

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

शिरः उपरि ! .img-roundedतथा समर्थनस्य .img-circleअभावात् IE7-8 इत्यस्मिन् कार्यं न कुर्वन्ति border-radius।

चिह्न ग्लिफ

स्प्राइट् रूपेण १४० चिह्नानि, गहरे धूसरवर्णे (पूर्वनिर्धारितरूपेण) श्वेतवर्णे च उपलभ्यन्ते, Glyphicons द्वारा प्रदत्तम् ।

चिह्न-काच
चिह्न-संगीत
चिह्न-अन्वेषणम्
चिह्न-लिफाफा
चिह्न-हृदय
चिह्न-तारकम्
चिह्न-तारक-रिक्त
चिह्न-उपयोक्ता
चिह्न-चलच्चित्रम्
चिह्न-थ-बृहत्
चिह्न-थ
चिह्न-थ-सूची
चिह्न-ठीकम्
चिह्न-निष्कासनम्
चिह्न-जूम-इन्
चिह्न-जूम-आउट
चिह्न-बन्द
चिह्न-संकेत
चिह्न-दन्त
चिह्न-कचरा
चिह्न-गृहम्
चिह्न-सञ्चिका
चिह्न-समयः
चिह्न-मार्ग
चिह्न-डाउनलोड-alt
चिह्न-डाउनलोड करें
चिह्न-अपलोड
चिह्न-इनबॉक्स
चिह्न-क्रीडा-वृत्तम्
चिह्न-पुनरावृत्ति
चिह्न-ताजगी
चिह्न-सूची-alt
चिह्न-ताला
चिह्न-ध्वज
चिह्न-हेडफोन
चिह्न-मात्रा-बन्द
चिह्न-मात्रा-अधः
चिह्न-मात्रा-अप
चिह्न-qrcode
चिह्न-बारकोड
चिह्न-टैग
चिह्न-टैग
चिह्न-पुस्तक
चिह्न-पुस्तकचिह्न
चिह्न-मुद्रणम्
चिह्न-कैमरा
चिह्न-फॉन्ट
चिह्न-बोल्ड
चिह्न-इटालिक
चिह्न-पाठ-उच्चता
चिह्न-पाठ-विस्तार
चिह्न-संरेखित-वाम
चिह्न-संरेखित-केन्द्रम्
चिह्न-संरेखित-दक्षिण
icon-align-justify इति
चिह्न-सूची
चिह्न-इण्डेन्ट-वाम
चिह्न-इण्डेन्ट-दक्षिण
चिह्न-मुखसमय-वीडियो
चिह्न-चित्रम्
चिह्न-पेंसिल
चिह्न-नक्शा-चिह्न
चिह्न-समायोजित करें
चिह्न-टिन्ट्
चिह्न-सम्पादनम्
चिह्न-साझा करें
चिह्न-परीक्षणम्
चिह्न-चलनम्
चिह्न-पद-पश्चात्
चिह्न-द्रुत-पिछड़ा
चिह्न-पिछड़ा
चिह्न-क्रीडा
चिह्न-विराम
चिह्न-विराम
चिह्न-अग्रे
चिह्न-द्रुत-अग्रे
चिह्न-पद-अग्रे
चिह्न-निर्गमनम्
चिह्न-शेवरॉन-वाम
चिह्न-शेवरोन-दक्षिण
चिह्न-प्लस-चिह्न
चिह्न-माइनस-चिह्न
चिह्न-हटना-चिह्न
चिह्न-ठीक-चिह्न
चिह्न-प्रश्न-चिह्न
चिह्न-सूचना-चिह्न
चिह्न-स्क्रीनशॉट
चिह्न-निष्कासन-वृत्तम्
चिह्न-ठीकम्-वृत्तम्
चिह्न-प्रतिबन्ध-वृत्त
चिह्न-बाण-वाम
चिह्न-बाण-दक्षिण
चिह्न-बाण-ऊपर
चिह्न-बाण-अधः
चिह्न-साझेदारी-alt
चिह्न-आकार-पूर्ण-पूर्ण
चिह्न-आकार-लघु
चिह्न-प्लस
चिह्न-माइनस
चिह्न-तारा चिह्न
चिह्न-विस्मयादिबोधक-चिह्न
चिह्न-उपहारः
चिह्न-पत्रम्
चिह्न-अग्नि
चिह्न-नेत्र-मुक्त
चिह्न-नेत्र-निमीलित
चिह्न-चेतावनी-चिह्न
चिह्न-विमानम्
चिह्न-पञ्चाङ्गम्
चिह्न-यादृच्छिक
चिह्न-टिप्पणी
चिह्न-चुम्बक
चिह्न-शेवरॉन-अप
चिह्न-शेवरॉन-डाउन
चिह्न-पुनःट्वीट् कुर्वन्तु
चिह्न-शॉपिंग-कार्ट
चिह्न-पुट-बन्द करें
चिह्न-पुट-उद्घाटितम्
चिह्न-आकार-वर्धक
चिह्न-आकार-क्षैतिज
चिह्न-hdd
चिह्न-वृषभः
चिह्न-घण्टा
चिह्न-प्रमाणपत्रम्
चिह्न-अङ्गुष्ठाभ्यां नमः
चिह्न-अङ्गुष्ठाभ्यां अधः
चिह्न-हस्त-दक्षिण
चिह्न-हस्त-वाम
चिह्न-हस्त-ऊपर
चिह्न-हस्त-अधः
चिह्न-वृत्त-बाण-दक्षिण
चिह्न-वृत्त-बाण-वाम
चिह्न-वृत्त-बाण-ऊपर
चिह्न-वृत्त-बाण-अधः
चिह्न-ग्लोब
चिह्न-कुंजी
चिह्न-कार्यम्
चिह्न-छिद्रक
चिह्न-अटैची
चिह्न-पूर्णपर्दे

ग्लिफिकॉन्स विशेषण

Glyphicons Halflings सामान्यतया निःशुल्कं न उपलभ्यते, परन्तु Bootstrap तथा Glyphicons निर्मातृणां मध्ये एकया व्यवस्थायाः कारणात् एतत् सम्भवं कृतम् अस्ति यत् विकासकर्तृत्वेन भवद्भ्यः निःशुल्कं भवति। धन्यवादरूपेण वयं भवन्तं प्रार्थयामः यत् यदा यदा व्यावहारिकं भवति तदा Glyphicons प्रति वैकल्पिकं लिङ्कं समावेशयन्तु ।

कथं प्रयोगः

सर्वेषु चिह्नेषु <i>अद्वितीयवर्गयुक्तं टैग् आवश्यकं भवति, यस्य उपसर्गः अस्ति icon-। उपयोगाय निम्नलिखितसङ्केतं प्रायः कुत्रापि स्थापयन्तु ।

<i class = "चिह्न-अन्वेषण" </i>

उल्टा (श्वेत) चिह्नानां कृते अपि शैल्याः उपलभ्यन्ते, एकेन अतिरिक्तवर्गेण सह सज्जाः कृताः । वयं विशेषतया nav तथा dropdown links कृते hover तथा active states इत्यत्र एतत् वर्गं प्रवर्तयिष्यामः ।

<i class = "चिह्न-अन्वेषण चिह्न-श्वेत" ></i>

शिरः उपरि !<i>पाठस्य तारस्य पार्श्वे उपयोगं कुर्वन्, यथा बटन् अथवा nav लिङ्क् इत्यत्र, सम्यक् अन्तरालस्य कृते टैग् इत्यस्य अनन्तरं स्थानं अवश्यं त्यजन्तु ।

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

बटन्-मध्ये, टूल्-बार-कृते बटन्-समूहेषु, नेविगेशन-मध्ये, अथवा पूर्व-लम्बित-रूप-निवेशेषु तान् उपयुज्यताम् ।

बटन्स्

बटन् टूल्बार इत्यस्मिन् बटन् समूहः

<div वर्ग = "btn-उपकरणपट्टिका" > 
  <div वर्ग = "btn-समूह" > 
    <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 वर्ग = "btn-समूह" > 
  <a class = "btn btn-primary" href = "#" ><i class = "चिह्न-उपयोक्तृ चिह्न-श्वेत" ></i> उपयोक्ता </a>   
  <a class = "btn btn-प्राथमिक ड्रॉपडाउन-टॉगल" data-toggle = "ड्रॉपडाउन" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "ड्रॉपडाउन-मेनू" > 
    <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 class = "विभाजक" </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 class = "नव नव-सूची" > 
  <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 class = "निवेश-पूर्वनिर्धारित" > 
      <span class = "एड-ऑन" ><i class = "चिह्न-लिफाफा" ></i></span>  
      <इनपुट वर्ग = "span2" id = "inputIcon" प्रकार = "पाठ" >   
    </div> इति
  </div> इति
</div> इति

टाइपोग्राफी

शीर्षकाणि

ह1. शीर्षक 1

ह२. शीर्षक 2

ह३. शीर्षक 3

ह४ । शीर्षक 4

ह५ । शीर्षक 5

ह६ । शीर्षक 6

शरीर प्रतिलिपि

सीसा शरीर प्रतिलिपि

कम के साथ निर्मित

बलं

<small>

विक्रान्तः

इटालिकाः

संरेखण वर्ग

बल कक्षाएँ

संक्षेपाः

<abbr>

<abbr class="initialism">

सम्बोधयति

<address>

ब्लॉककोट्स्

पूर्वनिर्धारितं blockquote

ब्लॉककोट विकल्प

स्रोतस्य नामकरणम्

वैकल्पिक प्रदर्शनम्

सूचीति

अक्रमितम्

आदेशित

अशैली

इनलाइन

वर्णनम्‌

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

संहिता

इनलाइन

मूलखण्डः

सारणीः

पूर्वनिर्धारितशैल्याः

वैकल्पिकवर्गाः

.table-striped

.table-bordered

.table-hover

.table-condensed

वैकल्पिकपङ्क्तिवर्गाः

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

रूपाणि

पूर्वनिर्धारितशैल्याः

वैकल्पिक विन्यास

खोज प्रपत्र

इनलाइन रूप

क्षैतिज रूप

समर्थित रूप नियंत्रण

इनपुट्

पाठक्षेत्रम्

चेकबॉक्स एवं रेडियो

पूर्वनिर्धारितं (स्तम्भितम्) .

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

चयनं करोति

रूप नियन्त्रणानि विस्तारयन्

पूर्वनिर्धारित एवं संलग्न इनपुट

पूर्वनिर्धारित विकल्प

संयुक्तः

पाठस्य स्थाने बटन्स्

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

खण्डित ड्रॉपडाउन समूह

खोज प्रपत्र

आकार निर्धारण को नियंत्रित करें

ब्लॉक स्तर इनपुट

सापेक्ष आकारीकरण

जाल आकारीकरणम्

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

कर्माणि रूप

सहायता पाठ

इनलाइन सहायता

सहायता अवरुद्ध करें

रूप नियंत्रण अवस्थाएँ

इनपुट फोकस

अमान्य इनपुट्

अक्षम इनपुट

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`