विस्तारयोग्यवर्गैः सह शैलीकृताः वर्धिताः च मौलिकाः HTML-तत्त्वानि ।
सर्वाणि HTML शीर्षकाणि, <h1>
माध्यमेन <h6>
उपलभ्यन्ते ।
Bootstrap इत्यस्य वैश्विकं पूर्वनिर्धारितं 14pxfont-size
अस्ति , with a of 20px . एतत् सर्वेषु च परिच्छेदेषु प्रयुक्तम् । तदतिरिक्तं, (अनुच्छेदाः) स्वस्य रेखा-उच्चतायाः आर्धस्य (पूर्वनिर्धारितरूपेण 9px) अधः मार्जिनं प्राप्नुवन्ति ।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 : @baseFontSize
and @baseLineHeight
. प्रथमं सम्पूर्णे प्रयुक्तं आधार-फन्ट-आकारं द्वितीयं च आधार-रेखा-उच्चता । वयं तान् चरानाम् उपयोगं कुर्मः तथा च केचन सरलगणितानि अस्माकं सर्वेषां प्रकारस्य मार्जिन्स्, पैडिंग्स्, रेखा-उच्चताः च निर्मातुं शक्नुमः तथा च अधिकानि । तान् अनुकूलितं कुर्वन्तु तथा च Bootstrap अनुकूलितं भवति।
हल्केन शैल्याः सह HTML इत्यस्य पूर्वनिर्धारित-बोध-टैग्-इत्यस्य उपयोगं कुर्वन्तु ।
<small>
पाठस्य अन्तःरेखायाः अथवा खण्डानां बोधं विना लघुटैग् इत्यस्य उपयोगं कुर्वन्तु ।
एषा पाठपङ्क्तिः सूक्ष्मलेखत्वेन व्यवहर्तुं अभिप्रेता अस्ति ।
<p> <small> एषा पाठपङ्क्तिः सूक्ष्मलेखत्वेन व्यवहर्तुं अभिप्रेता अस्ति । </small> </p> इति
<strong>
महत्त्वपूर्णेन सह पाठस्य एकस्य खण्डस्य बलं दातुं
निम्नलिखित पाठस्य स्निपेट् गाढपाठरूपेण प्रतिपादितम् अस्ति |
<strong> गाढपाठरूपेण प्रतिपादितम् </strong>
<em>
तनावयुक्तं पाठस्य खण्डं बोधयितुं
निम्नलिखित पाठस्य स्निपेट् इटालिककृतपाठरूपेण प्रतिपादितम् अस्ति |
<em> इटालिकपाठरूपेण प्रतिपादितम् </em>
शिरः उपरि ! उपयोगं कर्तुं निःशङ्कं भवन्तु <b>
तथा <i>
च HTML5 मध्ये। <b>
अतिरिक्त महत्त्वं न दत्त्वा शब्दान् वा वाक्यानि वा प्रकाशयितुं अभिप्रेतम् अस्ति यदा <i>
तु अधिकतया स्वरस्य, तकनीकीपदानां इत्यादीनां कृते भवति।
<abbr>
विस्तारितं संस्करणं होवर इत्यत्र दर्शयितुं संक्षिप्तशब्दानां संक्षिप्तनामानां च कृते HTML इत्यस्य तत्त्वस्य शैलीबद्धं कार्यान्वयनम् । विशेषतायुक्तेषु संक्षिप्तरूपेषु title
हल्के बिन्दुयुक्ता अधः सीमा भवति तथा च होवर इत्यत्र सहायताकर्सरः भवति, यत् होवर इत्यत्र अतिरिक्तसन्दर्भं प्रदाति ।
<abbr>
संक्षिप्तस्य दीर्घ-प्रहारस्य विस्तारित-पाठस्य कृते title
विशेषणं समावेशयन्तु ।
विशेषणशब्दस्य एकः संक्षिप्तः नाम attr अस्ति .
<abbr title = "विशेषणम्" > attr </abbr>
<abbr class="initialism">
.initialism
किञ्चित् लघु font-size कृते संक्षिप्तरूपेण योजयन्तु ।
HTML इत्येतत् स्लाइस्ड् ब्रेड् इत्यस्मात् उत्तमं वस्तु अस्ति।
<abbr title = "विशेषण" class = "प्रारम्भवाद" > attr </abbr>
निकटतम पूर्वज या सम्पूर्ण कार्य निकाय हेतु सम्पर्क जानकारी प्रस्तुत करें।
<address>
सर्वाणि पङ्क्तयः <br>
.
- <संबोधनम्>
- <strong> ट्विटर, इन्क </strong><br>
- 795 फोल्सम एवेन्यू, सुइट 600 <br>
- सैन फ्रांसिस्को, सीए 94107 <br>
- <abbr title = "फोन" > पु: </abbr> (१२३) ४५६-७८९०
- </address> इति
- <संबोधनम्>
- <strong> पूर्ण नाम </strong><br>
- <a href = "mailto:#" > प्रथमं.अन्तिम@जीमेल.कॉम </a>
- </address> इति
भवतः दस्तावेजस्य अन्तः अन्यस्मात् स्रोतः सामग्रीखण्डानां उद्धरणार्थं ।
<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 कृते उपयुज्यताम् ।
- <blockquote class = "पुल-राइट" >
- ...
- </blockquote> इति
यस्मिन् द्रव्ये क्रमस्य स्पष्टतया महत्त्वं नास्ति तस्य सूची ।
- <उल> इति
- <li> ... </li> इति
- </ul> इति
यस्मिन् द्रव्ये क्रमः स्पष्टतया महत्त्वपूर्णं करोति तस्य सूची।
- <ol> इति
- <li> ... </li> इति
- </ol> इति
list-style
वामपैडिंगं नास्ति वा अतिरिक्तं वा युक्तानां वस्तूनाम् सूची ।
- <ul class = "अशैली" >
- <li> ... </li> इति
- </ul> इति
पदानाम् सूची तेषां सम्बद्धवर्णनैः सह ।
- <दल्> इति
- <dt> ... </dt> इति
- <dd> ... </dd> इति
- </dl> इति
<dl>
पार्श्वतः पार्श्वतः पङ्क्तिबद्धरूपेण पदानि वर्णनानि च कुर्वन्तु ।
- <dl वर्ग = "dl-क्षैतिज" >
- <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-child
CSS चयनकर्ता (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 |
खतरनाकं सम्भाव्यं वा नकारात्मकं कार्यं सूचयति। |
.info |
पूर्वनिर्धारितशैल्याः विकल्परूपेण उपयुज्यते । |
# . | उत्पाद | भुगतान लिया | स्थितिः |
---|---|---|---|
१ | टीबी - मासिकम् | 01/04/2012 को | अनुमत |
२ | टीबी - मासिकम् | 02/04/2012 को | अस्वीकृत |
३ | टीबी - मासिकम् | 03/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> |
स्तम्भस्य (अथवा पङ्क्तिः, व्याप्तेः स्थापनस्य च आधारेण) लेबलानां कृते विशेषसारणीकोष्ठकस्य अन्तः अवश्यमेव उपयोगः करणीयः a <thead> |
<caption> |
सारणी किं धारयति तस्य वर्णनं वा सारांशं वा, विशेषतः स्क्रीन रीडराणां कृते उपयोगी |
- <सारणी>
- <caption> ... </caption> इति
- <शिरः> इति
- <त्र> इति
- <थ> ... </th> इति
- <थ> ... </th> इति
- </tr> इति
- </thead> इति
- <त्काय> इति
- <त्र> इति
- <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>
- </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 = "पाठ" स्थानधारक = "पाठ इनपुट" >
रूपनियन्त्रणं यत् पाठस्य बहुपङ्क्तयः समर्थयति। row
आवश्यकतानुसारं विशेषतां परिवर्तयन्तु ।
- <पाठक्षेत्रपङ्क्तयः = "३" ></ 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> इति
- <विकल्पः> ५ </विकल्पः>
- </select> इति
- < बहुल चयन करें = "बहुल" >
- <विकल्पः> १ </option>
- <विकल्पः> २ </option>
- <विकल्पः> ३ </option> इति
- <विकल्पः> ४ </option> इति
- <विकल्पः> ५ </विकल्पः>
- </select> इति
विद्यमानब्राउजरनियन्त्रणानां उपरि योजयित्वा, Bootstrap इत्यत्र अन्ये उपयोगीरूपघटकाः समाविष्टाः सन्ति ।
कस्यचित् पाठ-आधारित-निवेशस्य पूर्वं वा पश्चात् वा पाठं वा बटनं वा योजयन्तु । select
अत्र तत्त्वानि समर्थितानि न सन्ति इति अवलोकयन्तु ।
एकं इनपुट् मध्ये पाठं पूर्वं योजयितुं वा योजयितुं वा द्वयोः वर्गयोः एकेन सह an .add-on
and an इति वेष्टयन्तु ।input
- <div class = "निवेश-पूर्वनिर्धारित" >
- <span class = "add-on" > @ </span><input class = "span2" id = "prependedInput" आकार = "16" प्रकार = "पाठ" स्थानधारक = "उपयोक्तृनाम" >
- </div> इति
- <div class = "निवेश-संलग्न" >
- <input class = "span2" id = "appendedInput" आकार = "16" प्रकार = "पाठ" ><span वर्ग = "जोड़-ऑन" > .00 </span>
- </div> इति
.add-on
एकं input prepend कर्तुं append कर्तुं च classes अपि च द्वौ उदाहरणौ उपयुज्यताम् ।
- <div class = "निवेश-पूर्वनिर्धारित इनपुट-संलग्नक" >
- <span वर्ग = "जोड़-ऑन" > $ </span><इनपुट वर्ग = "span2" id = "appendedPrependedInput" आकार = "16" प्रकार = "पाठ" ><span वर्ग = "जोड़-ऑन" > .00 </span> इति
- </div> इति
<span>
a with text इत्यस्य स्थाने , .btn
एकं बटन् (अथवा द्वौ) इनपुट् मध्ये संलग्नं कर्तुं a इत्यस्य उपयोगं कुर्वन्तु ।
- <div class = "निवेश-संलग्न" >
- <इनपुट वर्ग = "span2" id = "appendedInputButton" आकार = "16" प्रकार = "पाठ" ><बटन वर्ग = "btn" प्रकार = "बटन" > जाओ! </बटन> इति
- </div> इति
- <div class = "निवेश-संलग्न" >
- <input class = "span2" id = "appendedInputButtons" आकार = "16" प्रकार = "पाठ" ><बटन वर्ग = "btn" प्रकार = "बटन" > खोज </button><बटन वर्ग = "btn" प्रकार = "बटन" > विकल्पाः </button>
- </div> इति
- <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*
कुर्वन्तु ।
- <इनपुट वर्ग = "इनपुट-मिनी" प्रकार = "पाठ" स्थानधारक = ".इनपुट-मिनी" >
- <निवेश वर्ग = "निवेश-लघु" प्रकार = "पाठ" स्थानधारक = ".निवेश-लघु" >
- <इनपुट वर्ग = "इनपुट-माध्यम" प्रकार = "पाठ" स्थानधारक = ".इनपुट-माध्यम" >
- <इनपुट वर्ग = "इनपुट-बड़े" प्रकार = "पाठ" स्थानधारक = ".इनपुट-बड़े" >
- <इनपुट वर्ग = "इनपुट-xlarge" प्रकार = "पाठ" स्थानधारक = ".इनपुट-xlarge" >
- <इनपुट वर्ग = "इनपुट-xxlarge" प्रकार = "पाठ" स्थानधारक = ".इनपुट-xxlarge" >
शिरः उपरि ! भविष्येषु संस्करणेषु, वयं अस्माकं बटन-आकारैः सह मेलयितुम् एतेषां सापेक्ष-निवेश-वर्गाणां उपयोगं परिवर्तयिष्यामः । यथा, .input-large
एकस्य इनपुट् इत्यस्य पैडिंग्, font-size च वर्धयिष्यति ।
जालस्तम्भानां समानप्रमाणैः मेलयन्तः निवेशानां कृते .span1
to इत्यस्य उपयोगं कुर्वन्तु ।.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-horizontal
बटन् स्वयमेव रूपनियन्त्रणैः सह पङ्क्तिबद्धं कर्तुं इण्डेन्ट् भविष्यति ।
- <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 = "यह केन्द्रित है..." >
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 = "inputSuccess" > सफलतापूर्वकं निवेशः </label>
- <div वर्ग = "नियंत्रण करता है" >
- <इनपुट प्रकार = "पाठ" id = "इनपुटसफलता" >
- <span class = "सहायता-इनलाइन" > वूहू! </span> इति
- </div> इति
- </div> इति
<img>
कस्मिन् अपि परियोजनायां चित्राणि सुलभतया शैलीं कर्तुं कस्मिंश्चित् एलिमेण्ट् मध्ये क्लास्स् योजयन्तु ।
- <img src = "..." वर्ग = "img-गोल" >
- <img src = "..." वर्ग = "img-वृत्त" >
- <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 वर्ग = "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-small" href = "#" ><i वर्ग = "चिह्न-तारक" ></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 वर्ग = "जोड़-ऑन" ><i वर्ग = "चिह्न-लिफाफा" ><i><span><इनपुट वर्ग = "span2" id = "inputIcon" प्रकार = "पाठ" >
- </div> इति
- </div> इति