Վերնագրեր

Բոլոր HTML վերնագրերը <h1>հասանելի <h6>են:

հ1. Վերնագիր 1

h2. Վերնագիր 2

h3. Վերնագիր 3

h4. Վերնագիր 4

h5. Վերնագիր 5

h6. Վերնագիր 6

Հիմնական պատճենը

Bootstrap-ի գլոբալ լռելյայն 14px է, իսկ a- font-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. Nullam id dolor id nibh ultricies vehicula.

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, դա ոչ կոմոդո Կասետային.

<p class = «առաջատար» > ... </p>

Կառուցվել է Less-ով

Տպագրական սանդղակը հիմնված է երկու LESS փոփոխականների վրա փոփոխականներում . less՝ @baseFontSizeև @baseLineHeight. Առաջինը բազային տառատեսակի չափն է, որն օգտագործվում է ամբողջ ընթացքում, իսկ երկրորդը՝ բազային տողի բարձրությունը: Մենք օգտագործում ենք այդ փոփոխականները և մի քանի պարզ մաթեմատիկա՝ ստեղծելու մեր բոլոր տեսակի լուսանցքները, լիցքները և գծերի բարձրությունները և ավելին: Անհատականացրեք դրանք, և Bootstrap-ը հարմարվում է:

Շեշտադրում

Օգտագործեք HTML-ի լռելյայն շեշտադրման թեգերը թեթև ոճերով:

`<small>`

Տեքստի ներդիրում կամ բլոկների շեշտադրումը հանելու համար օգտագործեք փոքր պիտակը:

Տեքստի այս տողը նախատեսված է որպես նուրբ տպագիր:

<p> <small> Տեքստի այս տողը նախատեսված է որպես նուրբ տպագիր: </small> </p>

Համարձակ

Ավելի ծանր տառատեսակով տեքստի հատվածն ընդգծելու համար:

Տեքստի հետևյալ հատվածը ներկայացվում է որպես թավ տեքստ :

<strong> մատուցվում է որպես թավ տեքստ </strong>

Շեղագիր

Տեքստի հատվածը շեղատառերով ընդգծելու համար:

Տեքստի հետևյալ հատվածը ներկայացվում է որպես շեղ տեքստ :

<em> մատուցվում է որպես շեղ տեքստ </em>

Գլուխը վերԱզատորեն օգտագործեք <b>և <i>HTML5-ում: <b>նախատեսված է ընդգծել բառերը կամ արտահայտությունները՝ առանց լրացուցիչ կարևորություն հաղորդելու, մինչդեռ <i>հիմնականում նախատեսված է ձայնի, տեխնիկական տերմինների և այլնի համար:

Հարթեցման դասեր

Հեշտությամբ վերադասավորեք տեքստը բաղադրիչներին տեքստի հավասարեցման դասերով:

Ձախ հավասարեցված տեքստ:

Կենտրոնում հավասարեցված տեքստ:

Աջ հավասարեցված տեքստ:

<p class = "text-left" > Ձախ հավասարեցված տեքստ: </p> 
<p class = "text-center" > Կենտրոնով հավասարեցված տեքստ: </p> 
<p class = "text-right" > Աջ հավասարեցված տեքստ: </p>

Շեշտադրման դասեր

Փոխանցեք իմաստը գույնի միջոցով մի քանի ընդգծված օգտակար դասերի միջոցով:

Fusce dapibus, tellus ac cursus commodo, 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, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = «տեքստային նախազգուշացում» > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = «տեքստային սխալ» > 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 = «տեքստային հաջողություն» > Duis mollis, est non commodo luctus, nisi erat porttitor ligula: </p>

հապավումներ

HTML-ի տարրի ոճավորված իրականացում <abbr>հապավումների և հապավումների համար՝ սավառնելիս ընդլայնված տարբերակը ցուցադրելու համար: Հատկանիշ ունեցող հապավումներն titleունեն թեթև կետավոր ներքևի եզրագիծ և սավառնելիս օգնության կուրսորը, որը լրացուցիչ համատեքստ է ապահովում սավառնելու ժամանակ:

`<abbr>`

Ընդլայնված տեքստի համար երկար սավառնող հապավումների վրա ներառեք titleհատկանիշը:

Հատկանիշ բառի հապավումը attr է :

<abbr title = «հատկանիշ» > attr </abbr>

`<abbr class="initialism">`

.initialismՄի փոքր ավելի փոքր տառաչափի համար ավելացրեք հապավումը:

HTML- ն ամենալավ բանն է կտրատած հացից հետո:

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Հասցեներ

Ներկայացրե՛ք մոտակա նախնիների կամ աշխատանքի ողջ մարմնի կոնտակտային տվյալները:

`<address>`

Պահպանեք ֆորմատավորումը՝ վերջացնելով բոլոր տողերը <br>:

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

Ամբողջական անուն
[email protected]

<հասցե>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  Սան Ֆրանցիսկո, CA 94107 <br>
  <abbr title = "Phone" > P: </abbr> (123) 456-7890 
</հասցե>
 
<հասցե>
  <strong> Ամբողջական անուն </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</հասցե>

Արգելափակման մեջբերումներ

Ձեր փաստաթղթում մեկ այլ աղբյուրից բովանդակության բլոկներ մեջբերելու համար:

Կանխադրված բլոկի մեջբերում

Փաթաթեք <blockquote>ցանկացած HTML- ի շուրջը որպես մեջբերում: Ուղղակի չակերտների համար խորհուրդ ենք տալիս a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante. </p>
</blockquote>

Արգելափակման ընտրանքներ

Ոճը և բովանդակությունը փոխվում են ստանդարտ բլոկ մեջբերումների պարզ տատանումների համար:

Աղբյուրի անվանումը

Ավելացրեք <small>պիտակ՝ աղբյուրը բացահայտելու համար: Փաթեթավորեք սկզբնաղբյուր աշխատանքի անվանումը <cite>:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.
Աղբյուրի վերնագրում հայտնի մեկը

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante. </p>
  <small> Հայտնի մեկը <cite title = "Source Title" > Աղբյուրի անվանումը </cite></small> 
</blockquote>

Այլընտրանքային ցուցադրումներ

Օգտագործեք .pull-rightլողացող, աջ հարթեցված բլոկի մեջբերումների համար:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.
Աղբյուրի վերնագրում հայտնի մեկը

<blockquote class = "pull-right" > 
  ...
</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 at
Faucibus porta lacus fringilla vel
Էնեան նստել ամետ էրատ նունց
Eget porttitor lorem

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

Պատվիրել է

Ապրանքների ցանկ, որոնցում պատվերը բացահայտորեն կարևոր է :

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ամբողջական մոլեստի լորեմ և մասսա
Հեշտացում պրետիում նիսլ ալիքում
Նալլա volutpat aliquam velit
Faucibus porta lacus fringilla vel
Էնեան նստել ամետ էրատ նունց
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 at
Faucibus porta lacus fringilla vel
Էնեան նստել ամետ էրատ նունց
Eget porttitor lorem

<ul class = «չոճավորված» > 
  <li> ... </li>
</ul>

Inline

Տեղադրեք ցանկի բոլոր տարրերը մեկ տողի վրա inline-blockև մի քանի թեթև լցոնով:

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = «inline» > 
  <li> ... </li>
</ul>

Նկարագրություն

Տերմինների ցանկ՝ իրենց հարակից նկարագրություններով:

Նկարագրության ցուցակներ: Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
Էվիզմոդ: Vestibulum id ligula porta felis euismod semper 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>կողք կողքի շարված:

Նկարագրության ցուցակներ: Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
Էվիզմոդ: Vestibulum id ligula porta felis euismod semper 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 semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus:

<dl class = «dl-horizontal» > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Գլուխը վերՀորիզոնական նկարագրության ցուցակները կկրճատեն այն տերմինները, որոնք չափազանց երկար են ձախ սյունակում տեղավորվելու համար text-overflow: Նեղ տեսադաշտերում դրանք կվերածվեն լռելյայն կուտակված դասավորության:

Inline

Փաթեթավորեք կոդի ներդիր հատվածները <code>.

Օրինակ, <section>պետք է փաթաթված լինի որպես ներդիր:

Օրինակ , < code> & lt ; բաժինը & gt ;</ code > պետք է փաթաթված լինի որպես ներդիր :

Հիմնական բլոկ

Օգտագործեք <pre>կոդի բազմաթիվ տողերի համար: Համոզվեք, որ կոդի ցանկացած անկյունային փակագծերից խուսափելու համար ճիշտ մատուցման համար:

<p>Տեքստի նմուշ այստեղ...</p>

<նախա>
  <p>Տեքստի նմուշ այստեղ...</p>
</pre>

Գլուխը վերՀամոզվեք, որ կոդը պահեք <pre>պիտակների մեջ որքան հնարավոր է մոտ ձախ; այն կարտացոլի բոլոր ներդիրները:

Դուք կարող եք կամայականորեն ավելացնել .pre-scrollableդասը, որը կսահմանի 350px առավելագույն բարձրություն և կապահովի y առանցքի ոլորման տող:

Կանխադրված ոճեր

Հիմնական ոճավորման համար՝ թեթև լիցք և միայն հորիզոնական բաժանիչներ, ավելացրեք հիմնական դասը .tableցանկացածին <table>:

#	Անուն	Ազգանուն	Օգտագործողի անունը
1	նշագծել	Օտտո	@mdo
2	Յակոբ	Թորնթոն	@ճարպ
3	Լարի	թռչունը	@twitter

<table class = «աղյուսակ» > 
  …
</table>

Ընտրովի պարապմունքներ

.tableԲազային դասին ավելացրեք հետևյալ դասերից որևէ մեկը .

`.table-striped`

Ավելացնում է zebra-striping ցանկացած աղյուսակի տողում CSS ընտրիչի <tbody>միջոցով :nth-child(մատչելի չէ IE7-8-ում):

#	Անուն	Ազգանուն	Օգտագործողի անունը
1	նշագծել	Օտտո	@mdo
2	Յակոբ	Թորնթոն	@ճարպ
3	Լարի	թռչունը	@twitter

<table class = «սեղանի սեղան-գծավոր» > 
  …
</table>

`.table-bordered`

Սեղանին ավելացրեք եզրագծեր և կլորացված անկյուններ:

#	Անուն	Ազգանուն	Օգտագործողի անունը
1	նշագծել	Օտտո	@mdo
1	նշագծել	Օտտո	@getbootstrap
2	Յակոբ	Թորնթոն	@ճարպ
3	Լարի թռչուն		@twitter

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

`.table-hover`

Միացնել սավառնող վիճակը աղյուսակի տողերի վրա <tbody>.

#	Անուն	Ազգանուն	Օգտագործողի անունը
1	նշագծել	Օտտո	@mdo
2	Յակոբ	Թորնթոն	@ճարպ
3	Լարի թռչուն		@twitter

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

`.table-condensed`

Սեղաններն ավելի կոմպակտ են դարձնում՝ կիսով չափ կտրելով բջիջների լիցքը:

#	Անուն	Ազգանուն	Օգտագործողի անունը
1	նշագծել	Օտտո	@mdo
2	Յակոբ	Թորնթոն	@ճարպ
3	Լարի թռչուն		@twitter

<table class = "sable table-condensed" > 
  …
</table>

Ընտրովի տողերի դասեր

Օգտագործեք համատեքստային դասեր աղյուսակի տողերը գունավորելու համար:

Դասարան	Նկարագրություն
`.success`	Ցույց է տալիս հաջող կամ դրական գործողություն:
`.error`	Ցույց է տալիս վտանգավոր կամ պոտենցիալ բացասական գործողություն:
`.warning`	Ցույց է տալիս նախազգուշացում, որը կարող է ուշադրության կարիք ունենալ:
`.info`	Օգտագործվում է որպես լռելյայն ոճերի այլընտրանք:

#	Արտադրանք	Վերցված վճարում	Կարգավիճակ
1	ՏԲ - Ամսական	01/04/2012	Հաստատված է
2	ՏԲ - Ամսական	02/04/2012	Մերժվել է
3	ՏԲ - Ամսական	03/04/2012	Սպասվում է
4	ՏԲ - Ամսական	04/04/2012	Հաստատելու համար զանգահարեք

...
  < tr class = «հաջողություն» >
    <td> 1 < /td>
    <td>ՏԲ - ամսական</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Հաստատված է</ td >
  </ tr >
...

Աջակցված աղյուսակի նշում

Աջակցվող աղյուսակի HTML տարրերի ցանկը և ինչպես դրանք պետք է օգտագործվեն:

Նշել	Նկարագրություն
`<table>`	Փաթաթման տարր՝ տվյալների աղյուսակային ձևաչափով ցուցադրելու համար
`<thead>`	Սեղանի վերնագրի տողերի ( `<tr>`) տարր՝ աղյուսակի սյունակները պիտակավորելու համար
`<tbody>`	Սեղանի տողերի ( `<tr>`) տարր աղյուսակի մարմնում
`<tr>`	Կոնտեյներ տարր աղյուսակի բջիջների ( `<td>`կամ `<th>`) հավաքածուի համար, որը հայտնվում է մեկ տողում
`<td>`	Աղյուսակի կանխադրված բջիջ
`<th>`	Սյունակի (կամ տողի, կախված շրջանակից և տեղադրությունից) պիտակների համար աղյուսակի հատուկ բջիջ
`<caption>`	Աղյուսակի նկարագրությունը կամ ամփոփումը, հատկապես օգտակար էկրանի ընթերցողների համար

<աղյուսակ>
  <caption> ... </caption>
  <գլուխ>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Կանխադրված ոճեր

Առանձին ձևի վերահսկիչները ստանում են ոճավորում, բայց առանց որևէ պահանջվող հիմնական դասի <form>կամ նշագծման մեծ փոփոխությունների: Արդյունքները դրսևորվում են ձախից հավասարեցված պիտակներով՝ ձևի կառավարիչների վերևում:

<ձև>
  <fieldset>
    <legend> Լեգենդ </legend>
    <label> Պիտակի անունը </label>
    <input type = "text" placeholder = "Type something…" >  
    <span class = "help-block" > Բլոկի մակարդակի օգնության տեքստի օրինակ այստեղ: </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > Ստուգեք ինձ 
    </label>
    <button type = "submit" class = "btn" > Ներկայացնել </button>  
  </fieldset>
</form>

Ընտրովի դասավորություններ

Bootstrap-ում ներառված են երեք կամընտիր ձևի դասավորություններ ընդհանուր օգտագործման դեպքերի համար:

Որոնման ձև

Ավելացրե՛ք .form-searchձևին և տեքստին .search-query՝ <input>լրացուցիչ կլորացված տեքստի մուտքագրման համար:

<form class = "form-որոնում" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Որոնել </button>  
</form>

Ներդիր ձև

Կոմպակտ դասավորության համար ավելացրեք .form-inlineձախ կողմում դասավորված պիտակների և ներկառուցված բլոկների վերահսկման համար:

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Գաղտնաբառ" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Հիշել ինձ 
  </label>
  <button type = "submit" class = "btn" > Մուտք գործեք </button>  
</form>

Հորիզոնական ձև

Աջը հավասարեցրեք պիտակները և լողացրե՛ք դրանք ձախ կողմում, որպեսզի դրանք հայտնվեն նույն տողում, ինչ հսկիչները: Պահանջում է ամենաշատ նշագրման փոփոխությունները լռելյայն ձևից.

Ավելացնել .form-horizontalձևին
Փաթեթավորեք պիտակները և հսկիչները.control-group
Ավելացնել .control-labelպիտակի վրա
Փաթեթավորեք ցանկացած հարակից հսկիչ՝ .controlsպատշաճ հավասարեցման համար

<form class = «ձև-հորիզոնական» > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > Էլփոստ </label>  
    <div class = «վերահսկում» > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > Գաղտնաբառ </label>  
    <div class = «վերահսկում» > 
      <input type = "password" id = "inputPassword" placeholder = "Գաղտնաբառ" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = «վերահսկում» > 
      <label class = "checkbox" > 
        <input type = "checkbox" > Հիշել ինձ 
      </label>
      <button type = "submit" class = "btn" > Մուտք գործեք </button>  
    </div>
  </div>
</form>

Աջակցված ձևերի վերահսկում

Ստանդարտ ձևի վերահսկման օրինակներ, որոնք աջակցվում են ձևի օրինակի դասավորության մեջ:

Մուտքագրումներ

Ամենատարածված ձևի կառավարում, տեքստի վրա հիմնված մուտքագրման դաշտեր: Ներառում է աջակցություն HTML5-ի բոլոր տեսակների համար՝ տեքստ, գաղտնաբառ, ամսաթիվ, ամսաթիվ-տեղական, ամսաթիվ, ամիս, ժամ, շաբաթ, համար, էլ. հասցե, url, որոնում, հեռ. և գույն:

Պահանջում է միշտ օգտագործել նշվածը type:

<input type = "text" placeholder = "Text input" >

Textarea

Ձևի կառավարում, որն աջակցում է տեքստի մի քանի տող: Փոխեք rowsհատկանիշը ըստ անհրաժեշտության:

<textarea rows = "3" ></textarea>

Նշման տուփեր և ռադիոներ

Նշման վանդակները նախատեսված են ցուցակում մեկ կամ մի քանի տարբերակներ ընտրելու համար, մինչդեռ ռադիոկայանները նախատեսված են շատերից մեկ տարբերակ ընտրելու համար:

Կանխադրված (դասավոր)

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  Առաջին տարբերակն այս և այն է՝ անպայման ներառեք, թե ինչու է դա հիանալի
</label>
 
<label class = «ռադիո» > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1"-ը ստուգված է >     
  Առաջին տարբերակն այս և այն է՝ անպայման ներառեք, թե ինչու է դա հիանալի
</label>
<label class = «ռադիո» > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Տարբերակ երկրորդը կարող է լինել այլ բան, և այն ընտրելով կչեղարկվի առաջին տարբերակը
</label>

Ներկառուցված վանդակներ

Ավելացրեք .inlineդասը մի շարք վանդակների կամ ռադիոկայանների վրա, որպեսզի վերահսկիչները հայտնվեն նույն տողում:

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Ընտրում է

Օգտագործեք լռելյայն տարբերակը կամ նշեք a multiple="multiple"՝ միանգամից մի քանի տարբերակ ցուցադրելու համար:

<ընտրել>
  <տարբերակ> 1 </option>
  <տարբերակ> 2 </option>
  <տարբերակ> 3 </option>
  <տարբերակ> 4 </option>
  <տարբերակ> 5 </option>
</select>
 
<select multiple = "multiple" > 
  <տարբերակ> 1 </option>
  <տարբերակ> 2 </option>
  <տարբերակ> 3 </option>
  <տարբերակ> 4 </option>
  <տարբերակ> 5 </option>
</select>

Ձևերի վերահսկման ընդլայնում

Ավելացնելով զննարկչի գոյություն ունեցող հսկիչները՝ Bootstrap-ը ներառում է ձևի այլ օգտակար բաղադրիչներ:

Նախապատրաստված և կցված մուտքեր

Ավելացրեք տեքստ կամ կոճակներ տեքստի վրա հիմնված ցանկացած մուտքագրումից առաջ կամ հետո: Նկատի ունեցեք, որ selectտարրերն այստեղ չեն ապահովվում:

Կանխադրված ընտրանքներ

Փաթեթավորեք an-ը .add-onև an- inputը երկու դասերից մեկի հետ՝ մուտքագրման տեքստը նախապես ավելացնելու կամ ավելացնելու համար:

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username " >    
</div>
<div class = "input-append" > 
  <input class = "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> 
  <input class = "span2" id = "appendedPrependedInput " type = "տեքստ" >   
  <span class = "add-on" > .00 </span> 
</div>

Կոճակներ տեքստի փոխարեն

Տեքստով a-ի փոխարեն <span>օգտագործեք a- .btnն՝ մուտքագրմանը մի կոճակ (կամ երկու) կցելու համար:

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "տեքստ" >   
  <button class = "btn" type = "button" > Գնա՛: </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "տեքստ" >   
  <button class = "btn" type = "button" > Որոնել </button>  
  <button class = "btn" type = "button" > Ընտրանքներ </button>  
</div>

Կոճակների բացվող պատուհաններ

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Գործողություն
      <span class = «caret» ></span> 
    </button>
    <ul class = «dropdown-menu» > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Գործողություն
      <span class = «caret» ></span> 
    </button>
    <ul class = «dropdown-menu» > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "տեքստ" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Գործողություն
      <span class = «caret» ></span> 
    </button>
    <ul class = «dropdown-menu» > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "տեքստ" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Գործողություն
      <span class = «caret» ></span> 
    </button>
    <ul class = «dropdown-menu» > 
      ...
    </ul>
  </div>
</div>

Սեգմենտացված բացվող խմբեր

<ձև>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <մուտքագրման տեսակ = «տեքստ» > 
  </div>
  <div class = "input-append" > 
    <մուտքագրման տեսակ = «տեքստ» > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Որոնման ձև

<form class = "form-որոնում" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Որոնել </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Որոնել </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Վերահսկել չափերը

Օգտագործեք հարաբերական չափերի դասեր, ինչպիսիք են .input-largeկամ համապատասխանեցրեք ձեր մուտքերը ցանցի սյունակների չափերին՝ օգտագործելով .span*դասերը:

Արգելափակել մակարդակի մուտքերը

Ստիպեք որևէ <input>կամ <textarea>տարրին պահել բլոկի մակարդակի տարրի պես:

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Հարաբերական չափսեր

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Գլուխը վերՀետագա տարբերակներում մենք կփոխենք այս հարաբերական մուտքային դասերի օգտագործումը՝ մեր կոճակների չափերին համապատասխանելու համար: Օրինակ, .input-largeկավելացնի ներածման լիցքը և տառաչափը:

Ցանցի չափսերը

Օգտագործեք .span1to .span12մուտքերի համար, որոնք համապատասխանում են ցանցի սյունակների նույն չափերին:

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

Մեկ տողում ցանցի մի քանի մուտքերի համար օգտագործեք .controls-rowմոդիֆիկատորների դասը՝ համապատասխան տարածության համար : Այն լողում է մուտքերը, որպեսզի փլուզվի սպիտակ տարածությունը, սահմանում է համապատասխան լուսանցքները և մաքրում է բոցը:

<div class = «վերահսկում» > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Չխմբագրվող մուտքեր

Ներկայացրե՛ք տվյալները այնպիսի ձևով, որը հնարավոր չէ խմբագրել՝ առանց իրական ձևի նշագրման օգտագործման:

<span class = "input-xlarge uneditable-input" > Որոշ արժեքներ այստեղ </span>

Ձևավորել գործողություններ

Վերջացրեք ձևը մի խումբ գործողություններով (կոճակներով): Երբ տեղադրվում են a- .form-actionsի մեջ, կոճակներն ավտոմատ կերպով կնճռոտվեն՝ համապատասխանեցնելով ձևի կառավարիչներին:

<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ոճերը որոշ ձևերի վերահսկումներից և կիրառում ենք a- box-shadowն իր տեղում :focus:

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Սա կենտրոնացած է..." >

Անվավեր մուտքեր

Ոճային մուտքագրումներ դիտարկիչի լռելյայն ֆունկցիոնալության միջոցով :invalid: Նշեք a type, ավելացրեք requiredհատկանիշը, եթե դաշտն ընտրովի չէ, և (եթե կիրառելի է) նշեք a pattern.

Սա հասանելի չէ Internet Explorer 7-9 տարբերակներում CSS կեղծ ընտրիչների աջակցության բացակայության պատճառով:

<input class = "span3" type = "email" պահանջվում է >

Անջատված մուտքեր

Ավելացրեք disabledհատկանիշը մուտքագրման վրա՝ օգտատիրոջ մուտքագրումը կանխելու և մի փոքր այլ տեսք ստեղծելու համար:

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Անջատված է մուտքագրումն այստեղ..." անջատված է >

Վավերացման վիճակներ

Bootstrap-ը ներառում է սխալի, նախազգուշացման, տեղեկատվության և հաջողության հաղորդագրությունների վավերացման ոճեր: Օգտագործելու համար ավելացրեք համապատասխան դասը շրջապատին .control-group:

<div class = "վերահսկիչ խմբի նախազգուշացում" > 
  <label class = "control-label" for = "inputWarning" > Մուտքագրում նախազգուշացմամբ </label>  
  <div class = «վերահսկում» > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Հնարավոր է, որ ինչ- որ բան սխալ է տեղի ունեցել </span> 
  </div>
</div>
 
<div class = "control-group error" > 
  <label class = "control-label" for = "inputError" > Մուտք սխալմամբ </label>  
  <div class = «վերահսկում» > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Խնդրում ենք ուղղել սխալը </span> 
  </div>
</div>
 
<div class = "control-group info" > 
  <label class = "control-label" for = "inputInfo" > Մուտքագրում տեղեկատվության հետ </label>  
  <div class = «վերահսկում» > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Օգտվողի անունը արդեն վերցված է </span> 
  </div>
</div>
 
<div class = «վերահսկիչ խմբի հաջողություն» > 
  <label class = "control-label" for = "inputSuccess" > Մուտքագրումը հաջողությամբ </label>  
  <div class = «վերահսկում» > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Կանխադրված կոճակներ

Կոճակների ոճերը կարող են կիրառվել ցանկացած բանի վրա, երբ .btnկիրառվում է դասը: Այնուամենայնիվ, սովորաբար դուք կցանկանայիք կիրառել դրանք միայն <a>և <button>տարրերի վրա՝ լավագույն մատուցման համար:

Կոճակ	դասի = ""	Նկարագրություն
	`btn`	Ստանդարտ մոխրագույն կոճակ՝ գրադիենտով
	`btn btn-primary`	Ապահովում է լրացուցիչ տեսողական քաշ և բացահայտում է հիմնական գործողությունը կոճակների մի շարքում
	`btn btn-info`	Օգտագործվում է որպես լռելյայն ոճերի այլընտրանք
	`btn btn-success`	Ցույց է տալիս հաջող կամ դրական գործողություն
	`btn btn-warning`	Նշում է, որ այս գործողությունը պետք է զգույշ լինի
	`btn btn-danger`	Ցույց է տալիս վտանգավոր կամ պոտենցիալ բացասական գործողություն
	`btn btn-inverse`	Այլընտրանքային մուգ մոխրագույն կոճակ, որը կապված չէ իմաստային գործողության կամ օգտագործման հետ
	`btn btn-link`	Շեշտադրեք կոճակը՝ այն դարձնելով հղումի տեսք՝ պահպանելով կոճակի վարքագիծը

Խաչաձև բրաուզերի համատեղելիություն

IE9-ը չի կտրում ֆոնային գրադիենտները կլորացված անկյուններում, ուստի մենք այն հեռացնում ենք: Նմանապես, IE9-ը ջնջում է հաշմանդամ buttonտարրերը՝ տեքստը մոխրագույն դարձնելով տհաճ տեքստի ստվերով, որը մենք չենք կարող ուղղել:

Կոճակների չափսերը

Ցանկանում եք ավելի մեծ կամ փոքր կոճակներ: Ավելացնել .btn-large, .btn-smallկամ .btn-miniլրացուցիչ չափերի համար:

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Մեծ կոճակ </button>  
  <button class = "btn btn-large" type = "button" > Մեծ կոճակ </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Կանխադրված կոճակ </button>  
  <button class = "btn" type = "button" > Կանխադրված կոճակ </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Փոքր կոճակ </button>  
  <button class = "btn btn-small" type = "button" > Փոքր կոճակ </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Մինի կոճակ </button>  
  <button class = "btn btn-mini" type = "button" > Մինի կոճակ </button>  
</p>

Ստեղծեք բլոկի մակարդակի կոճակներ, որոնք ընդգրկում են ծնողի ամբողջ լայնությունը՝ ավելացնելով .btn-block:

<button class = "btn btn-large btn-block btn-primary" type = "button" > Արգելափակման մակարդակի կոճակ </button>  
<button class = "btn btn-large btn-block" type = "button" > Արգելափակման մակարդակի կոճակ </button>

Հաշմանդամ վիճակ

Դարձրեք կոճակներին չսեղմելու տեսք՝ դրանք 50%-ով ետ թողնելով:

Խարիսխի տարր

Ավելացրեք .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>կոճակներին:

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Հիմնական կոճակ </button>   
<button type = "button" class = "btn btn-large" disabled > Կոճակ </button>

Մեկ դաս, բազմաթիվ պիտակներ

Օգտագործեք .btnդասը <a>, <button>, կամ <input>տարրի վրա:

<a class = "btn" href = "" > Հղում </a>  
<button class = "btn" type = "submit" > Կոճակ </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "Submit" >

Որպես լավագույն պրակտիկա, փորձեք տարրը համապատասխանեցնել ձեր համատեքստին, որպեսզի ապահովեք համընկնող բրաուզերների ցուցադրում: Եթե ունեք input, օգտագործեք <input type="submit">ձեր կոճակի համար:

Ավելացրեք դասեր <img>տարրի մեջ՝ ցանկացած նախագծում պատկերները հեշտությամբ ոճավորելու համար:

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

Գլուխը վեր .img-roundedև .img-circleչեն աշխատում IE7-8-ում border-radiusաջակցության բացակայության պատճառով:

Սրբապատկերներ

140 սրբապատկերներ սփրայթ ձևով, հասանելի մուգ մոխրագույն (կանխադրված) և սպիտակ գույներով, տրամադրված Glyphicons- ի կողմից :

պատկերակ-ապակ
պատկերակ-երաժշտություն
պատկերակների որոնում
պատկերակ-ծրար
պատկերակ-սիրտ
պատկերակ-աստղ
պատկերակ-աստղ-դատարկ
պատկերակ-օգտատեր
պատկերակ-ֆիլմ
պատկերակ-մեծ
պատկերակ-րդ
պատկերակ-րդ ցուցակ
պատկերակ-ok
պատկերակը հեռացնել
icon-zoom-in
icon-zoom-out
պատկերակի անջատում
պատկերակ-ազդանշան
պատկերակ-ծամ
պատկերակ-աղբ
պատկերակ-տուն
պատկերակ-ֆայլ
պատկերակի ժամանակ
պատկերակ-ճանապարհ
icon-download-alt
պատկերակ-ներբեռնում
պատկերակի վերբեռնում
պատկերակ-մուտքի արկղ
պատկերակ-խաղ-շրջանակ
պատկերակ-կրկնել
պատկերակի թարմացում
icon-list-alt
պատկերակ-կողպեք
պատկերակ-դրոշ
պատկերակ-ականջակալներ
պատկերակի ծավալի անջատում
պատկերակի ծավալի իջեցում
պատկերակի ծավալի բարձրացում
պատկերակ-qcode
պատկերակ-շտրիխ կոդ
պատկերակ-պիտակ
պատկերակ-պիտակներ
պատկերագիրք
պատկերակ-էջանիշ
պատկերակ-տպագիր
պատկերակ-տեսախցիկ
պատկերակ-տառատեսակ
պատկերակ-համարձակ
պատկերակ-շեղ
պատկերակ-տեքստ-բարձրություն
պատկերակ-տեքստ-լայնություն
պատկերակ-հավասարեցնել-ձախ
icon-align-centre
պատկերակ-հավասարեցնել-աջ
պատկերակ-հավասարեցնել-հիմնավորել
պատկերակ-ցուցակ
icon-indent-left
icon-indent-right
պատկերակ-facetime-տեսանյութ
պատկերակ-պատկեր
պատկերակ-մատիտ
պատկերակ-քարտեզ-մարկեր
պատկերակ-կարգավորել
պատկերակ-երանգ
պատկերակ-խմբագրել
պատկերակ-կիսվել
պատկերակի ստուգում
պատկերակ-շարժում
պատկերակ-քայլ-հետ
icon-fast-backward
պատկերակ-հետամնաց
պատկերակ-խաղ
պատկերակ-դադար
icon-stop
պատկերակ-առաջ
icon-fast-forward
պատկերակ-քայլ առաջ
պատկերակ-հանել
պատկերակ-շևրոն-ձախ
պատկերակ-շևրոն-աջ
պատկերակ-պլյուս-նշան
պատկերակ-մինուս-նշան
icon-remove-sign
պատկերակ-ok-նշան
պատկերակ-հարց-նշան
պատկերակ-տեղեկատվական նշան
պատկերակ-սքրինշոթ
icon-remove-circle
պատկերակ-ok-շրջանակ
icon-ban-circle
պատկերակ-սլաք-ձախ
պատկերակ-սլաք-աջ
պատկերակ-սլաքը վեր
պատկերակ-սլաք-ներքև
icon-share-alt
icon-resize-full
icon-size-small
պատկերակ-պլյուս
պատկերակ-մինուս
պատկերակ-աստղանիշ
պատկերակ-բացականչական-նշան
պատկերակ-նվեր
պատկերակ-տերև
պատկերակ-կրակ
պատկերակ-աչքը բաց
պատկերակ-աչք փակել
պատկերակ-նախազգուշական նշան
պատկերակ-ինքնաթիռ
պատկերակ-օրացույց
պատկերակ-պատահական
պատկերակ-մեկնաբանություն
պատկերակ-մագնիս
պատկերակ-շևրոն-up
պատկերակ-շևրոն-ներքև
պատկերակ-retweet
icon-shopping-cart
պատկերակ-թղթապանակ-փակել
պատկերակ-թղթապանակ-բաց
պատկերակ-չափափոխել-ուղղահայաց
icon-size-horizontal
պատկերակ-hdd
icon-bullhorn
պատկերակ-զանգ
պատկերակ-վկայական
պատկերակ-բութ մատը վեր
պատկերակ-բութ-ներքև
պատկերակ-ձեռքի-աջ
պատկերակ-ձախ-ձախ
պատկերակ-ձեռքի վեր
պատկերակ-ձեռքի ներքեւ
պատկերակ-շրջանակ-սլաք-աջ
պատկերակ-շրջանակ-սլաք-ձախ
icon-circle-arrow-up
պատկերակ-շրջանակ-սլաք-ներքև
պատկերակ-գլոբուս
պատկերակ-բանալին
պատկերակ-առաջադրանքներ
պատկերակ-ֆիլտր
պատկերակ-պորտֆել
պատկերակ ամբողջ էկրանով

Գլիֆիկոնների վերագրում

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 = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = «dropdown-menu» > 
    <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 class = «վերահսկում» > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-velope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Տպագրություն

Վերնագրեր

հ1. Վերնագիր 1

h2. Վերնագիր 2

h3. Վերնագիր 3

h4. Վերնագիր 4

h5. Վերնագիր 5

h6. Վերնագիր 6

Հիմնական պատճենը

Հիմնական մարմնի պատճենը

Կառուցվել է Less-ով

Շեշտադրում

<small>

Համարձակ

Շեղագիր

Հարթեցման դասեր

Շեշտադրման դասեր

հապավումներ

<abbr>

<abbr class="initialism">

Հասցեներ

<address>

Արգելափակման մեջբերումներ

Կանխադրված բլոկի մեջբերում

Արգելափակման ընտրանքներ

Աղբյուրի անվանումը

Այլընտրանքային ցուցադրումներ

Ցուցակներ

Չպատվիրված

Պատվիրել է

Ոչ ոճավորված

Inline

Նկարագրություն

Հորիզոնական նկարագրություն

Կոդ

Inline

Հիմնական բլոկ

Սեղաններ

Կանխադրված ոճեր

Ընտրովի պարապմունքներ

.table-striped

.table-bordered

.table-hover

.table-condensed

Ընտրովի տողերի դասեր

Աջակցված աղյուսակի նշում

Ձևաթղթեր

Կանխադրված ոճեր

Ընտրովի դասավորություններ

Որոնման ձև

Ներդիր ձև

Հորիզոնական ձև

Աջակցված ձևերի վերահսկում

Մուտքագրումներ

Textarea

Նշման տուփեր և ռադիոներ

Կանխադրված (դասավոր)

Ներկառուցված վանդակներ

Ընտրում է

Ձևերի վերահսկման ընդլայնում

Նախապատրաստված և կցված մուտքեր

Կանխադրված ընտրանքներ

Համակցված

Կոճակներ տեքստի փոխարեն

Կոճակների բացվող պատուհաններ

Սեգմենտացված բացվող խմբեր

Որոնման ձև

Վերահսկել չափերը

Արգելափակել մակարդակի մուտքերը

Հարաբերական չափսեր

Ցանցի չափսերը

Չխմբագրվող մուտքեր

Ձևավորել գործողություններ

Օգնության տեքստ

Ներքին օգնություն

Արգելափակել օգնությունը

Ձևերի վերահսկման վիճակներ

Ներածման ֆոկուս

Անվավեր մուտքեր

Անջատված մուտքեր

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`