मचानस्य उपरि, मूलभूत HTML तत्त्वानि शैलीकृतानि सन्ति, विस्तारयोग्यवर्गैः सह वर्धितानि च सन्ति येन ताजां, सुसंगतं रूपं, भावः च प्राप्यते ।
सम्पूर्णं मुद्रणजालम् अस्माकं variables.less सञ्चिकायां Less चरद्वये आधारितम् अस्ति: @baseFontSizeand @baseLineHeight. प्रथमं सम्पूर्णे प्रयुक्तं आधार-अभिलेख-आकारं द्वितीयं च आधार-रेखा-उच्चता ।
वयं तान् चरानाम्, किञ्चित् गणितं च, अस्माकं सर्वेषां प्रकारस्य मार्जिन्स्, पैडिंग्स्, रेखा-उच्चताः च निर्मातुं उपयुञ्ज्महे ।
Nullam quis risus eget उर्ना mollis ornare वेल ईउ लियो. सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus. Nullam id dolor id nibh ultrices vehicula उत id elit.
Vivamus sagittis lacus vel augue laoreet रटरुम फौसिबस डोलोर नीलामी. Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula, eget lacinia odio सेम nec अभिजात वर्ग. डोनेक सेद ओडियो दुई।
| तत्व | प्रयोगः | वैकल्पिक |
|---|---|---|
<strong> |
महत्त्वपूर्णेन सह पाठस्य एकस्य खण्डस्य बलं दातुं | न कश्चित् |
<em> |
तनावयुक्तं पाठस्य खण्डं बोधयितुं | न कश्चित् |
<abbr> |
होवर इत्यत्र विस्तारितं संस्करणं दर्शयितुं संक्षिप्तनामानि संक्षिप्तनामानि च लपेटयति |
.initialismउदात्तसंक्षेपाणां कृते वर्गस्य उपयोगं कुर्वन्तु । |
<address> |
इसके निकटतम पूर्वज या सम्पूर्ण कार्य निकाय हेतु सम्पर्क जानकारी हेतु | इत्यनेन सर्वाणि पङ्क्तयः समाप्तं कृत्वा स्वरूपणं संरक्षितं कुर्वन्तु<br> |
Fusce dapibus , tellus ac cursus commodo , tortor मौरिस condimentum निभ , उत fermentum massa justo बैठो amet risus. Maecenas faucibus मोलिस इंटरडम। नुल्ला विटाए एलिट् लिबेरो, एक फारेत्र औगुए।
नोटः-<b> HTML5 इत्यस्मिन् च उपयोगाय निःशङ्कं भवन्तु <i>, परन्तु तेषां उपयोगः किञ्चित् परिवर्तितः अस्ति । <b>अतिरिक्त महत्त्वं न दत्त्वा शब्दान् वा वाक्यानि वा प्रकाशयितुं अभिप्रेतम् अस्ति यदा <i>तु अधिकतया स्वरस्य, तकनीकीपदानां इत्यादीनां कृते भवति।
<address>अत्र टैग् कथं उपयोक्तुं शक्यते इति उदाहरणद्वयम् अस्ति ।
विशेषतायुक्तानां संक्षिप्तनामानां titleलघुबिन्दुयुक्ता अधः सीमा भवति तथा च होवर इत्यत्र सहायताकर्सरः भवति । एतेन उपयोक्तृभ्यः अतिरिक्तं संकेतं प्राप्यते यत् किमपि होवर इत्यत्र दर्शितं भविष्यति ।
initialismकिञ्चित् लघु पाठ आकारं दत्त्वा मुद्रणसमन्वयं वर्धयितुं संक्षिप्तरूपेण वर्गं योजयन्तु ।
HTML इत्येतत् sliced bread इत्यस्मात् परं सर्वोत्तमम् अस्ति।
विशेषणशब्दस्य एकः संक्षिप्तः नाम attr अस्ति .
| तत्व | प्रयोगः | वैकल्पिक |
|---|---|---|
<blockquote> |
अन्यस्मात् स्रोतः सामग्री उद्धृत्य खण्ड-स्तरीय-तत्त्वम् |
.pull-leftच उपयुज्यताम्.pull-right |
<small> |
उपयोक्तृमुखी उद्धरणं योजयितुं वैकल्पिकं तत्त्वं, सामान्यतया कार्यस्य शीर्षकयुक्तः लेखकः | <cite>स्रोतस्य शीर्षकं वा नाम वा परितः स्थापयतु |
ब्लॉककोट् समावेशयितुं, उद्धरणरूपेण <blockquote>किमपि HTML परितः वेष्टयन्तु । सीधा उद्धरणार्थं वयं एकं <p>.
स्वस्य स्रोतः उद्धृतुं वैकल्पिकं <small>तत्त्वं समावेशयन्तु तथा च भवन्तः —स्टाइलिंग् प्रयोजनार्थं तस्मात् पूर्वं em dash प्राप्नुवन्ति ।
- <blockquote> इति
- <p> लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante venenatis. </p> इति
- <लघु> कश्चित् प्रसिद्धः </small>
- </blockquote> इति
पूर्वनिर्धारितं blockquotes इत्येतत् एवम् शैलीकृतम् अस्ति :
लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante venenatis.
Body of work इत्यस्मिन् कश्चन प्रसिद्धः
स्वस्य blockquote दक्षिणतः प्लवितुं, योजयन्तु class="pull-right":
लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante venenatis.
Body of work इत्यस्मिन् कश्चन प्रसिद्धः
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
शिरः उपरि ! क्षैतिजवर्णनसूचिकाः तान् पदान् च्छेदयिष्यन्ति ये वामस्तम्भनिराकरणे युक्तं कर्तुं अतिदीर्घाः सन्ति text-overflow| संकीर्णतरेषु viewports मध्ये, ते पूर्वनिर्धारित stacked layout मध्ये परिवर्तयिष्यन्ति ।
कोडस्य इनलाइन स्निपेट्स् इत्यनेन सह लपेटयन्तु <code>।
- यथा , <code> विभागः < / code > inline इति वेष्टितव्यः |
<pre>कोडस्य बहुपङ्क्तयः कृते उपयुज्यताम् । सम्यक् प्रतिपादनार्थं कोडमध्ये किमपि कोणकोष्ठकं अवश्यं पलायन्तु ।
<p>अत्र नमूना पाठः...</p>
- <पूर्व> इति
- <p>अत्र नमूना पाठः...</p>
- </pre> इति
नोटः-<pre> टैग्-अन्तर्गतं कोडं यथासम्भवं वामभागे समीपे अवश्यं स्थापयन्तु ; सर्वान् ट्याब्स् रेण्डर् करिष्यति ।
भवान् वैकल्पिकरूपेण .pre-scrollableवर्गं योजयितुं शक्नोति यत् 350px इत्यस्य max-height सेट् करिष्यति तथा च y-axis scrollbar प्रदास्यति ।
समानं <pre>तत्वं गृहीत्वा वर्धितप्रतिपादनार्थं वैकल्पिकवर्गद्वयं योजयन्तु ।
- <p> अत्र पाठस्य नमूना... </p>
- <pre class = "सुन्दरमुद्रणम्।"
- रेखाङ्काः" >
- <p>अत्र नमूना पाठः...</p>
- </pre> इति
google-code-prettify इत्येतत् डाउनलोड् कृत्वा कथं उपयोगः कर्तव्यः इति readme इत्येतत् पश्यन्तु ।
| सूचकपत्त्र | वर्णनम् |
|---|---|
<table> |
सारणीबद्धरूपेण दत्तांशं प्रदर्शयितुं वेष्टनतत्त्वम् |
<thead> |
सारणीस्तम्भान् <tr>लेबलं कर्तुं सारणीशीर्षकपङ्क्तयः ( ) कृते पात्रतत्त्वम् |
<tbody> |
<tr>सारणीयाः शरीरे सारणीपङ्क्तयः ( ) कृते पात्रतत्त्वम् |
<tr> |
एकस्मिन् पङ्क्तौ दृश्यमानस्य सारणीकोशिकानां ( <td>अथवा ) समुच्चयस्य कृते पात्रतत्त्वम्<th> |
<td> |
पूर्वनिर्धारित सारणी कोष्ठक |
<th> |
स्तम्भस्य (अथवा पङ्क्तिः, व्याप्तेः स्थापनस्य च आधारेण) लेबलानां कृते विशेषसारणीकोष्ठकस्य अन्तः अवश्यमेव उपयोगः करणीयः a <thead> |
<caption> |
सारणी किं धारयति तस्य वर्णनं वा सारांशं वा, विशेषतः स्क्रीन रीडराणां कृते उपयोगी |
- <सारणी>
- <शिरः> इति
- <tr> इति
- <थ> ... </th> इति
- <थ> ... </th> इति
- </tr> इति
- </thead> इति
- <त्काय> इति
- <tr> इति
- <td> ... </td> इति
- <td> ... </td> इति
- </tr> इति
- </tbody> इति
- </table> इति
| नामः | श्रेणी | वर्णनम् |
|---|---|---|
| मूलभूतम् | न कश्चित् | न शैल्याः, केवलं स्तम्भाः पङ्क्तयः च |
| आधारभूत | .table |
केवलं पङ्क्तयः मध्ये क्षैतिजरेखाः |
| सीमायुक्तः | .table-bordered |
कोणान् गोलं कृत्वा बाह्यसीमाम् योजयति |
| ज़ेबरा-पट्टिका | .table-striped |
विषमपङ्क्तयः (१, ३, ५, इत्यादिषु) हल्के ग्रे पृष्ठभूमिवर्णं योजयति । |
| सघनः | .table-condensed |
ऊर्ध्वाधरपैडिंग् अर्धभागे कटयति, 8px तः 4px पर्यन्तं, सर्वेषां अन्तः tdच thतत्त्वानां अन्तः |
पठनीयतां सुनिश्चित्य संरचनां निर्वाहयितुं सारणीः स्वयमेव केवलं कतिपयैः सीमाभिः सह शैलीकृताः भवन्ति । २.० इत्यनेन सह .tableवर्गः आवश्यकः ।
- <सारणी वर्ग = "सारणी" >
- ...
- </table> इति
| # . | प्रथम नाम्ना | अंतिम नाम्ना | उपयोक्तृनाम |
|---|---|---|---|
| १ | मार्क | ओटो | @मडो |
| २ | याकूबः | थॉर्न्टन इति | @स्थूलः |
| ३ | ल्यारी | the Bird इति | @ twitter इति |
ज़ेबरा-पट्टिकां योजयित्वा स्वसारणीभिः सह किञ्चित् आडम्बरं प्राप्नुवन्तु-मात्रं .table-stripedवर्गं योजयन्तु।
नोट्: स्ट्राइप्ड् टेबल्स् :nth-childCSS चयनकर्ता इत्यस्य उपयोगं कुर्वन्ति तथा च IE7-IE8 इत्यस्मिन् उपलब्धं नास्ति ।
- <table class = "सारणी तालिका-धारी" >
- ...
- </table> इति
| # . | प्रथम नाम्ना | अंतिम नाम्ना | उपयोक्तृनाम |
|---|---|---|---|
| १ | मार्क | ओटो | @मडो |
| २ | याकूबः | थॉर्न्टन इति | @स्थूलः |
| ३ | ल्यारी | the Bird इति | @ twitter इति |
सौन्दर्यार्थं सम्पूर्णे मेजस्य परितः सीमाः, गोलकोणानि च योजयन्तु।
- <table class = "सारणी सारणी-सीमायुक्त" >
- ...
- </table> इति
| # . | प्रथम नाम्ना | अंतिम नाम्ना | उपयोक्तृनाम |
|---|---|---|---|
| १ | मार्क | ओटो | @मडो |
| मार्क | ओटो | @ getbootstrap इति | |
| २ | याकूबः | थॉर्न्टन इति | @स्थूलः |
| ३ | लैरी द बर्ड | @ twitter इति | |
.table-condensedtable cell padding इत्यस्य अर्धभागे (8px तः 4px पर्यन्तं) कटयितुं वर्गं योजयित्वा स्वसारणीः अधिकं संकुचितं कुर्वन्तु ।
- <table class = "सारणी सारणी-सघन" >
- ...
- </table> इति
| # . | प्रथम नाम्ना | अंतिम नाम्ना | उपयोक्तृनाम |
|---|---|---|---|
| १ | मार्क | ओटो | @मडो |
| २ | याकूबः | थॉर्न्टन इति | @स्थूलः |
| ३ | लैरी द बर्ड | @ twitter इति | |
उपलब्धवर्गेषु कस्यापि उपयोगेन भिन्नरूपं प्राप्तुं सारणीवर्गेषु कस्यापि संयोजनं कर्तुं निःशङ्कं भवन्तु।
- <table class = "सारणी सारणी-पट्टिकायुक्ता सारणी-सीमायुक्ता सारणी-घनीभूता" >
- ...
- </table> इति
| पूर्ण नाम | |||
|---|---|---|---|
| # . | प्रथम नाम्ना | अंतिम नाम्ना | उपयोक्तृनाम |
| १ | मार्क | ओटो | @मडो |
| २ | याकूबः | थॉर्न्टन इति | @स्थूलः |
| ३ | लैरी द बर्ड | @ twitter इति | |
Bootstrap मध्ये forms विषये सर्वोत्तमः भागः अस्ति यत् भवतः सर्वे इनपुट् नियन्त्रणानि च महान् दृश्यन्ते यद्यपि भवान् स्वस्य मार्कअप मध्ये तान् कथं निर्माति। अनावश्यकं HTML आवश्यकं नास्ति, परन्तु येषां आवश्यकता वर्तते तेषां कृते वयं प्रतिमानं प्रदामः ।
अधिकजटिलविन्यासाः संक्षिप्तशैलीकरणाय तथा घटनाबन्धनार्थं संक्षिप्तैः स्केलयोग्यवर्गैः सह आगच्छन्ति, अतः भवन्तः प्रत्येकं पदे आच्छादिताः भवन्ति ।
बूटस्ट्रैप् चतुर्णां प्रकारस्य प्रपत्रविन्यासानां समर्थनेन सह आगच्छति:
विभिन्नप्रकारस्य रूपविन्यासस्य मार्कअपार्थं केचन परिवर्तनानि आवश्यकानि भवन्ति, परन्तु नियन्त्रणानि एव समानानि एव तिष्ठन्ति, व्यवहारं च कुर्वन्ति ।
Bootstrap इत्यस्य प्रपत्रेषु सर्वेषां आधाररूपनियन्त्रणानां कृते शैल्याः सन्ति यथा input, textarea, चयनं च यत् भवान् अपेक्षते । परन्तु इदं appended तथा prepended inputs इत्यादीनां custom components इत्यस्य संख्यायाः सह अपि आगच्छति तथा च checkboxes इत्यस्य सूचीनां समर्थनम् अस्ति ।
प्रत्येकं प्रकारस्य रूपनियन्त्रणस्य कृते त्रुटिः, चेतावनी, सफलता च इत्यादीनि अवस्थानि समाविष्टानि सन्ति । अक्षमनियन्त्रणानां कृते शैल्याः अपि समाविष्टाः सन्ति ।
बूटस्ट्रैप् सामान्यजालरूपस्य चतुर्णां शैलीनां कृते सरलं मार्कअपं शैल्यां च प्रदाति ।
| नामः | श्रेणी | वर्णनम् |
|---|---|---|
| ऊर्ध्वाधर (पूर्वनिर्धारित) . | .form-vertical (न आवश्यकम्) २. |
नियन्त्रणानां उपरि स्तम्भिताः, वाम-संरेखिताः लेबलाः |
| इनलाइन | .form-inline |
संकुचितशैल्याः कृते वाम-संरेखित-लेबलं तथा इनलाइन-ब्लॉक-नियन्त्रणानि |
| अन्वेषण | .form-search |
एक ठेठ अन्वेषण सौन्दर्यशास्त्र के लिए अतिरिक्त-गोल पाठ इनपुट |
| क्षैतिज | .form-horizontal |
नियन्त्रणानां समानरेखायां वाम, दक्षिण-संरेखितानि लेबलानि प्लवन्तु |
अतिरिक्त मार्कअपं विना स्मार्ट तथा हल्के पूर्वनिर्धारितं भवति।
- <form class = "अच्छा" >
- <label> लेबल नाम </label>
- <input type = "text" class = "span3" placeholder = "किञ्चित् टङ्कयतु..." >
- <span class = "help-block" > अत्र अवरोधस्तरीयसहायतापाठस्य उदाहरणम् । </span> इति
- <label class = "चेकबॉक्स" >
- <input type = "checkbox" > मां पश्यन्तु
- </label> इति
- <button type = "submit" class = "btn" > प्रस्तुत करें </button>
- </form> इति
.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 layout दत्तं, अत्र प्रथमेन input and control group इत्यनेन सह सम्बद्धं markup अस्ति । , .control-group, .control-labelतथा .controlsवर्गाः सर्वे स्टाइलिंग् कृते आवश्यकाः सन्ति ।
- <form class = "रूप-क्षैतिज" >
- <क्षेत्रसमूहः>
- <legend> आख्यायिका पाठ </legend>
- <div वर्ग = "नियंत्रण-समूह" >
- <label class = "control-label" for = "input01" > पाठ निवेश </label>
- <div वर्ग = "नियंत्रण करता है" >
- <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट- xlarge" id = "इनपुट 01" >
- <p class = "help-block" > समर्थनपाठः </p>
- </div> इति
- </div> इति
- </fieldset> इति
- </form> इति
disabledबूटस्ट्रैप् ब्राउजर्-समर्थित-केन्द्रित- राज्यानां कृते शैल्याः विशेषतां ददाति । वयं पूर्वनिर्धारितं Webkit निष्कास्य तस्य स्थाने outlinea इत्यस्य कृते प्रयोजयामः ।box-shadow:focus
अस्मिन् दोषाणां, चेतावनीनां, सफलतायाः च प्रमाणीकरणशैल्याः अपि समाविष्टाः सन्ति । उपयोगाय, परितः मध्ये त्रुटिवर्गं योजयन्तु .control-group।
- <क्षेत्रसमूहः
- class = "नियन्त्रण-समूह त्रुटि" >
- ...
- </fieldset> इति
इनपुट् समूहाः—संलग्नेन वा पूर्वेण वा पाठेन सह—भवतः निवेशानां कृते अधिकं सन्दर्भं दातुं सुलभं मार्गं प्रदान्ति । महान् उदाहरणानि सन्ति ट्विटर-उपयोक्तृनामानां कृते @ चिह्नं अथवा वित्तस्य कृते $ इति ।
v1.4 पर्यन्तं Bootstrap इत्यस्य चेकबॉक्स् रेडियो च परितः अतिरिक्तं मार्कअप् आवश्यकम् आसीत् तान् स्तम्भयितुं । अधुना, इदं सरलं विषयं पुनरावृत्तिः <label class="checkbox">यत् wraps the <input type="checkbox">.
इन्लाइन् चेकबॉक्स् रेडियो च समर्थिताः सन्ति । .inlineकेवलं कस्मिंश्चित् .checkboxवा योजयन्तु .radioतथा च भवन्तः कृतवन्तः।
.add-oninline रूपे prepend अथवा append इनपुट् इत्यस्य उपयोगाय, and inputइत्येतत् एकस्मिन् एव रेखायां, रिक्तस्थानं विना, अवश्यं स्थापयन्तु ।
स्वस्य प्रपत्रनिवेशानां कृते सहायतापाठं योजयितुं, निवेशतत्त्वस्य अनन्तरं सह inline help text with <span class="help-inline">अथवा help text block with इति समावेशयन्तु ।<p class="help-block">
प्रत्येकं चिह्नं अतिरिक्तं अनुरोधं कर्तुं स्थाने, वयं तान् एकस्मिन् sprite मध्ये संकलितवन्तः-एकस्मिन् सञ्चिकायां चित्राणां समूहः यः CSS इत्यस्य उपयोगेन चित्राणि background-positionस्थापयति एषा एव पद्धतिः वयं Twitter.com इत्यत्र उपयुञ्ज्महे तथा च अस्माकं कृते साधु कार्यं कृतवती।
सर्वे चिह्नवर्गाः .icon-सम्यक् नामान्तरणस्य व्याप्तिकरणस्य च कृते सह उपसर्गः भवति, अस्माकं अन्येषां घटकानां इव । एतेन अन्यैः साधनैः सह विग्रहं परिहरितुं साहाय्यं भविष्यति ।
Glyphicons इत्यनेन अस्माकं open-source toolkit इत्यस्मिन् Halflings सेट् इत्यस्य उपयोगः अनुमोदितः यत् वयं अत्र docs इत्यत्र लिङ्क् क्रेडिट् च प्रदामः। कृपया स्वप्रकल्पेषु अपि तथैव कर्तुं विचारयन्तु।
बूटस्ट्रैप् <i>सर्वेषां चिह्नानां कृते टैग् इत्यस्य उपयोगं करोति, परन्तु तेषु केस क्लास् नास्ति-केवलं साझा उपसर्गः । उपयोगाय निम्नलिखितसङ्केतं प्रायः कुत्रापि स्थापयन्तु ।
- <i class = "चिह्न-अन्वेषण" </i>
उल्टा (श्वेत) चिह्नानां कृते अपि शैल्याः उपलभ्यन्ते, एकेन अतिरिक्तवर्गेण सह सज्जाः कृताः:
- <i class = "चिह्न-अन्वेषण चिह्न-श्वेत" ></i>
भवतः चिह्नानां कृते १२० वर्गाः चयनार्थं सन्ति । केवलं समीचीनवर्गैः सह एकं टैग् योजयन्तु <i>ततः भवन्तः सेट् भवन्ति । पूर्णसूचीं sprites.less इत्यत्र अथवा अत्रैव अस्मिन् दस्तावेजे द्रष्टुं शक्नुवन्ति ।
शिरः उपरि ! <i>पाठस्य तारस्य पार्श्वे उपयोगं कुर्वन्, यथा बटन् अथवा nav लिङ्क् इत्यत्र, सम्यक् अन्तरालस्य कृते टैग् इत्यस्य अनन्तरं स्थानं अवश्यं त्यजन्तु ।
चिह्नानि महान् सन्ति, परन्तु तान् कुत्र उपयुज्यते स्म ? अत्र कतिचन विचाराः सन्ति- १.
मूलतः, यत्र कुत्रापि भवन्तः <i>टैग् स्थापयितुं शक्नुवन्ति, तत्र भवन्तः चिह्नं स्थापयितुं शक्नुवन्ति ।
बटन्-मध्ये, टूल्-बार-कृते बटन्-समूहेषु, नेविगेशन-मध्ये, अथवा पूर्व-लम्बित-रूप-निवेशेषु तान् उपयुज्यताम् ।