टाइपोग्राफी
शीर्षकाणि
सर्वाणि 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>
पाठस्य अन्तःरेखायाः अथवा खण्डानां बोधं विना लघुटैग् इत्यस्य उपयोगं कुर्वन्तु ।
एषा पाठपङ्क्तिः सूक्ष्मलेखत्वेन व्यवहर्तुं अभिप्रेता अस्ति ।
<प> इति <small>इयं पाठपङ्क्तिः सूक्ष्मलेखत्वेन व्यवहर्तुं अभिप्रेता ।</small> </p> इति
विक्रान्तः
गुरुतरेण font-weight इत्यनेन सह पाठस्य स्निपेट् इत्यस्य उपरि बलं दातुं ।
निम्नलिखित पाठस्य स्निपेट् गाढपाठरूपेण प्रतिपादितम् अस्ति |
<strong>बोल्ड पाठः इति प्रतिपादितम्</strong>
इटालिकाः
इटालिकसहितं पाठस्य खण्डं बोधयितुं ।
निम्नलिखित पाठस्य स्निपेट् इटालिककृतपाठरूपेण प्रतिपादितम् अस्ति |
<em>इटालिककृतपाठत्वेन प्रतिपादितम्</em>
शिरः उपरि ! उपयोगं कर्तुं निःशङ्कं भवन्तु <b>तथा <i>च HTML5 मध्ये। <b>अतिरिक्त महत्त्वं न दत्त्वा शब्दान् वा वाक्यानि वा प्रकाशयितुं अभिप्रेतम् अस्ति यदा <i>तु अधिकतया स्वरस्य, तकनीकीपदानां इत्यादीनां कृते भवति।
बल कक्षाएँ
मुष्टिभ्यां बलोपयोगितावर्गैः सह वर्णद्वारा अर्थं प्रसारयन्तु।
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="text-warning">एतियाम् पोर्टा सेम मलेसुअदा मग्ना मोलिस् यूस्मोद।</p> <p class="text-error">डोनेक उल्लमकोर्पर नुल्ला नॉन मेटस ऑक्टर फ्रिंगिला।</p> <p class="text-info">ऐनेन ईउ लियो क्वाम् । पेलेन्टेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनाटिस्।</p> <p class="text-success">दुइस मोलिस्, एस्ट नॉन कोमोडो लुक्टस, निसि एराट् पोर्टिटोर लिगुला।</p>
संक्षेपाः
<abbr>विस्तारितं संस्करणं होवर इत्यत्र दर्शयितुं संक्षिप्तशब्दानां संक्षिप्तनामानां च कृते HTML इत्यस्य तत्त्वस्य शैलीबद्धं कार्यान्वयनम् । विशेषतायुक्तेषु संक्षिप्तरूपेषु titleहल्के बिन्दुयुक्ता अधः सीमा भवति तथा च होवर इत्यत्र सहायताकर्सरः भवति, यत् होवर इत्यत्र अतिरिक्तसन्दर्भं प्रदाति ।
<abbr>
संक्षिप्तस्य दीर्घ-प्रहारस्य विस्तारित-पाठस्य कृते titleविशेषणं समावेशयन्तु ।
विशेषणशब्दस्य एकः संक्षिप्तः नाम attr अस्ति .
<abbr title="attribute">अत्र</abbr> इति
<abbr class="initialism">
.initialismकिञ्चित् लघु font-size कृते संक्षिप्तरूपेण योजयन्तु ।
HTML इत्येतत् स्लाइस्ड् ब्रेड् इत्यस्मात् उत्तमं वस्तु अस्ति।
<abbr title="हाइपरटेक्स्ट मार्कअप भाषा" class="initialism">एचटीएमएल</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:#">प्रथम.अन्तिम@gmail.com</a> इति </address> इति
ब्लॉककोट्स्
भवतः दस्तावेजस्य अन्तः अन्यस्मात् स्रोतः सामग्रीखण्डानां उद्धरणार्थं ।
पूर्वनिर्धारितं blockquote
<blockquote>उद्धरणरूपेण किमपि HTML परितः वेष्टयन्तु । सीधा उद्धरणार्थं वयं एकं <p>.
लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.
<blockquote> इति <p>लोरेम इप्सम डोलोर बैठा अमेत, consectetur adipiscing elit. पूर्णाङ्कः पोसुएरे एराट् आ अन्ते।</p> </blockquote> इति
ब्लॉककोट विकल्प
मानक-ब्लॉककोट्-उपरि सरल-विविधतायाः कृते शैली-सामग्री-परिवर्तनं भवति ।
स्रोतस्य नामकरणम्
<small>स्रोतस्य परिचयार्थं टैग् योजयन्तु । स्रोतकार्यस्य नाम <cite>.
लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.
Source Title इत्यस्मिन् कश्चन प्रसिद्धः
<blockquote> इति <p>लोरेम इप्सम डोलोर बैठा अमेत, consectetur adipiscing elit. पूर्णाङ्कः पोसुएरे एराट् आ अन्ते।</p> <small>कश्चिद् प्रसिद्धः <cite title="स्रोतशीर्षक">स्रोतशीर्षक</cite></small> </blockquote> इति
वैकल्पिक प्रदर्शनम्
.pull-rightप्लवमानस्य, दक्षिण-संरेखितस्य blockquote कृते उपयुज्यताम् ।
<blockquote class="पुल-दक्षिण"> ... </blockquote> इति
सूचीति
अक्रमितम्
यस्मिन् द्रव्ये क्रमस्य स्पष्टतया महत्त्वं नास्ति तस्य सूची ।
- लोरेम इप्सम डोलोर बैठा अमेत
- Consectetur adipiscing अभिजात वर्ग
- पूर्णांक molestie lorem पर massa
- Facilisis in pretium nisl aliquet
- नुल्ला वोलुत्पात अलिक्वाम वेलित
- Phasellus iaculis नेक्वे इति
- पुरुष सोडलेस उल्ट्रिसीज
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- Ac tristique लिबेरो volutpat at
- फौसिबस पोर्टा लेकस फ्रिंगिला वेल
- Aenean बैठा amet एरत nunc
- एगेट पोर्टिटोर लोरेम्
<उल> इति <li></li> इति </ul> इति
आदेशित
यस्मिन् द्रव्ये क्रमः स्पष्टतया महत्त्वपूर्णं करोति तस्य सूची।
- लोरेम इप्सम डोलोर बैठा अमेत
- Consectetur adipiscing अभिजात वर्ग
- पूर्णांक molestie lorem पर massa
- Facilisis in pretium nisl aliquet
- नुल्ला वोलुत्पात अलिक्वाम वेलित
- फौसिबस पोर्टा लेकस फ्रिंगिला वेल
- Aenean बैठा amet एरत nunc
- एगेट पोर्टिटोर लोरेम्
<ol> इति <li></li> इति </ol> इति
अशैली
list-styleवामपैडिंगं नास्ति वा अतिरिक्तं वा युक्तानां वस्तूनाम् सूची ।
- लोरेम इप्सम डोलोर बैठा अमेत
- Consectetur adipiscing अभिजात वर्ग
- पूर्णांक molestie lorem पर massa
- Facilisis in pretium nisl aliquet
- नुल्ला वोलुत्पात अलिक्वाम वेलित
- Phasellus iaculis नेक्वे इति
- पुरुष सोडलेस उल्ट्रिसीज
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- Ac tristique लिबेरो volutpat at
- फौसिबस पोर्टा लेकस फ्रिंगिला वेल
- Aenean बैठा amet एरत nunc
- एगेट पोर्टिटोर लोरेम्
<ul class="अशैलीयुक्तम्"> <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 class="दल्-क्षैतिजम्"> <dt>…</dt> इति <dd>…</dd> इति </dl> इति
शिरः उपरि ! क्षैतिजवर्णनसूचिकाः तान् पदान् च्छेदयिष्यन्ति ये वामस्तम्भनिराकरणे स्थातुं अतिदीर्घाः सन्ति text-overflow| संकीर्णतरेषु viewports मध्ये, ते पूर्वनिर्धारित stacked layout मध्ये परिवर्तयिष्यन्ति ।
संहिता
इनलाइन
कोडस्य इनलाइन स्निपेट्स् इत्यनेन सह लपेटयन्तु <code>।
<section>इनलाइन इति वेष्टनीयम् ।
यथा, <code><section></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-IE8 मध्ये उपलब्धं नास्ति) अन्तः कस्यापि सारणीपङ्क्तौ 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>०१/०४/२०१२</td> इति
<td>अनुमोदितम्</td> इति
</tr> इति
...
समर्थित तालिका मार्कअप
समर्थितसारणी HTML तत्त्वानां सूची तथा च तेषां उपयोगः कथं करणीयः इति ।
| सूचकपत्त्र | वर्णनम् |
|---|---|
<table> |
सारणीबद्धरूपेण दत्तांशं प्रदर्शयितुं वेष्टनतत्त्वम् |
<thead> |
सारणीस्तम्भान् <tr>लेबलं कर्तुं सारणीशीर्षकपङ्क्तयः ( ) कृते पात्रतत्त्वम् |
<tbody> |
<tr>सारणीयाः शरीरे सारणीपङ्क्तयः ( ) कृते पात्रतत्त्वम् |
<tr> |
एकस्मिन् पङ्क्तौ दृश्यमानस्य सारणीकोशिकानां ( <td>अथवा ) समुच्चयस्य कृते पात्रतत्त्वम्<th> |
<td> |
पूर्वनिर्धारित सारणी कोष्ठक |
<th> |
स्तम्भस्य (अथवा पङ्क्तिः, व्याप्तेः स्थापनस्य च आधारेण) लेबलानां कृते विशेषसारणीकोष्ठकस्य अन्तः अवश्यमेव उपयोगः करणीयः a <thead> |
<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="रूप-अन्तर्रेखा">
<input type="text" class="निवेश-लघु" स्थानधारक="ईमेल">
<input type="गुप्तशब्दः" class="निवेश-लघु" placeholder="गुप्तशब्दः">
<label class="चेकबॉक्स">
<input type="checkbox"> मां स्मर्यताम्
</label> इति
<button type="submit" class="btn">प्रवेशं कुरुत</button>
</form> इति
क्षैतिज रूप
लेबल्स् दक्षिणतः संरेखयन्तु तथा वामभागे प्लवन्तु येन ते नियन्त्रणानां समानरेखायां दृश्यन्ते । पूर्वनिर्धारितरूपेण अधिकतमं मार्कअप परिवर्तनम् आवश्यकम् अस्ति:
.form-horizontalरूपे योजयन्तु- लेबल एवं नियंत्रण में लपेटें
.control-group .control-labelलेबल मध्ये योजयन्तु.controlsसम्यक् संरेखणार्थं किमपि सम्बद्धं नियन्त्रणं लपेटयन्तु
<form class="रूप-क्षैतिज">
<div class="नियन्त्रण-समूह">
<label class="control-label" for="inputEmail">ईमेल</label> इति
<div class="नियन्त्रयति">
<input type="text" id="इनपुटईमेल" स्थानधारक="ईमेल">
</div> इति
</div> इति
<div class="नियन्त्रण-समूह">
<label class="control-label" for="inputPassword">गुप्तशब्दः</label>
<div class="नियन्त्रयति">
<input type="गुप्तशब्दः" id="निवेशगुप्तशब्दः" placeholder="गुप्तशब्दः">
</div> इति
</div> इति
<div class="नियन्त्रण-समूह">
<div class="नियन्त्रयति">
<label class="चेकबॉक्स">
<input type="checkbox"> मां स्मर्यताम्
</label> इति
<button type="submit" class="btn">प्रवेशं कुरुत</button>
</div> इति
</div> इति
</form> इति
समर्थित रूप नियंत्रण
उदाहरणरूपविन्यासे समर्थितानां मानकरूपनियन्त्रणानां उदाहरणानि ।
इनपुट्
अधिकांश सामान्य रूप नियंत्रण, पाठ-आधारित इनपुट क्षेत्र। सर्वेषां HTML5 प्रकाराणां समर्थनं समाविष्टम् अस्ति: पाठः, गुप्तशब्दः, तिथिसमयः, तिथिसमयः-स्थानीयः, तिथिः, मासः, समयः, सप्ताहः, संख्या, ईमेल, url, अन्वेषणं, tel, तथा च वर्णः
typeसर्वदा निर्दिष्टस्य प्रयोगस्य आवश्यकता वर्तते ।
<input type="पाठः" placeholder="पाठनिवेशः">
पाठक्षेत्रम्
रूपनियन्त्रणं यत् पाठस्य बहुपङ्क्तयः समर्थयति। rowsआवश्यकतानुसारं विशेषतां परिवर्तयन्तु ।
<textarea rows="3"></पाठक्षेत्रम्>
चेकबॉक्स एवं रेडियो
चेकबॉक्स् सूचीयां एकं वा अनेकं वा विकल्पं चयनार्थं भवति यदा रेडियो बहुभ्यः एकं विकल्पं चयनार्थं भवति ।
पूर्वनिर्धारितं (स्तम्भितम्) .
<label class="चेकबॉक्स"> <input type="चेकबॉक्स" मान=""> विकल्पः एकः एषः सः च—अवश्यं समावेशयन्तु यत् एतत् किमर्थं महान् अस्ति </label> इति <लेबल वर्ग="रेडियो"> <इनपुट प्रकार="रेडियो" नाम="विकल्परेडियो" id="विकल्परेडियो1" मान="विकल्प1" जाँचा> विकल्पः एकः एषः सः च—अवश्यं समावेशयन्तु यत् एतत् किमर्थं महान् अस्ति </label> इति <लेबल वर्ग="रेडियो"> <input type="रेडियो" नाम="विकल्परेडियो" 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 निर्दिशन्तु ।
<चयनं> इति <विकल्पः>१</विकल्पः> <विकल्प>२</option> इति <विकल्प>३</option> इति <विकल्पः>४</option> इति <विकल्पः>५</option> इति </select> इति <बहुलं चयनं="बहुलं"> <विकल्पः>१</विकल्पः> <विकल्प>२</option> इति <विकल्प>३</option> इति <विकल्पः>४</option> इति <विकल्पः>५</option> इति </select> इति
रूप नियन्त्रणानि विस्तारयन्
विद्यमानब्राउजरनियन्त्रणानां उपरि योजयित्वा, Bootstrap इत्यत्र अन्ये उपयोगीरूपघटकाः समाविष्टाः सन्ति ।
पूर्वनिर्धारित एवं संलग्न इनपुट
कस्यचित् पाठ-आधारित-निवेशस्य पूर्वं वा पश्चात् वा पाठं वा बटनं वा योजयन्तु । selectअत्र तत्त्वानि समर्थितानि न सन्ति इति अवलोकयन्तु ।
पूर्वनिर्धारित विकल्प
एकं इनपुट् मध्ये पाठं पूर्वं योजयितुं वा योजयितुं वा द्वयोः वर्गयोः एकेन सह an .add-onand an इति वेष्टयन्तु ।input
<div class="निवेश-प्रीपेण्ड्"> <span class="add-on">@</span> इति <input class="span2" id="prependedInput" प्रकार="पाठ" स्थानधारक="उपयोक्तृनाम"> </div> इति <div class="निवेश-संलग्नकम्"> <input class="span2" id="संयुक्तनिवेश" प्रकार="पाठ"> <span class="add-on">.००</span> इति </div> इति
संयुक्तः
.add-onएकं input prepend कर���तुं append कर्तुं च classes अपि च द्वौ उदाहरणौ उपयुज्यताम् ।
<div class="निवेश-पूर्वं निवेश-संलग्नकम्"> <span class="add-on">$</span> इति <input class="span2" id="संयुक्तप्रधाननिवेश" प्रकार="पाठ"> <span class="add-on">.००</span> इति </div> इति
पाठस्य स्थाने बटन्स्
<span>a with text इत्यस्य स्थाने , .btnएकं बटन् (अथवा द्वौ) इनपुट् मध्ये संलग्नं कर्तुं a इत्यस्य उपयोगं कुर्वन्तु ।
<div class="निवेश-संलग्नकम्"> <input class="span2" id="संयुक्तनिवेशबटन" प्रकार="पाठ"> <button class="btn" type="button">गच्छतु!</button> इति </div> इति
<div class="निवेश-संलग्नकम्"> <input class="span2" id="संलग्ननिवेशबटन" प्रकार="पाठ"> <button class="btn" type="button">अन्वेषणम्</button> <button class="btn" type="button">विकल्पाः</button> इति </div> इति
बटन ड्रॉपडाउन
<div class="निवेश-संलग्नकम्">
<input class="span2" id="संलग्नंDropdownButton" प्रकार="पाठ">
<दिव वर्ग="बटन-समूह">
<button class="btn ड्रॉपडाउन-टॉग्ल" data-toggle="ड्रॉपडाउन">
नामपत्र
<span class="caret"></span> इति
</बटन> इति
<ul class="अवरोहण-मेनू">
...
</ul> इति
</div> इति
</div> इति
<div class="निवेश-प्रीपेण्ड्">
<दिव वर्ग="बटन-समूह">
<button class="btn ड्रॉपडाउन-टॉग्ल" data-toggle="ड्रॉपडाउन">
नामपत्र
<span class="caret"></span> इति
</बटन> इति
<ul class="अवरोहण-मेनू">
...
</ul> इति
</div> इति
<input class="span2" id="पूर्वनिर्धारितDropdownButton" प्रकार="पाठ">
</div> इति
<div class="निवेश-पूर्वं निवेश-संलग्नकम्">
<दिव वर्ग="बटन-समूह">
<button class="btn ड्रॉपडाउन-टॉग्ल" data-toggle="ड्रॉपडाउन">
नामपत्र
<span class="caret"></span> इति
</बटन> इति
<ul class="अवरोहण-मेनू">
...
</ul> इति
</div> इति
<input class="span2" id="संलग्नप्रधानDropdownButton" प्रकार="पाठ">
<दिव वर्ग="बटन-समूह">
<button class="btn ड्रॉपडाउन-टॉग्ल" data-toggle="ड्रॉपडाउन">
नामपत्र
<span class="caret"></span> इति
</बटन> इति
<ul class="अवरोहण-मेनू">
...
</ul> इति
</div> इति
</div> इति
खोज प्रपत्र
<form class="रूप-अन्वेषणम्">
<div class="निवेश-संलग्नकम्">
<input type="text" class="span2 अन्वेषण-प्रश्न">
<button type="submit" class="btn">अन्वेषणम्</button>
</div> इति
<div class="निवेश-प्रीपेण्ड्">
<button type="submit" class="btn">अन्वेषणम्</button>
<input type="text" class="span2 अन्वेषण-प्रश्न">
</div> इति
</form> इति
आकार निर्धारण को नियंत्रित करें
.input-largeवर्गाणां उपयोगेन भवतः निवेशान् जालस्तम्भाकारैः सह यथा वा मेलनं वा इति सापेक्षिकआकारवर्गाणां उपयोगं .span*कुर्वन्तु ।
ब्लॉक स्तर इनपुट
कञ्चन <input>वा <textarea>तत्वं वा खण्डस्तरीयतत्त्ववत् व्यवहारं कुरुत ।
<input class="इनपुट-ब्लॉक-स्तर" प्रकार="पाठ" स्थानधारक=".इनपुट-ब्लॉक-स्तर">
सापेक्ष आकारीकरण
<input class="इनपुट-मिनी" प्रकार="पाठ" स्थानधारक=".इनपुट-मिनी"> <input class="निवेश-लघु" प्रकार="पाठ" स्थानधारक=".निवेश-लघु"> <input class="निवेश-माध्यम" प्रकार="पाठ" स्थानधारक=".निवेश-माध्यम"> <input class="निवेश-बृहत्" प्रकार="पाठ" स्थानधारक=".निवेश-बृहत्"> <input class="निवेश-xlarge" प्रकार="पाठ" स्थानधारक=".निवेश-xlarge"> <input class="इनपुट-xxlarge" प्रकार="पाठ" स्थानधारक=".इनपुट-xxlarge">
शिरः उपरि ! भविष्येषु संस्करणेषु, वयं अस्माकं बटन-आकारैः सह मेलयितुम् एतेषां सापेक्ष-निवेश-वर्गाणां उपयोगं परिवर्तयिष्यामः । यथा, .input-largeएकस्य इनपुट् इत्यस्य पैडिंग्, font-size च वर्धयिष्यति ।
जाल आकारीकरणम्
जालस्तम्भानां समानप्रमाणैः मेलयन्तः निवेशानां कृते .span1to इत्यस्य उपयोगं कुर्वन्तु ।.span12
<input class="span1" प्रकार="पाठ" स्थानधारक=".span1"> <input class="span2" प्रकार="पाठ" स्थानधारक=".span2"> <input class="span3" प्रकार="पाठ" स्थानधारक=".span3"> <select class="span1"> इति ... </select> इति <चयनं वर्ग="span2"> ... </select> इति <चयनं वर्ग="span3"> ... </select> इति
प्रतिपङ्क्तिं बहुविधजालनिवेशानां कृते, सम्यक् अन्तरालस्य कृते परिवर्तकवर्गस्य उपयोगं कुर्वन्तु.controls-row . इदं श्वेत-अन्तरिक्षं संकुचितुं निवेशान् प्लवति, सम्यक् मार्जिन्स् सेट् करोति, प्लवकं च स्वच्छं करोति ।
<div class="नियन्त्रयति"> <input class="span5" प्रकार="पाठ" स्थानधारक=".span5"> </div> इति <div class="नियन्त्रण-पङ्क्तिः नियन्त्रयति"> <input class="span4" प्रकार="पाठ" स्थानधारक=".span4"> <input class="span1" प्रकार="पाठ" स्थानधारक=".span1"> </div> इति ...
असंपादन योग्य इनपुट
वास्तविकरूपचिह्नस्य उपयोगं विना सम्पादनीयं न भवति इति रूपे दत्तांशं प्रस्तुतं कुर्वन्तु।
<span class="input-xlarge uneditable-input">अत्र किञ्चित् मूल्यम्</span>
कर्माणि रूप
क्रियासमूहेन (बटनैः) एकं रूपं समाप्तं कुर्वन्तु । यदा a अन्तः स्थापितं भवति तदा .form-horizontalबटन् स्वयमेव रूपनियन्त्रणैः सह पङ्क्तिबद्धं कर्तुं इण्डेन्ट् भविष्यति ।
<div class="रूप-क्रियाएँ"> <button type="submit" class="btn btn-primary">परिवर्तनानि रक्षतु</button> <button type="button" class="btn">रद्दं कुर्वन्तु</button> </div> इति
सहायता पाठ
प्रपत्रनियन्त्रणानां परितः दृश्यमानस्य सहायतापाठस्य कृते इनलाइन तथा ब्लॉकस्तरसमर्थनम् ।
इनलाइन सहायता
<input type="text"><span class="help-inline">अन्तर्गत सहायता पाठ</span>
सहायता अवरुद्ध करें
<input type="text"><span class="help-block">सहायतापाठस्य दीर्घतरः खण्डः यः नूतनपङ्क्तौ भग्नः भवति तथा च एकपङ्क्तितः परं विस्तारं कर्तुं शक्नोति ।</span>
रूप नियंत्रण अवस्थाएँ
प्रपत्रनियन्त्रणेषु लेबलेषु च मूलभूतप्रतिक्रियास्थितीभिः सह उपयोक्तृभ्यः आगन्तुकेभ्यः वा प्रतिक्रियां प्रदातव्यम्।
इनपुट फोकस
outlineवयं केषुचित् रूपनियन्त्रणेषु पूर्वनिर्धारितशैल्याः निष्कास्य box-shadowतस्य स्थाने a इत्यस्य कृते प्रयोजयामः :focus।
<input class="input-xlarge" id="focusedInput" type="text" value="इदं केन्द्रितम् अस्ति...">
अक्षम इनपुट
disabledउपयोक्तृनिवेशं निवारयितुं किञ्चित् भिन्नं रूपं प्रेरयितुं च निवेशस्य उपरि विशेषतां योजयन्तु ।
<input class="input-xlarge" id="disabledInput" type="text" placeholder="अत्र निवेशः अक्षमम्..." अक्षमम्>
प्रमाणीकरणं कथयति
बूटस्ट्रैप् इत्यत्र त्रुटिः, चेतावनी, सूचना, सफलतासन्देशाः च प्रमाणीकरणशैल्याः सन्ति । उपयोगाय, परितः समुचितं वर्गं योजयन्तु .control-group.
<div class="नियन्त्रण-समूह चेतावनी">
<label class="control-label" for="inputWarning">चेतावनी सह निवेशः</label>
<div class="नियन्त्रयति">
<इनपुट प्रकार="पाठ" id="इनपुटचेतावनी">
<span class="help-inline">किञ्चित् भ्रष्टं जातं स्यात्</span>
</div> इति
</div> इति
<div class="नियन्त्रण-समूहदोषः">
<label class="control-label" for="inputError">दोषेण सह निवेशः</label>
<div class="नियन्त्रयति">
<इनपुट प्रकार="पाठ" id="inputError">
<span class="help-inline">कृपया त्रुटिं सम्पादयतु</span>
</div> इति
</div> इति
<div class="नियन्त्रण-समूह सफलता">
<label class="control-label" for="inputSuccess">सफलतायाः सह निवेशः</label>
<div class="नियन्त्रयति">
<इनपुट प्रकार="पाठ" id="इनपुटसफलता">
<span class="help-inline">वूहू!</span> इति
</div> इति
</div> इति
चित्राणि
<img>कस्मिन् अपि परियोजनायां चित्राणि सुलभतया शैलीं कर्तुं कस्मिंश्चित् एलिमेण्ट् मध्ये क्लास्स् योजयन्तु ।
<img src="..." class="इमग्-गोलम्"> <img src="..." class="इमग्-वृत्त"> <img src="..." वर्ग="इमग्-पोलारोइड">
शिरः उपरि ! .img-roundedतथा समर्थनस्य .img-circleअभावात् IE7-8 इत्यस्मिन् कार्यं न कुर्वन्ति border-radius।
ग्लिफिकॉन्स द्वारा चिह्न
चिह्न ग्लिफ
स्प्राइट् रूपेण १४० चिह्नानि, गहरे धूसरवर्णे (पूर्वनिर्धारितरूपेण) श्वेतवर्णे च उपलभ्यन्ते, Glyphicons द्वारा प्रदत्तम् ।
ग्लिफिकॉन्स विशेषण
Glyphicons Halflings सामान्यतया निःशुल्कं न उपलभ्यते, परन्तु Bootstrap तथा Glyphicons निर्मातृणां मध्ये एकया व्यवस्थायाः कारणात् एतत् सम्भवं कृतम् अस्ति यत् विकासकर्तृत्वेन भवद्भ्यः निःशुल्कं भवति। धन्यवादरूपेण वयं भवन्तं प्रार्थयामः यत् यदा यदा व्यावहारिकं भवति तदा Glyphicons प्रति वैकल्पिकं लिङ्कं समावेशयन्तु ।
कथं प्रयोगः
सर्वेषु चिह्नेषु <i>अद्वितीयवर्गयुक्तं टैग् आवश्यकं भवति, यस्य उपसर्गः अस्ति icon-। उपयोगाय निम्नलिखितसङ्केतं प्रायः कुत्रापि स्थापयन्तु ।
<i class="चिह्न-अन्वेषण"></i>
उल्टा (श्वेत) चिह्नानां कृते अपि शैल्याः उपलभ्यन्ते, एकेन अतिरिक्तवर्गेण सह सज्जाः कृताः । वयं विशेषतया nav तथा dropdown links कृते hover तथा active states इत्यत्र एतत् वर्गं प्रवर्तयिष्यामः ।
<i class="चिह्न-अन्वेषण-चिह्न-श्वेत"></i>
शिरः उपरि ! <i>पाठस्य तारस्य पार्श्वे उपयोगं कुर्वन्, यथा बटन् अथवा nav लिङ्क् इत्यत्र, सम्यक् अन्तरालस्य कृते टैग् इत्यस्य अनन्तरं स्थानं अवश्यं त्यजन्तु ।
चिह्न उदाहरणानि
बटन्-मध्ये, टूल्-बार-कृते बटन्-समूहेषु, नेविगेशन-मध्ये, अथवा पूर्व-लम्बित-रूप-निवेशेषु तान् उपयुज्यताम् ।
बटन्स्
बटन् टूल्बार इत्यस्मिन् बटन् समूहः
<div class="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> इति
एकस्मिन् बटनसमूहे ड्रॉपडाउन्
<दिव वर्ग="बटन-समूह">
<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="icon-pencil"></i> सम्पादयतु</a></li>
<li><a href="#"><i class="icon-trash"></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-लघु" href="#"><i class="चिह्न-तारक"></i></a>
नेविगेशनम्
<ul class="नव नव-सूची"> <li class="active"><a href="#"><i class="icon-home चिह्न-श्वेत"></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 class="i"></i> विविध</a></li> इति </ul> इति
क्षेत्राणि रूपयन्तु
<div class="नियन्त्रण-समूह">
<label class="control-label" for="inputIcon">ईमेल-सङ्केतः</label>
<div class="नियन्त्रयति">
<div class="निवेश-प्रीपेण्ड्">
<span class="अधिकरणम्"><i class="चिह्न-लिफाफः"></i></span>
<input class="span2" id="इनपुटचिह्न" प्रकार="पाठ">
</div> इति
</div> इति
</div> इति