Загалоўкі

<h1>Даступныя ўсе загалоўкі HTML <h6>.

h1. Загаловак 1

h2. Загаловак 2

h3. Загаловак 3

h4. Загаловак 4

h5. Загаловак 5

h6. Загаловак 6

Асноўная копія

Глабальнае значэнне Bootstrap па змаўчанні font-sizeскладае 14 пікселяў з 20 пікселямі . Гэта датычыцца і ўсіх абзацаў. Акрамя таго, (абзацы) атрымліваюць ніжняе поле ў палову іх вышыні радка (10 пікселяў па змаўчанні).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.

Мецэнат 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 class = "lead" > ... </p>

Пабудаваны з Less

Тыпаграфічны маштаб заснаваны на дзвюх зменных LESS у variables.less : @baseFontSizeі @baseLineHeight. Першы - гэта базавы памер шрыфта, які выкарыстоўваецца паўсюль, а другі - базавая вышыня лініі. Мы выкарыстоўваем гэтыя зменныя і некаторую простую матэматыку для стварэння палёў, водступаў і вышынь радкоў для ўсіх нашых тыпаў і шмат іншага. Наладзьце іх, і Bootstrap адаптуецца.

Націск

Скарыстайцеся стандартнымі тэгамі вылучэння HTML з лёгкімі стылямі.

`<small>`

Для зняцця вылучэння радкоў або блокаў тэксту выкарыстоўвайце малы тэг.

Гэты радок тэксту павінен разглядацца як дробны шрыфт.

<p> <small> Гэты радок тэксту павінен разглядацца як дробны шрыфт. </small> </p>

Тлусты

Для вылучэння фрагмента тэксту важным

Наступны фрагмент тэксту адлюстроўваецца тлустым шрыфтам .

<strong> выдзелены тлустым шрыфтам </strong>

Курсіў

Для выдзялення націскам фрагмента тэксту

Наступны фрагмент тэксту адлюстраваны курсівам .

<em> адлюстроўваецца як тэкст, выдзелены курсівам </em>

Галаву ўверх! Не саромейцеся выкарыстоўваць <b>і <i>ў HTML5. <b>прызначана для вылучэння слоў або фраз без перадачы дадатковай важнасці, у той час як <i>у асноўным для голасу, тэхнічных тэрмінаў і г.д.

Акцэнтныя заняткі

Перадайце сэнс з дапамогай колеру з некалькімі акцэнтаванымі карыснымі класамі.

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 = "muted" > Fusce dapibus, tellus 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>

Скарачэнні

Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

`<abbr>`

For expanded text on long hover of an abbreviation, include the title attribute.

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

`<abbr class="initialism">`

Add .initialism to an abbreviation for a slightly smaller font-size.

HTML is the best thing since sliced bread.

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

Addresses

Present contact information for the nearest ancestor or the entire body of work.

`<address>`

Preserve formatting by ending all lines with <br>.

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

Full Name
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
 
<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <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 posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Alternate displays

Use .pull-right for a floated, right-aligned blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

<blockquote class="pull-right">
  ...
</blockquote>

Lists

Unordered

A list of items in which the order does not explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Ordered

A list of items in which the order does explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Unstyled

A list of items with no list-style or additional left padding.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Description

A list of terms with their associated descriptions.

Description lists: A description list is perfect for defining terms.
Euismod: 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>

Horizontal description

Make terms and descriptions in <dl> line up side-by-side.

Description lists: A description list is perfect for defining terms.
Euismod: 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>

Heads up! Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.

For example, <code><section></code> should be wrapped as inline.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>

<pre>
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Optional classes

Add any of the follow classes to the .table base class.

`.table-striped`

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

`.table-bordered`

Add borders and rounded corners to the table.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@getbootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

`.table-hover`

Enable a hover state on table rows within a <tbody>.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

`.table-condensed`

Makes tables more compact by cutting cell padding in half.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Optional row classes

Use contextual classes to color table rows.

Class	Description
`.success`	Indicates a successful or positive action.
`.error`	Indicates a dangerous or potentially negative action.
`.warning`	Indicates a warning that might need attention.
`.info`	Used as an alternative to the default styles.

#	Product	Payment Taken	Status
1	TB - Monthly	01/04/2012	Approved
2	TB - Monthly	02/04/2012	Declined
3	TB - Monthly	03/04/2012	Pending
4	TB - Monthly	04/04/2012	Call in to confirm

...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Supported table markup

List of supported table HTML elements and how they should be used.

Tag	Description
`<table>`	Wrapping element for displaying data in a tabular format
`<thead>`	Container element for table header rows (`<tr>`) to label table columns
`<tbody>`	Container element for table rows (`<tr>`) in the body of the table
`<tr>`	Container element for a set of table cells (`<td>` or `<th>`) that appears on a single row
`<td>`	Default table cell
`<th>`	Special table cell for column (or row, depending on scope and placement) labels Must be used within a `<thead>`
`<caption>`	Description or summary of what the table holds, especially useful for screen readers

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Default styles

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

<form>
  <legend>Legend</legend>
  <label>Label name</label>
  <input type="text" placeholder="Type something…">
  <span class="help-block">Example block-level help text here.</span>
  <label class="checkbox">
    <input type="checkbox"> Check me out
  </label>
  <button type="submit" class="btn">Submit</button>
</form>

Optional layouts

Included with Bootstrap are three optional form layouts for common use cases.

Search form

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>

Horizontal form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

Add .form-horizontal to the form
Wrap labels and controls in .control-group
Add .control-label to the label
Wrap any associated controls in .controls for proper alignment

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</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 = "Password" >   
    </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" >

Тэкставае поле

Элемент кіравання формай, які падтрымлівае некалькі радкоў тэксту. Пры неабходнасці змяніце 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>

Выбірае

Выкарыстоўвайце параметр па змаўчанні або ўкажыце, multiple="multiple"каб паказаць некалькі варыянтаў адначасова.

<выбраць>
  <параметр> 1 </параметр>
  <параметр> 2 </параметр>
  <параметр> 3 </параметр>
  <параметр> 4 </параметр>
  <параметр> 5 </параметр>
</выбраць>
 
<select multiple = "multiple" > 
  <параметр> 1 </параметр>
  <параметр> 2 </параметр>
  <параметр> 3 </параметр>
  <параметр> 4 </параметр>
  <параметр> 5 </параметр>
</выбраць>

Пашырэнне элементаў кіравання формай

У дадатак да існуючых элементаў кіравання браўзера Bootstrap уключае іншыя карысныя кампаненты формы.

Дададзеныя і дададзеныя ўваходы

Дадайце тэкст або кнопкі да або пасля любога тэкставага ўводу. Звярніце ўвагу, што selectэлементы тут не падтрымліваюцца.

Параметры па змаўчанні

Абгарніце an .add-onі an inputадным з двух класаў, каб дадаць тэкст да ўводу або да яго.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span><input class = "span2" id = "prependedInput" size = "16" type = "text" placeholder = "Імя карыстальніка" >      
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " size = "16" 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 " size = "16" type = "text" ><span class = "add-on" > .00 </span>      
</div>

Кнопкі замест тэксту

Замест a <span>з тэкстам выкарыстоўвайце a .btn, каб далучыць кнопку (ці дзве) да ўводу.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " size = "16" type = "text" ><button class = "btn" type = "button" > Наперад! </button>      
</div>
 
<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " size = "16" type = "text" ><button class = "btn" type = "button" > Пошук </button><button class = "btn" type = "button" > Параметры </button>        
</div>

Форма пошуку

<form class = "form-search" > 
  <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 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павялічыць запаўненне і памер шрыфта ўводу.

Памер сеткі

Выкарыстоўвайце .span1для .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 class = "span2" > 
  ...
</выбраць>
<select class = "span3" > 
  ...
</выбраць>

Для некалькіх уводаў сеткі ў радку выкарыстоўвайце .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>

Фарміруйце дзеянні

Заканчвайце форму групай дзеянняў (кнопак). Пры размяшчэнні ў межах .form-horizontal, кнопкі будуць аўтаматычна адступаць у адну лінію з элементамі кіравання формы.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Захаваць змены </button>  
  <button type = "button" class = "btn" > Адмена </button>  
</div>

Тэкст даведкі

Убудаваная і блочная падтрымка тэксту даведкі, які з'яўляецца вакол элементаў кіравання формы.

Убудаваная даведка

<input type = "text" ><span class = "help-inline" > Убудаваны тэкст даведкі </span>

Заблакіраваць дапамогу

<input type = "text" ><span class = "help-block" > Больш доўгі блок тэксту даведкі, які разбіваецца на новы радок і можа выходзіць за межы аднаго радка. </span>

Станы кантролю формы

Забяспечце зваротную сувязь з карыстальнікамі або наведвальнікамі з дапамогай асноўных станаў зваротнай сувязі аб элементах кіравання формамі і этыкетках.

Фокус уводу

Мы выдаляем outlineстылі па змаўчанні з некаторых элементаў кіравання формай і ўжываем box-shadowзамест іх для :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Гэта ў фокусе..." >

Адключаныя ўваходы

Дадайце 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 = "памылка кантрольнай групы" > 
  <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 success" > 
  <label class = "control-label" for = "inputSuccess" > Паспяховы ўвод </label>  
  <div class = "элементы кіравання" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Ура! </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 .

абраз-шклярус
абраз-муз
значок-пошук
абразок-канверт
абраз-сэрца
абраз-зорка
значок-зорка-пусты
значок карыстальніка
абраз-фільм
значок-й-вялік
абразок-й
значок-й-спіс
значок-ок
значок-выдаліць
icon-zoom-in
icon-zoom-out
значок выкл
значок-сігнал
значок-вінцік
значок-сметніца
абраз-дом
значок-файл
абраз-час
абраз-дарога
значок-загрузка-альт
значок загрузкі
загрузка значкоў
icon-box
абразок-гульня-кружок
значок-паўтор
абнавіць значок
значок-спіс-альт
значок-замак
абраз-сцяг
значок-навушнікі
icon-volume-off
значок памяншэння гучнасці
icon-volume-up
значок-qrcode
значок-штрых-код
значок-тэг
значкі-тэгі
іконнік
значок-закладка
абраз-друк
значок-фотаапарат
значок-шрыфт
абразок-тлусты
абразок-курсіў
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
значок-спіс
icon-indent-left
icon-indent-right
icon-facetime-video
абраз-карціна
значок-аловак
значок-карта-маркер
абразок-адрэгуляваць
абраз-адценне
значок-рэдагаваць
значок-доля
значок-праверка
значок-ход
значок-крок-назад
icon-fast-backward
значок-назад
абраз-п'еса
значок-паўза
значок-стоп
значок-наперад
icon-fast-forward
значок-крок-наперад
значок-выкід
значок-шаўрон-злева
icon-chevron-справа
значок-плюс
значок-мінус-знак
значок-выдаліць-знак
значок-ок-знак
значок-пытальнік-знак
значок-інфармацыя-знак
значок-скрыншот
значок-выдаліць-круг
значок-ок-круг
значок-бан-круг
значок-стрэлка-налева
icon-arrow-right
значок-стрэлка-уверх
значок-стрэлка-ўніз
icon-share-alt
icon-resize-full
icon-resize-small
значок-плюс
значок-мінус
значок-зорачка
значок-клічнік-знак
ікона-дар
абраз-ліст
абраз-вогнішча
абраз-вока-адкрыць
значок-вока-закрыць
значок-папярэджанне-знак
значок-плоскасць
абразок-каляндар
значок-выпадковы
значок-каментар
абразок-магніт
значок-шаўрон уверх
значок-шаўрон уніз
значок-рэтвіт
значок-кошык
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
значок-hdd
абразок-мегафон
абраз-звон
ікона-грамата
значок-палец уверх
icon-thumbs-down
значок-рука-права
значок-рука-лева
значок-рука ўверх
абразок-з рук
значок-круг-стрэлка-направа
значок-круг-стрэлка-налева
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-toolbar" > 
  <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-small" 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-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Тыпаграфіка

Загалоўкі

h1. Загаловак 1

h2. Загаловак 2

h3. Загаловак 3

h4. Загаловак 4

h5. Загаловак 5

h6. Загаловак 6

Асноўная копія

Вядучая асноўная копія

Пабудаваны з Less

Націск

<small>

Тлусты

Курсіў

Акцэнтныя заняткі

Скарачэнні

<abbr>

<abbr class="initialism">

Addresses

<address>

Blockquotes

Default blockquote

Blockquote options

Naming a source

Alternate displays

Lists

Unordered

Ordered

Unstyled

Description

Horizontal description

Code

Inline

Basic block

Tables

Default styles

Optional classes

.table-striped

.table-bordered

.table-hover

.table-condensed

Optional row classes

Supported table markup

Forms

Default styles

Optional layouts

Search form

Inline form

Horizontal form

Падтрымліваюцца элементы кіравання формамі

Уваходы

Тэкставае поле

Сцяжкі і радыё

Па змаўчанні (у стос)

Убудаваныя сцяжкі

Выбірае

Пашырэнне элементаў кіравання формай

Дададзеныя і дададзеныя ўваходы

Параметры па змаўчанні

Камбінаваныя

Кнопкі замест тэксту

Форма пошуку

Кантрольны памер

Адносная памернасць

Памер сеткі

Нерэдагуемыя ўваходы

Фарміруйце дзеянні

Тэкст даведкі

Убудаваная даведка

Заблакіраваць дапамогу

Станы кантролю формы

Фокус уводу

Адключаныя ўваходы

Станы праверкі

Гузікі

Кнопкі па змаўчанні

Кросбраўзерная сумяшчальнасць

Памеры гузікаў

Інвалідны стан

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`