शीर्षकहरू

सबै HTML शीर्षकहरू <h1>उपलब्ध <h6>छन्।

h1। शीर्षक १

h2। शीर्षक २

h3। शीर्षक ३

h4। हेडिङ ४

h5। हेडिङ ५

h6। हेडिङ ६

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

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

Nullam quis risus eget urna mollis ornare vel eu leo। Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. नुल्लम आईडी डोलर आईडी निभ अल्ट्रासिस वाहन।

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

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

<p> ... </p>

नेतृत्व शरीर प्रतिलिपि

एउटा अनुच्छेद थपेर बाहिर खडा बनाउनुहोस् .lead।

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor। Duis mollis, est non commodo luctus।

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

कम संग निर्मित

टाइपोग्राफिक स्केल variables.less मा दुई कम चरहरूमा आधारित छ : @baseFontSizeर @baseLineHeight। पहिलो आधार फन्ट-साइज भर प्रयोग गरिन्छ र दोस्रो आधार रेखा-उचाइ हो। हामी ती चरहरू र हाम्रा सबै प्रकारका मार्जिनहरू, प्याडिङहरू, र रेखा-उचाइहरू सिर्जना गर्न केही सरल गणित प्रयोग गर्छौं। तिनीहरूलाई अनुकूलन गर्नुहोस् र बुटस्ट्र्याप अनुकूलन गर्नुहोस्।

जोड

हल्का वजन शैलीहरूसँग HTML को पूर्वनिर्धारित जोर ट्यागहरू प्रयोग गर्नुहोस्।

`<small>`

इनलाइन वा पाठको ब्लकहरूमा जोड दिनको लागि , सानो ट्याग प्रयोग गर्नुहोस्।

पाठको यो लाइनलाई राम्रो छापको रूपमा व्यवहार गर्नको लागि हो।

<p> <small> पाठको यो लाइनलाई राम्रो छापको रूपमा व्यवहार गर्नको लागि हो। </small> </p>

बोल्ड

भारी फन्ट-वजनको साथ पाठको स्निपेटलाई जोड दिनको लागि।

पाठको निम्न स्निपेट बोल्ड पाठको रूपमा रेन्डर गरिएको छ ।

<strong> बोल्ड पाठको रूपमा रेन्डर गरिएको </strong>

इटालिक

इटालिकको साथ पाठको स्निपेटलाई जोड दिनको लागि।

पाठको निम्न स्निपेट इटालिक पाठको रूपमा रेन्डर गरिएको छ ।

<em> इटालिक पाठको रूपमा रेन्डर गरिएको </em>

हेड अप!HTML5 मा प्रयोग <b>गर्न स्वतन्त्र महसुस गर्नुहोस् । शब्दहरू वा वाक्यांशहरूलाई थप महत्त्व नदिई हाइलाइट गर्नको लागि हो, जबकि प्रायः आवाज, प्राविधिक शब्दहरू, इत्यादिका लागि हो।<i><b><i>

पङ्क्तिबद्ध कक्षाहरू

पाठ पङ्क्तिबद्ध वर्गहरूको साथ कम्पोनेन्टहरूमा सजिलैसँग पाठ पुन: मिलाउनुहोस्।

बायाँ पङ्क्तिबद्ध पाठ।

केन्द्रमा पङ्क्तिबद्ध पाठ।

दायाँ पङ्क्तिबद्ध पाठ।

<p class = "text-left" > बायाँ पङ्क्तिबद्ध पाठ। </p> 
<p class = "text-center" > केन्द्रमा पङ्क्तिबद्ध पाठ। </p> 
<p वर्ग = "पाठ-दायाँ" > दायाँ पङ्क्तिबद्ध पाठ। </p>

जोड कक्षाहरू

जोर उपयोगिता वर्ग को एक मुट्ठी भर संग रंग मार्फत अर्थ व्यक्त गर्नुहोस्।

Fusce dapibus, telus ac cursus commodo, tortor mauris nibh।

Etiam porta sem malesuada magna mollis euismod।

Donec ullamcorper nulla non metus Auctor fringilla।

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

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

<p class = "म्यूट" > Fusce dapibus, telus ac cursus commodo, tortor mauris nibh। </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod। </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla। </p> 
<p class = "text-info" > Aenean eu leo quam। Pellentesque ornare sem lacinia quam venenatis। </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

संक्षिप्त रूपहरू

<abbr>होभरमा विस्तारित संस्करण देखाउनको लागि संक्षिप्त र संक्षिप्त शब्दहरूको लागि HTML को तत्वको शैलीकृत कार्यान्वयन । एट्रिब्युट भएका संक्षिप्ताक्षरहरूमा titleहल्का बिन्दु भएको तल्लो किनारा र होभरमा मद्दत कर्सर हुन्छ, होभरमा थप सन्दर्भ प्रदान गर्दछ।

`<abbr>`

संक्षिप्त नामको लामो होभरमा विस्तारित पाठको लागि, titleविशेषता समावेश गर्नुहोस्।

विशेषता शब्दको संक्षिप्त नाम attr हो ।

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

`<abbr class="initialism">`

.initialismथोरै सानो फन्ट साइजको लागि संक्षिप्त नाममा थप्नुहोस् ।

काटिएको रोटी पछि HTML सबैभन्दा राम्रो कुरा हो।

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

ठेगानाहरू

निकटतम पुर्खा वा कामको सम्पूर्ण शरीरको लागि सम्पर्क जानकारी प्रस्तुत गर्नुहोस्।

`<address>`

सबै पङ्क्तिहरू बाट समाप्त गरेर ढाँचा सुरक्षित गर्नुहोस् <br>।

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

पूरा नाम
[email protected]

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

ब्लककोटहरू

तपाईंको कागजात भित्रको अर्को स्रोतबाट सामग्रीको ब्लकहरू उद्धृत गर्नका लागि।

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

उद्धरणको रूपमा कुनै पनि HTML<blockquote> वरिपरि लपेट्नुहोस् । सीधा उद्धरणहरूको लागि हामी सिफारिस गर्छौं ।<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuer erat a ante. </p>
</blockquote>

Blockquote विकल्प

मानक ब्लककोटमा साधारण भिन्नताहरूको लागि शैली र सामग्री परिवर्तनहरू।

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

<small>स्रोत पहिचान गर्न ट्याग थप्नुहोस् । मा स्रोत कामको नाम बेर्नुहोस् <cite>।

Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante.
स्रोत शीर्षकमा प्रसिद्ध कोही

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuer erat a ante. </p>
  <small> कोही प्रसिद्ध <cite title = "स्रोत शीर्षक" > स्रोत शीर्षक </cite></small> 
</blockquote>

वैकल्पिक प्रदर्शनहरू

.pull-rightफ्लोटेड, दायाँ पङ्क्तिबद्ध ब्लककोटको लागि प्रयोग गर्नुहोस् ।

Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante.
स्रोत शीर्षकमा प्रसिद्ध कोही

<blockquote वर्ग = "पुल-दायाँ" > 
  ...
</blockquote>

सूचीहरू

क्रमरहित

वस्तुहरूको सूची जसमा आदेश स्पष्ट रूपमा फरक पर्दैन ।

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मासामा पूर्णांक मोलेस्टी लोरेम
प्रिटियम निस्ल एलिकेटमा फेसिलिसिस
नुल्ला volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat मा
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

आदेश

वस्तुहरूको सूची जसमा क्रम स्पष्ट रूपमा महत्त्वपूर्ण छ ।

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

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

अनस्टाइल

सूची वस्तुहरूमा पूर्वनिर्धारित list-styleर बायाँ प्याडिङ हटाउनुहोस् (तत्काल बच्चाहरू मात्र)।

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मासामा पूर्णांक मोलेस्टी लोरेम
प्रिटियम निस्ल एलिकेटमा फेसिलिसिस
नुल्ला volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat मा
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

क्रममा

सबै सूची वस्तुहरू एउटै लाइनमा राख्नुहोस् inline-blockर केही हल्का प्याडिङ।

Lorem ipsum
Phasellus iaculis
नुल्ला भोल्टपाट

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

विवरण

तिनीहरूसँग सम्बन्धित विवरणहरूको साथ सर्तहरूको सूची।

विवरण सूचीहरू: वर्णन सूची सर्तहरू परिभाषित गर्नका लागि उपयुक्त छ।
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus।
Malesuada Porta: Etiam porta sem malesuada magna mollis euismod।

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

तेर्सो वर्णन

सर्तहरू र विवरणहरू <dl>लाईन-अप-साइड-अप गर्नुहोस्।

विवरण सूचीहरू: वर्णन सूची सर्तहरू परिभाषित गर्नका लागि उपयुक्त छ।
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus।
Malesuada Porta: Etiam porta sem malesuada magna mollis euismod।
Felis euismod sempre eget lacinia: Fusce dapibus, telus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus।

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

हेड अप!तेर्सो वर्णन सूचीले बायाँ स्तम्भ फिक्समा फिट गर्न धेरै लामो सर्तहरू काट्नेछ text-overflow। साँघुरो भ्यूपोर्टहरूमा, तिनीहरू पूर्वनिर्धारित स्ट्याक गरिएको लेआउटमा परिवर्तन हुनेछन्।

क्रममा

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

उदाहरणका लागि, <section>इनलाइनको रूपमा बेरिएको हुनुपर्छ।

उदाहरणका लागि , <code> & lt ; सेक्सन & gt ;</ code > लाई इनलाइनको रूपमा बेर्नु पर्छ ।

आधारभूत ब्लक

<pre>कोडको धेरै लाइनहरूको लागि प्रयोग गर्नुहोस् । उचित प्रतिपादनको लागि कोडमा कुनै पनि कोण कोष्ठकहरू छोड्न निश्चित हुनुहोस्।

<p>नमूना पाठ यहाँ...</p>

<पूर्व>
  <p>नमूना पाठ यहाँ...</p>
</pre>

हेड अप!<pre>ट्याग भित्र कोडलाई सकेसम्म बायाँको नजिक राख्न निश्चित हुनुहोस् ; यसले सबै ट्याबहरू रेन्डर गर्नेछ।

तपाईंले वैकल्पिक .pre-scrollableरूपमा 350px को अधिकतम-उचाइ सेट गर्ने र y-अक्ष स्क्रोलबार प्रदान गर्ने कक्षा थप्न सक्नुहुन्छ।

पूर्वनिर्धारित शैलीहरू

आधारभूत स्टाइलका लागि—हल्का प्याडिङ र तेर्सो डिभाइडरहरू—कुनैमा आधार वर्ग .tableथप्नुहोस् <table>।

#	पहिलो नाम	थर	प्रयोगकर्ता नाम
१	मार्क	ओटो	@mdo
२	याकूब	थोरन्टन	@मोटो
३	ल्यारी	चरा	@twitter

<table class = "टेबल" > 
  …
</table>

वैकल्पिक कक्षाहरू

.tableआधार वर्गमा तलका कुनै पनि कक्षाहरू थप्नुहोस् ।

`.table-striped`

<tbody>CSS चयनकर्ता मार्फत कुनै पनि तालिका पङ्क्तिमा जेब्रा-स्ट्रिपिङ थप्छ :nth-child(IE7-8 मा उपलब्ध छैन)।

#	पहिलो नाम	थर	प्रयोगकर्ता नाम
१	मार्क	ओटो	@mdo
२	याकूब	थोरन्टन	@मोटो
३	ल्यारी	चरा	@twitter

<तालिका वर्ग = "टेबल तालिका-धारीदार" > 
  …
</table>

`.table-bordered`

तालिकामा किनाराहरू र गोलाकार कुनाहरू थप्नुहोस्।

#	पहिलो नाम	थर	प्रयोगकर्ता नाम
१	मार्क	ओटो	@mdo
१	मार्क	ओटो	@getbootstrap
२	याकूब	थोरन्टन	@मोटो
३	ल्यारी द बर्ड		@twitter

<table class = "table table-bordered" > 
  …
</table>

`.table-hover`

तालिका पङ्क्तिहरूमा एक होभर स्थिति सक्षम गर्नुहोस् <tbody>।

#	पहिलो नाम	थर	प्रयोगकर्ता नाम
१	मार्क	ओटो	@mdo
२	याकूब	थोरन्टन	@मोटो
३	ल्यारी द बर्ड		@twitter

<table class = "table table-hover" > 
  …
</table>

`.table-condensed`

सेल प्याडिङलाई आधामा काटेर तालिकाहरूलाई थप कम्प्याक्ट बनाउँछ।

#	पहिलो नाम	थर	प्रयोगकर्ता नाम
१	मार्क	ओटो	@mdo
२	याकूब	थोरन्टन	@मोटो
३	ल्यारी द बर्ड		@twitter

<तालिका वर्ग = "तालिका तालिका संकुचित" > 
  …
</table>

वैकल्पिक पङ्क्ति कक्षाहरू

तालिका पङ्क्तिहरू रङ गर्न प्रासंगिक वर्गहरू प्रयोग गर्नुहोस्।

कक्षा	विवरण
`.success`	सफल वा सकारात्मक कार्यलाई संकेत गर्दछ।
`.error`	खतरनाक वा सम्भावित नकारात्मक कार्यलाई संकेत गर्दछ।
`.warning`	ध्यान आवश्यक हुन सक्ने चेतावनीलाई संकेत गर्दछ।
`.info`	पूर्वनिर्धारित शैलीहरूको विकल्पको रूपमा प्रयोग गरियो।

#	उत्पादन	भुक्तानी लिइयो	स्थिति
१	TB - मासिक	०१/०४/२०१२	स्वीकृत
२	TB - मासिक	०२/०४/२०१२	अस्वीकार गरियो
३	TB - मासिक	०३/०४/२०१२	विचाराधीन
४	TB - मासिक	०४/०४/२०१२	पुष्टि गर्न कल गर्नुहोस्

...
  < tr वर्ग = "सफलता" >
    <td> १ < /td>
    <td>TB - मासिक</ td >
    <td> ०१ / ०४ / २०१२ < / td>
    <td>स्वीकृत</ td >
  </ tr >
...

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

समर्थित तालिका HTML तत्वहरूको सूची र तिनीहरू कसरी प्रयोग गर्नुपर्छ।

ट्याग	विवरण
`<table>`	ट्याबुलर ढाँचामा डेटा प्रदर्शन गर्नको लागि र्‍यापिङ तत्व
`<thead>`	`<tr>`तालिका हेडर पङ्क्तिहरू ( ) को लागि तालिका स्तम्भहरू लेबल गर्न कन्टेनर तत्व
`<tbody>`	तालिकाको मुख्य भागमा तालिका पङ्क्तिहरू ( `<tr>`) को लागि कन्टेनर तत्व
`<tr>`	एकल पङ्क्तिमा देखिने तालिका कक्षहरू ( `<td>`वा ) को सेटको लागि कन्टेनर तत्व`<th>`
`<td>`	पूर्वनिर्धारित तालिका कक्ष
`<th>`	स्तम्भ (वा पङ्क्ति, दायरा र स्थानमा निर्भर गर्दै) लेबलहरूको लागि विशेष तालिका कक्ष
`<caption>`	तालिकामा भएका कुराहरूको विवरण वा सारांश, विशेष गरी स्क्रिन रिडरहरूका लागि उपयोगी

<table>
  <क्याप्शन> ... </ क्याप्शन>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

पूर्वनिर्धारित शैलीहरू

व्यक्तिगत फारम नियन्त्रणहरूले स्टाइल प्राप्त गर्दछ, तर मार्कअपमा कुनै पनि आवश्यक आधार वर्ग <form>वा ठूलो परिवर्तन बिना। फारम नियन्त्रणहरूको शीर्षमा स्ट्याक गरिएको, बायाँ-पङ्क्तिबद्ध लेबलहरूमा परिणामहरू।

<form>
  <fieldset>
    <legend> लेजेन्ड </ legend>
    <label> लेबल नाम </label>
    <इनपुट प्रकार = "पाठ" प्लेसहोल्डर = "केही टाइप गर्नुहोस् ..." >  
    <span class = "help-block" > उदाहरण ब्लक-स्तर मद्दत पाठ यहाँ। </span> 
    <लेबल वर्ग = "चेकबक्स" > 
      <इनपुट प्रकार = "चेकबक्स" > मलाई जाँच गर्नुहोस् 
    </label>
    <बटन प्रकार = "सबमिट" वर्ग = "btn" > बुझाउनुहोस् </ बटन>  
  </fieldset>
</form>

वैकल्पिक लेआउटहरू

बुटस्ट्र्यापसँग समावेश गरिएको सामान्य प्रयोग केसहरूको लागि तीन वैकल्पिक फारम लेआउटहरू छन्।

खोज फारम

.form-searchफारममा थप्नुहोस् .search-queryर <input>अतिरिक्त गोलाकार पाठ इनपुटको लागि।

<फार्म वर्ग = "फार्म-खोज" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-मध्यम खोज-क्वेरी" >  
  <बटन प्रकार = "सबमिट" वर्ग = "btn" > खोज्नुहोस् </ बटन>  
</form>

इनलाइन फारम

.form-inlineबायाँ-पङ्क्तिबद्ध लेबलहरू र कम्प्याक्ट लेआउटको लागि इनलाइन-ब्लक नियन्त्रणहरू थप्नुहोस् ।

<फार्म वर्ग = "फार्म-इनलाइन" > 
  <इनपुट प्रकार = "टेक्स्ट" वर्ग = "इनपुट-सानो" प्लेसहोल्डर = "इमेल" >   
  <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-सानो" प्लेसहोल्डर = "पासवर्ड" >   
  <लेबल वर्ग = "चेकबक्स" > 
    <इनपुट प्रकार = "चेकबक्स" > मलाई सम्झनुहोस् 
  </label>
  <बटन प्रकार = "सबमिट" वर्ग = "btn" > साइन इन गर्नुहोस् </ बटन>  
</form>

तेर्सो रूप

लेबलहरूलाई दायाँ पङ्क्तिबद्ध गर्नुहोस् र तिनीहरूलाई नियन्त्रणहरू जस्तै लाइनमा देखा पर्नको लागि तिनीहरूलाई बाँयामा फ्लोट गर्नुहोस्। पूर्वनिर्धारित फारमबाट धेरै मार्कअप परिवर्तनहरू आवश्यक छ:

.form-horizontalफारममा थप्नुहोस्
लेबलहरू र नियन्त्रणहरू र्‍याप गर्नुहोस्.control-group
.control-labelलेबलमा थप्नुहोस्
.controlsउचित पङ्क्तिबद्धताको लागि कुनै पनि सम्बन्धित नियन्त्रणहरू लपेट्नुहोस्

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

समर्थित फारम नियन्त्रणहरू

उदाहरण फारम लेआउटमा समर्थित मानक फारम नियन्त्रणका उदाहरणहरू।

इनपुटहरू

सबैभन्दा सामान्य फारम नियन्त्रण, पाठ-आधारित इनपुट क्षेत्रहरू। सबै HTML5 प्रकारहरूको लागि समर्थन समावेश गर्दछ: पाठ, पासवर्ड, मिति समय, मिति-स्थानीय, मिति, महिना, समय, हप्ता, नम्बर, इमेल, url, खोज, टेलिफोन, र रंग।

typeसबै समयमा निर्दिष्ट को प्रयोग आवश्यक छ ।

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

Textarea

फारम नियन्त्रण जसले पाठको बहु रेखाहरूलाई समर्थन गर्दछ। rowsआवश्यकता अनुसार विशेषता परिवर्तन गर्नुहोस् ।

<textarea पङ्क्तिहरू = "3" ></textarea>

चेकबक्स र रेडियो

चेकबक्सहरू सूचीमा एक वा धेरै विकल्पहरू चयन गर्नका लागि हुन् जबकि रेडियोहरू धेरैबाट एउटा विकल्प चयन गर्नका लागि हुन्।

पूर्वनिर्धारित (स्ट्याक गरिएको)

<लेबल वर्ग = "चेकबक्स" > 
  <इनपुट प्रकार = "चेकबक्स" मान = "" >  
  विकल्प एक हो यो र त्यो - यो किन उत्कृष्ट छ समावेश गर्न निश्चित हुनुहोस्
</label>
 
<लेबल वर्ग = "रेडियो" > 
  <इनपुट प्रकार = "रेडियो" नाम = "optionsRadios" id = "optionsRadios1" मान = "option1" जाँच गरियो >     
  विकल्प एक हो यो र त्यो - यो किन उत्कृष्ट छ समावेश गर्न निश्चित हुनुहोस्
</label>
<लेबल वर्ग = "रेडियो" > 
  <इनपुट प्रकार = "रेडियो" नाम = "optionsRadios" id = "optionsRadios2" मान = "option2" >    
  विकल्प दुई केहि हुन सक्छ र यसलाई चयन गर्दा विकल्प एक अचयन हुनेछ
</label>

इनलाइन चेकबक्सहरू

.inlineएउटै लाइनमा देखिने नियन्त्रणहरूको लागि चेकबक्स वा रेडियोहरूको श्रृंखलामा कक्षा थप्नुहोस् ।

<लेबल वर्ग = "चेकबक्स इनलाइन" > 
  <इनपुट प्रकार = "checkbox " id = "inlineCheckbox1" value = "option1" > 1   
</label>
<लेबल वर्ग = "चेकबक्स इनलाइन" > 
  <इनपुट प्रकार = "चेकबक्स" आईडी = "इनलाइनचेकबक्स२" मान = "विकल्प २ " > २   
</label>
<लेबल वर्ग = "चेकबक्स इनलाइन" > 
  <इनपुट प्रकार = "चेकबक्स" आईडी = "इनलाइनचेकबक्स३" मान = "विकल्प३ " > ३   
</label>

चयन गर्छ

multiple="multiple"पूर्वनिर्धारित विकल्प प्रयोग गर्नुहोस् वा एकै पटक धेरै विकल्पहरू देखाउन निर्दिष्ट गर्नुहोस् ।

<चयन>
  <विकल्प> १ </ विकल्प>
  <विकल्प> २ </ विकल्प>
  <विकल्प> ३ </ विकल्प>
  <विकल्प> ४ </ विकल्प>
  <विकल्प> ५ </ विकल्प>
</ चयन गर्नुहोस्>
 
< बहु चयन गर्नुहोस् = "बहु" > 
  <विकल्प> १ </ विकल्प>
  <विकल्प> २ </ विकल्प>
  <विकल्प> ३ </ विकल्प>
  <विकल्प> ४ </ विकल्प>
  <विकल्प> ५ </ विकल्प>
</ चयन गर्नुहोस्>

फारम नियन्त्रणहरू विस्तार गर्दै

अवस्थित ब्राउजर नियन्त्रणहरूको शीर्षमा थप्दै, बुटस्ट्र्यापले अन्य उपयोगी फारम घटकहरू समावेश गर्दछ।

प्रीपेन्ड र संलग्न इनपुटहरू

कुनै पनि पाठ-आधारित इनपुट अघि वा पछि पाठ वा बटनहरू थप्नुहोस्। ध्यान दिनुहोस् कि selectतत्वहरू यहाँ समर्थित छैनन्।

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

इनपुटमा पाठ प्रीपेन्ड गर्न वा जोड्नको लागि दुई वर्गहरू मध्ये एउटासँग an .add-onर an र्‍याप गर्नुहोस्।input

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <इनपुट वर्ग = "span2" id = "prependedInput" प्रकार = "टेक्स्ट" प्लेसहोल्डर = "प्रयोगकर्ता नाम" >    
</div>
<div class = "input-append" > 
  <इनपुट वर्ग = "span2" id = "appendedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

संयुक्त

.add-onआगत प्रीपेन्ड र जोड्नका लागि दुवै कक्षाहरू र दुईवटा उदाहरणहरू प्रयोग गर्नुहोस्।

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <इनपुट वर्ग = "span2" id = "appendedPrependedInput " प्रकार = "टेक्स्ट" >   
  <span class = "add-on" > .00 </span> 
</div>

पाठको सट्टा बटनहरू

पाठसँगको सट्टा , इनपुटमा बटन (वा दुई) जोड्नको लागि <span>प्रयोग गर्नुहोस्।.btn

<div class = "input-append" > 
  <इनपुट वर्ग = "span2" id = "appendedInputButton " प्रकार = "टेक्स्ट" >   
  <बटन वर्ग = "btn" प्रकार = "बटन" > जानुहोस्! </ बटन>  
</div>

<div class = "input-append" > 
  <इनपुट वर्ग = "span2" id = "appendedInputButtons " प्रकार = "टेक्स्ट" >   
  <बटन वर्ग = "btn" प्रकार = "बटन" > खोज्नुहोस् </ बटन>  
  <बटन वर्ग = "btn" प्रकार = "बटन" > विकल्पहरू </ बटन>  
</div>

बटन ड्रपडाउनहरू

<div class = "input-append" > 
  <इनपुट वर्ग = "span2" id = "appendedDropdownButton " प्रकार = "टेक्स्ट" >   
  <div class = "btn-group" > 
    <बटन वर्ग = "btn ड्रपडाउन-टगल" डेटा-टगल = "ड्रपडाउन" >  
      कार्य
      <span class = "caret" ></span> 
    </ बटन>
    <ul class = "ड्रपडाउन-मेनु" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <बटन वर्ग = "btn ड्रपडाउन-टगल" डेटा-टगल = "ड्रपडाउन" >  
      कार्य
      <span class = "caret" ></span> 
    </ बटन>
    <ul class = "ड्रपडाउन-मेनु" > 
      ...
    </ul>
  </div>
  <इनपुट वर्ग = "span2" id = "prependedDropdownButton" प्रकार = "टेक्स्ट" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <बटन वर्ग = "btn ड्रपडाउन-टगल" डेटा-टगल = "ड्रपडाउन" >  
      कार्य
      <span class = "caret" ></span> 
    </ बटन>
    <ul class = "ड्रपडाउन-मेनु" > 
      ...
    </ul>
  </div>
  <इनपुट वर्ग = "span2" id = "appendedPrependedDropdownButton " प्रकार = "टेक्स्ट" >   
  <div class = "btn-group" > 
    <बटन वर्ग = "btn ड्रपडाउन-टगल" डेटा-टगल = "ड्रपडाउन" >  
      कार्य
      <span class = "caret" ></span> 
    </ बटन>
    <ul class = "ड्रपडाउन-मेनु" > 
      ...
    </ul>
  </div>
</div>

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

<form>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <इनपुट प्रकार = "टेक्स्ट" > 
  </div>
  <div class = "input-append" > 
    <इनपुट प्रकार = "टेक्स्ट" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

खोज फारम

<फार्म वर्ग = "फार्म-खोज" > 
  <div class = "input-append" > 
    <इनपुट प्रकार = "पाठ" वर्ग = "span2 खोज-क्वेरी" >  
    <बटन प्रकार = "सबमिट" वर्ग = "btn" > खोज्नुहोस् </ बटन>  
  </div>
  <div class = "input-prepend" > 
    <बटन प्रकार = "सबमिट" वर्ग = "btn" > खोज्नुहोस् </ बटन>  
    <इनपुट प्रकार = "पाठ" वर्ग = "span2 खोज-क्वेरी" >  
  </div>
</form>

नियन्त्रण साइजिङ

सापेक्ष साइजिङ वर्गहरू प्रयोग गर्नुहोस् .input-largeवा कक्षाहरू प्रयोग गरेर ग्रिड स्तम्भ आकारहरूमा तपाईंको इनपुटहरू मिलाउनुहोस् .span*।

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

कुनै पनि <input>वा <textarea>तत्वलाई ब्लक स्तर तत्व जस्तै व्यवहार गर्नुहोस्।

<इनपुट वर्ग = "इनपुट-ब्लक-स्तर" प्रकार = "पाठ" प्लेसहोल्डर = "इनपुट-ब्लक-स्तर" >

सापेक्ष आकार

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

हेड अप!भविष्यका संस्करणहरूमा, हामी हाम्रा बटन आकारहरू मिलाउन यी सापेक्ष इनपुट कक्षाहरूको प्रयोगलाई परिवर्तन गर्नेछौं। उदाहरणका लागि, .input-largeइनपुटको प्याडिङ र फन्ट साइज बढाउनेछ।

ग्रिड साइजिङ

ग्रिड स्तम्भहरूको एउटै साइज मिल्ने इनपुटहरूको लागि प्रयोग गर्नुहोस् .span1।.span12

<इनपुट वर्ग = "span1" प्रकार = "पाठ" प्लेसहोल्डर = ".span1" >   
<इनपुट वर्ग = "span2" प्रकार = "पाठ" प्लेसहोल्डर = ".span2" >   
<इनपुट वर्ग = "span3" प्रकार = "पाठ" प्लेसहोल्डर = ".span3" >   
< वर्ग चयन गर्नुहोस् = "span1" > 
  ...
</ चयन गर्नुहोस्>
< वर्ग चयन गर्नुहोस् = "span2" > 
  ...
</ चयन गर्नुहोस्>
< वर्ग चयन गर्नुहोस् = "span3" > 
  ...
</ चयन गर्नुहोस्>

प्रति रेखा धेरै ग्रिड इनपुटहरूको लागि, उचित स्पेसिङको लागि परिमार्जक वर्ग प्रयोग गर्नुहोस्.controls-row । यसले सेतो-स्पेस पतन गर्न इनपुटहरू फ्लोट गर्दछ, उचित मार्जिनहरू सेट गर्दछ, र फ्लोट खाली गर्दछ।

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

सम्पादन गर्न नसकिने इनपुटहरू

वास्तविक फारम मार्कअप प्रयोग नगरी सम्पादन गर्न नसकिने फारममा डाटा प्रस्तुत गर्नुहोस्।

<span class = "input-xlarge uneditable-input" > यहाँ केही मान </span>

फारम कार्यहरू

कार्यहरूको समूह (बटनहरू) सँग फारम अन्त्य गर्नुहोस्। जब भित्र राखिएको छ .form-actions, बटनहरू स्वचालित रूपमा फारम नियन्त्रणहरूसँग लाइन अप गर्न इन्डेन्ट हुनेछ।

<div वर्ग = "फार्म-कार्यहरू" > 
  <बटन प्रकार = "सबमिट" वर्ग = "btn btn-प्राथमिक" > परिवर्तनहरू बचत गर्नुहोस् </ बटन>  
  <बटन प्रकार = "बटन" वर्ग = "btn" > रद्द गर्नुहोस् </ बटन>  
</div>

मद्दत पाठ

फारम नियन्त्रणहरू वरिपरि देखा पर्ने मद्दत पाठको लागि इनलाइन र ब्लक स्तर समर्थन।

इनलाइन मद्दत

<इनपुट प्रकार = "पाठ" ><span वर्ग = "help-inline" > इनलाइन मद्दत पाठ </span>

मद्दत रोक्नुहोस्

<इनपुट प्रकार = "टेक्स्ट" ><span वर्ग = "हेल्प-ब्लक" > मद्दत पाठको लामो ब्लक जुन नयाँ लाइनमा टुक्रिन्छ र एक रेखाभन्दा माथि विस्तार हुन सक्छ। </span>

फारम नियन्त्रण राज्यहरू

फारम नियन्त्रण र लेबलहरूमा आधारभूत प्रतिक्रिया राज्यहरूको साथ प्रयोगकर्ता वा आगन्तुकहरूलाई प्रतिक्रिया प्रदान गर्नुहोस्।

इनपुट फोकस

हामीले केही फारम नियन्त्रणहरूमा पूर्वनिर्धारित शैलीहरू हटाउँछौं र यसको ठाउँमा outlineएउटा लागू गर्छौं ।box-shadow:focus

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "यो फोकस गरिएको छ..." >

अवैध इनपुटहरू

पूर्वनिर्धारित ब्राउजर कार्यक्षमता मार्फत शैली इनपुटहरू :invalid। एक निर्दिष्ट गर्नुहोस्, यदि फिल्ड वैकल्पिक छैन भने विशेषता typeथप्नुहोस् , र (यदि लागू भएमा) निर्दिष्ट गर्नुहोस् ।requiredpattern

यो इन्टरनेट एक्सप्लोरर 7-9 को संस्करणहरूमा उपलब्ध छैन CSS स्यूडो चयनकर्ताहरूको लागि समर्थनको कमीको कारण।

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

अक्षम इनपुटहरू

disabledप्रयोगकर्ता इनपुट रोक्न र अलि फरक लुक ट्रिगर गर्न इनपुटमा विशेषता थप्नुहोस् ।

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

प्रमाणीकरण राज्यहरू

बुटस्ट्र्यापले त्रुटि, चेतावनी, जानकारी, र सफलता सन्देशहरूको लागि प्रमाणीकरण शैलीहरू समावेश गर्दछ। प्रयोग गर्न, वरपर उपयुक्त वर्ग थप्नुहोस् .control-group।

<div वर्ग = "नियन्त्रण-समूह चेतावनी" > 
  <label class = "control-label" for = "inputWarning" > चेतावनी सहितको इनपुट </label>  
  <div वर्ग = "नियन्त्रण" > 
    <इनपुट प्रकार = "टेक्स्ट" आईडी = "इनपुट वार्निंग" >  
    <span class = "help-inline" > केहि गडबड भएको हुन सक्छ </span> 
  </div>
</div>
 
<div वर्ग = "नियन्त्रण-समूह त्रुटि" > 
  <label class = "control-label" for = "inputError" > त्रुटि सहित इनपुट </label>  
  <div वर्ग = "नियन्त्रण" > 
    <इनपुट प्रकार = "टेक्स्ट" आईडी = "इनपुट त्रुटि" >  
    <span class = "help-inline" > कृपया त्रुटि सच्याउनुहोस् </span> 
  </div>
</div>
 
<div वर्ग = "नियन्त्रण-समूह जानकारी" > 
  <label class = "control-label" for = "inputInfo" > जानकारी सहित इनपुट </label>  
  <div वर्ग = "नियन्त्रण" > 
    <इनपुट प्रकार = "टेक्स्ट" आईडी = "इनपुटइन्फो" >  
    <span class = "help-inline" > प्रयोगकर्ता नाम पहिले नै लिइएको छ </span> 
  </div>
</div>
 
<div वर्ग = "नियन्त्रण-समूह सफलता" > 
  <label class = "control-label" for = "inputSuccess" > सफलताको साथ इनपुट </label>  
  <div वर्ग = "नियन्त्रण" > 
    <इनपुट प्रकार = "टेक्स्ट" आईडी = "इनपुटसक्सेस" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

पूर्वनिर्धारित बटनहरू

.btnबटन शैलीहरू लागू गरिएको कक्षाको साथ कुनै पनि कुरामा लागू गर्न सकिन्छ । जे होस्, सामान्यतया तपाईले उत्कृष्ट रेन्डरिङका लागि यी <a>र तत्वहरूमा मात्र लागू गर्न चाहानुहुन्छ।<button>

टांक	class=""	विवरण
	`btn`	ग्रेडियन्टको साथ मानक खैरो बटन
	`btn btn-primary`	अतिरिक्त दृश्य वजन प्रदान गर्दछ र बटनहरूको सेटमा प्राथमिक कार्य पहिचान गर्दछ
	`btn btn-info`	पूर्वनिर्धारित शैलीहरूको विकल्पको रूपमा प्रयोग गरियो
	`btn btn-success`	सफल वा सकारात्मक कार्यलाई संकेत गर्दछ
	`btn btn-warning`	यस कार्यमा सावधानी अपनाउनु पर्ने संकेत गर्दछ
	`btn btn-danger`	खतरनाक वा सम्भावित नकारात्मक कार्यलाई संकेत गर्दछ
	`btn btn-inverse`	वैकल्पिक गाढा खैरो बटन, सिमान्टिक कार्य वा प्रयोगमा बाँधिएको छैन
	`btn btn-link`	बटन व्यवहार कायम राख्दा यसलाई लिङ्क जस्तो देखिने गरी बटनलाई महत्व दिनुहोस्

क्रस ब्राउजर अनुकूलता

IE9 ले गोलाकार कुनाहरूमा पृष्ठभूमि ढाँचाहरू क्रप गर्दैन, त्यसैले हामी यसलाई हटाउँछौं। सम्बन्धित, IE9 ले असक्षम गरिएका buttonतत्वहरूलाई jankiify गर्छ, हामीले ठीक गर्न नसक्ने खराब पाठ-छायासँग पाठ ग्रे रेन्डर गर्दै।

बटन आकारहरू

फ्यान्सी ठूला वा सानो बटनहरू? थप्नुहोस् .btn-large, .btn-smallवा .btn-miniथप आकारहरूको लागि।

<p>
  <बटन वर्ग = "btn btn-large btn-primary" type = "button" > ठूलो बटन </ बटन>  
  <बटन वर्ग = "btn btn-large" प्रकार = "बटन" > ठूलो बटन </ बटन>  
</p>
<p>
  <बटन वर्ग = "btn btn-प्राथमिक" प्रकार = "बटन" > पूर्वनिर्धारित बटन </ बटन>  
  <बटन वर्ग = "btn" प्रकार = "बटन" > पूर्वनिर्धारित बटन </ बटन>  
</p>
<p>
  <बटन वर्ग = "btn btn-small btn-primary" type = "button" > सानो बटन </ बटन>  
  <बटन वर्ग = "btn btn-small" type = "button" > सानो बटन </ बटन>  
</p>
<p>
  <बटन वर्ग = "btn btn-mini btn-प्राथमिक" प्रकार = "बटन" > मिनी बटन </ बटन>  
  <बटन वर्ग = "btn btn-mini" प्रकार = "बटन" > मिनी बटन </ बटन>  
</p>

ब्लक लेभल बटनहरू सिर्जना गर्नुहोस्—जो अभिभावकको पूर्ण चौडाइमा फैलिन्छ— थपेर .btn-block।

<बटन वर्ग = "btn btn-large btn-block btn-primary" type = "button" > ब्लक स्तर बटन </ बटन>  
<बटन वर्ग = "btn btn-large btn-block" type = "button" > ब्लक स्तर बटन </ बटन>

असक्षम राज्य

बटनहरूलाई ५०% पछाडि फेड गरेर क्लिक गर्न नसकिने देखाउनुहोस्।

एंकर तत्व

बटनहरूमा .disabledकक्षा थप्नुहोस् ।<a>

प्राथमिक लिङ्क लिङ्क

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

हेड अप!हामी .disabledयहाँ उपयोगिता वर्गको रूपमा प्रयोग गर्छौं, सामान्य .activeवर्ग जस्तै, त्यसैले कुनै उपसर्ग आवश्यक पर्दैन। साथै, यो वर्ग केवल सौन्दर्य को लागी हो; तपाईंले यहाँ लिङ्कहरू असक्षम गर्न अनुकूलन JavaScript प्रयोग गर्नुपर्छ।

बटन तत्व

बटनहरूमा disabledविशेषता थप्नुहोस् ।<button>

<बटन प्रकार = "बटन" वर्ग = "btn btn-large btn-प्राथमिक असक्षम" अक्षम = "असक्षम" > प्राथमिक बटन </ बटन>   
<बटन प्रकार = "बटन" वर्ग = "btn btn-ठूलो" असक्षम गरिएको > बटन </ बटन>

एक वर्ग, धेरै ट्यागहरू

एक , वा तत्वमा .btnकक्षा प्रयोग गर्नुहोस् ।<a><button><input>

<a class="btn" href=""> लिङ्क </a> _ _ _ _ _  
<बटन वर्ग = "btn" प्रकार = "सबमिट" > बटन </ बटन>  
<इनपुट वर्ग = "btn" प्रकार = "बटन" मान = "इनपुट" >   
<इनपुट वर्ग = "btn" प्रकार = "सबमिट" मान = "पेश गर्नुहोस्" >

उत्तम अभ्यासको रूपमा, मिल्दो क्रस-ब्राउजर रेन्डरिङ सुनिश्चित गर्न तपाईंको सन्दर्भको लागि तत्व मिलाउने प्रयास गर्नुहोस्। यदि तपाइँसँग छ भने , तपाइँको बटनको लागि inputएक प्रयोग गर्नुहोस्।<input type="submit">

<img>कुनै पनि परियोजनामा सजिलैसँग छविहरू शैली बनाउनको लागि एक तत्वमा कक्षाहरू थप्नुहोस् ।

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

हेड अप! .img-roundedर समर्थनको .img-circleकमीको कारण IE7-8 मा काम नगर्नुहोस् border-radius।

आइकन glyphs

स्प्राइट फारममा 140 आइकनहरू, गाढा खैरो (पूर्वनिर्धारित) र सेतोमा उपलब्ध छन्, Glyphicons द्वारा प्रदान गरिएको ।

आइकन-ग्लास
आइकन-संगीत
आइकन-खोज
आइकन-खाम
आइकन-हृदय
आइकन-तारा
आइकन-तारा-खाली
आइकन-प्रयोगकर्ता
आइकन-फिल्म
icon-th-ठूलो
icon-th
आइकन-थ-सूची
आइकन-ठीक छ
आइकन-हटाउनुहोस्
आइकन-जुम-इन
आइकन-जुम-आउट
आइकन बन्द
icon-signal
icon-cog
प्रतिमा रद्दीटोकरी
icon-घर
आइकन-फाइल
आइकन-समय
आइकन सडक
icon-download-alt
आइकन-डाउनलोड
आइकन-अपलोड
आइकन-इनबक्स
आइकन-प्ले-सर्कल
आइकन दोहोर्याउनुहोस्
आइकन-रिफ्रेस
icon-list-alt
आइकन-लक
आइकन-झण्डा
आइकन-हेडफोनहरू
आइकन-भोल्युम-अफ
आइकन-भोल्युम-डाउन
आइकन-भोल्युम-अप
icon-qrcode
आइकन-बारकोड
आइकन-ट्याग
आइकन-ट्यागहरू
आइकन-पुस्तक
आइकन-बुकमार्क
आइकन-प्रिन्ट
आइकन क्यामेरा
आइकन-फन्ट
आइकन-बोल्ड
आइकन-इटालिक
आइकन-टेक्स्ट-उचाइ
icon-text-width
आइकन-पङ्क्तिबद्ध-बायाँ
आइकन-पङ्क्तिबद्ध-केन्द्र
आइकन-पङ्क्तिबद्ध-दायाँ
icon-align-justify
आइकन-सूची
आइकन-इन्डेन्ट-बायाँ
आइकन-इन्डेन्ट-दायाँ
आइकन-फेसटाइम-भिडियो
प्रतिमा-चित्र
आइकन-पेन्सिल
आइकन-नक्सा-मार्कर
icon-समायोजित गर्नुहोस्
icon-tint
आइकन-सम्पादन
icon-share
आइकन-जाँच
आइकन चाल
आइकन-चरण-पछाडि
icon-fast-backward
icon-backward
आइकन प्ले
आइकन-पज
आइकन-स्टप
आइकन-फर्वार्ड
icon-fast-forward
आइकन-चरण-अगाडि
icon-Eject
आइकन-शेभरन-बायाँ
आइकन-शेभरन-दायाँ
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-चिन्ह
आइकन-प्रश्न-चिह्न
icon-info-sign
आइकन-स्क्रिनसट
icon-remove-circle
आइकन-ओके-सर्कल
आइकन-प्रतिबन्ध-सर्कल
आइकन-तीर-बायाँ
आइकन-तीर-दायाँ
आइकन-तीर-माथि
आइकन-तीर-डाउन
icon-share-alt
icon-resize-full
icon-resize-small
आइकन प्लस
आइकन-माइनस
icon-asterisk
आइकन-विस्मयादिबोधक चिन्ह
आइकन-उपहार
आइकन-पात
आइकन-आगो
आइकन-आँखा खुला
आइकन-आँखा बन्द
आइकन-चेतावनी-चिह्न
आइकन-प्लेन
आइकन-क्यालेन्डर
आइकन-यादृच्छिक
आइकन-टिप्पणी
आइकन-चुम्बक
icon-chevron-up
आइकन-शेभरन-डाउन
icon-retweet
आइकन-शपिंग-कार्ट
icon-folder-close
आइकन-फोल्डर-खोल्नुहोस्
icon-resize-vertical
icon-resize-horizontal
icon-hdd
आइकन-बुलहर्न
icon-bell
आइकन-प्रमाणपत्र
आइकन-थम्ब्स-अप
आइकन-थम्ब्स-डाउन
आइकन-हात-दायाँ
आइकन-हात-बायाँ
आइकन-ह्यान्ड-अप
आइकन-ह्यान्ड-डाउन
आइकन-वृत्त-तीर-दायाँ
आइकन-वृत्त-तीर-बायाँ
आइकन-वृत्त-तीर-माथि
आइकन-सर्कल-एरो-डाउन
icon-globe
आइकन-रिंच
आइकन-कार्यहरू
आइकन-फिल्टर
आइकन ब्रीफकेस
icon-fulscreen

Glyphicons विशेषता

Glyphicons Halflings सामान्यतया नि: शुल्क उपलब्ध छैन, तर Bootstrap र Glyphicons सिर्जनाकर्ताहरू बीचको व्यवस्थाले विकासकर्ताहरूको रूपमा तपाइँलाई कुनै पनि लागतमा यो सम्भव बनाएको छ। धन्यवादको रूपमा, हामी तपाईंलाई Glyphicons मा एक वैकल्पिक लिङ्क समावेश गर्न सोध्छौं जब व्यावहारिक हुन्छ।

कसरी प्रयोग गर्ने

<i>सबै आइकनहरूलाई एक अद्वितीय वर्गको साथ ट्याग चाहिन्छ , जसको उपसर्ग राखिएको छ icon-। प्रयोग गर्नको लागि, निम्न कोड लगभग कहीं पनि राख्नुहोस्:

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

त्यहाँ उल्टो (सेतो) आइकनहरूका लागि शैलीहरू पनि उपलब्ध छन्, एक अतिरिक्त कक्षाको साथ तयार पारिएको। हामी विशेष रूपमा न्याभि र ड्रपडाउन लिङ्कहरूको लागि होभर र सक्रिय राज्यहरूमा यो कक्षा लागू गर्नेछौं।

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

हेड अप!बटन वा एनएभि लिङ्कहरू जस्तै पाठको स्ट्रिङको छेउमा प्रयोग गर्दा, <i>उचित स्पेसिङको लागि ट्याग पछि खाली ठाउँ छोड्न निश्चित हुनुहोस्।

प्रतिमा उदाहरणहरू

तिनीहरूलाई बटनहरूमा प्रयोग गर्नुहोस्, उपकरणपट्टी, नेभिगेसन, वा प्रीपेन्डेड फारम इनपुटहरूको लागि बटन समूहहरू।

बटनहरू

बटन उपकरणपट्टीमा बटन समूह

<div class = "btn-उपकरणपट्टी" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

बटन समूहमा ड्रपडाउन

प्रयोगकर्ता

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> प्रयोगकर्ता </a>   
  <a class = "btn btn-primary dropdown-toggle" 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 = "icon-ban-circle" ></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 = "icon-star" ></i> तारा </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> तारा </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> तारा </a>

नेभिगेसन

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

फारम क्षेत्रहरू

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > इमेल ठेगाना </label>  
  <div वर्ग = "नियन्त्रण" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

टाइपोग्राफी

शीर्षकहरू

h1। शीर्षक १

h2। शीर्षक २

h3। शीर्षक ३

h4। हेडिङ ४

h5। हेडिङ ५

h6। हेडिङ ६

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

नेतृत्व शरीर प्रतिलिपि

कम संग निर्मित

जोड

<small>

बोल्ड

इटालिक

पङ्क्तिबद्ध कक्षाहरू

जोड कक्षाहरू

संक्षिप्त रूपहरू

<abbr>

<abbr class="initialism">

ठेगानाहरू

<address>

ब्लककोटहरू

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

Blockquote विकल्प

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

वैकल्पिक प्रदर्शनहरू

सूचीहरू

क्रमरहित

आदेश

अनस्टाइल

क्रममा

विवरण

तेर्सो वर्णन

कोड

क्रममा

आधारभूत ब्लक

तालिकाहरू

पूर्वनिर्धारित शैलीहरू

वैकल्पिक कक्षाहरू

.table-striped

.table-bordered

.table-hover

.table-condensed

वैकल्पिक पङ्क्ति कक्षाहरू

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

फारमहरू

पूर्वनिर्धारित शैलीहरू

वैकल्पिक लेआउटहरू

खोज फारम

इनलाइन फारम

तेर्सो रूप

समर्थित फारम नियन्त्रणहरू

इनपुटहरू

Textarea

चेकबक्स र रेडियो

पूर्वनिर्धारित (स्ट्याक गरिएको)

इनलाइन चेकबक्सहरू

चयन गर्छ

फारम नियन्त्रणहरू विस्तार गर्दै

प्रीपेन्ड र संलग्न इनपुटहरू

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

संयुक्त

पाठको सट्टा बटनहरू

बटन ड्रपडाउनहरू

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

खोज फारम

नियन्त्रण साइजिङ

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

सापेक्ष आकार

ग्रिड साइजिङ

सम्पादन गर्न नसकिने इनपुटहरू

फारम कार्यहरू

मद्दत पाठ

इनलाइन मद्दत

मद्दत रोक्नुहोस्

फारम नियन्त्रण राज्यहरू

इनपुट फोकस

अवैध इनपुटहरू

अक्षम इनपुटहरू

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`