Загалоўкі

<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>у асноўным для голасу, тэхнічных тэрмінаў і г.д.

Класы выраўноўвання

Лёгка выраўноўвайце тэкст па кампанентах з дапамогай класаў выраўноўвання тэксту.

Тэкст выраўнаваны па левым краі.

Тэкст выраўнаваны па цэнтры.

Тэкст выраўнаваны па правым краі.

<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 = "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>

Скарачэнні

Стылізаваная рэалізацыя элемента HTML <abbr>для абрэвіятур і абрэвіятур для паказу разгорнутай версіі пры навядзенні курсора. Скарачэнні з titleатрыбутам маюць светлую пункцірную ніжнюю мяжу і даведкавы курсор пры навядзенні, забяспечваючы дадатковы кантэкст пры навядзенні.

`<abbr>`

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

Абрэвіятура слова attr - attr .

<abbr title = "attribute" > 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>
  Сан-Францыска, Каліфорнія 94107 <br>
  <abbr title = "Тэл." > Тэл .: </abbr> (123) 456-7890 
</адрас>
 
<адрас>
  <strong> Поўнае імя </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</адрас>

Цытаты

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

Цытата па змаўчанні

Абгарніце <blockquote>любы HTML у якасці цытаты. Для прамых двукоссяў мы рэкамендуем <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.

<цытата>
  <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.
Хтосьці вядомы ў назве крыніцы

<цытата>
  <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
Цэлы лік нападаў lorem і маса
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>

Замовілі

Спіс элементаў, у якіх парадак відавочна мае значэнне .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Цэлы лік нападаў lorem і маса
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>

Нестыляваны

Выдаліце стандартныя list-styleі левыя водступы для элементаў спісу (толькі для непасрэдных дзяцей).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Цэлы лік нападаў lorem і маса
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>

У радку

Размясціце ўсе элементы спіса ў адным радку з 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.
Порта Малесуада: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <дд> ... </дд>
</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.
Порта Малесуада: 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>
  <дд> ... </дд>
</dl>

Галаву ўверх!Гарызантальныя спісы апісанняў будуць абрэзаць тэрміны, якія занадта доўгія, каб змясціцца ў левым слупку text-overflow. У больш вузкіх акнах прагляду яны зменяцца на макет са стосам па змаўчанні.

У радку

Абгарніце ўбудаваныя фрагменты кода з дапамогай <code>.

Напрыклад, <section>трэба абгарнуць як убудаваны.

Напрыклад , <code > & lt ; раздзел & gt ;</ code > павінен быць абгорнуты як убудаваны .

Базавы блок

Выкарыстоўвайце <pre>для некалькіх радкоў кода. Не забудзьцеся зняць любыя вуглавыя дужкі ў кодзе для правільнай візуалізацыі.

<p>Узор тэксту тут...</p>

<папярэдні>
  <p>Узор тэксту тут...</p>
</pre>

Галаву ўверх!Пераканайцеся, што код знаходзіцца ў <pre>тэгах як мага бліжэй да левага боку; гэта будзе адлюстроўваць усе ўкладкі.

Пры жаданні вы можаце дадаць .pre-scrollableклас, які будзе ўсталёўваць максімальную вышыню ў 350 пікселяў і забяспечваць паласу пракруткі па восі Y.

Стылі па змаўчанні

Для асноўнага стылю — лёгкая падкладка і толькі гарызантальныя падзельнікі — дадайце базавы клас .tableу любы <table>.

#	Імя	Прозвішча	Імя карыстальніка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Лары	птушка	@twitter

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

Факультатыўныя заняткі

Дадайце любы з наступных класаў да .tableбазавага класа.

`.table-striped`

Дадае зебрападобныя паласы ў любы радок табліцы ў межах селектара CSS (недаступна ў IE7-8) <tbody>.:nth-child

#	Імя	Прозвішча	Імя карыстальніка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Лары	птушка	@twitter

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

`.table-bordered`

Дадайце да стала рамкі і закругленыя куты.

#	Імя	Прозвішча	Імя карыстальніка
1	Марк	Ота	@mdo
1	Марк	Ота	@getbootstrap
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class = "table 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 = "table table-condensed" > 
  …
</table>

Неабавязковыя класы радкоў

Выкарыстоўвайце кантэкстныя класы для афарбоўкі радкоў табліцы.

Клас	Апісанне
`.success`	Паказвае на паспяховае або станоўчае дзеянне.
`.error`	Паказвае на небяспечнае або патэнцыйна негатыўнае дзеянне.
`.warning`	Пазначае папярэджанне, якое можа запатрабаваць увагі.
`.info`	Выкарыстоўваецца як альтэрнатыва стандартным стылям.

#	Прадукт	Аплата прынята	Статус
1	Сухоты - Штомесяц	01.04.2012	Зацверджаны
2	Сухоты - Штомесяц	04.02.2012	Адхілена
3	Сухоты - Штомесяц	04.03.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>або вялікіх змен у разметцы. Вынікі ў складзеныя, выраўнаваныя па левым краі цэтлікі на верхняй частцы элементаў кіравання формы.

<форма>
  <набор палёў>
    <legend> Легенда </legend>
    <label> Назва этыкеткі </label>
    <input type = "text" placeholder = "Увядзіце што-небудзь..." >  
    <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-search" > 
  <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 = "Password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Запомніць мяне 
  </label>
  <button type = "submit" class = "btn" > Увайсці </button>  
</form>

Гарызантальная форма

Выраўнуйце меткі па правым краі і перамесціце іх улева, каб яны з'явіліся ў адным радку з элементамі кіравання. Патрабуецца больш за ўсё змяненняў разметкі ў форме па змаўчанні:

Дадаць .form-horizontalу форму
Абгарніце этыкеткі і элементы кіравання.control-group
Дадаць .control-labelда этыкеткі
Загарніце ўсе звязаныя элементы кіравання .controlsдля правільнага выраўноўвання

<form class = "form-horizontal" > 
  <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 = "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" type = "text" placeholder = "Імя карыстальніка" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "add-on" > 0,00 </span> 
</div>

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

Выкарыстоўвайце як класы, так і два асобнікі, .add-onкаб дадаць да ўводу і да яго.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  <span class = "add-on" > 0,00 </span> 
</div>

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

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

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "text" >   
  <button class = "btn" type = "button" > Наперад! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <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 = "text" >   
</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 = "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" > ... </div> 
    <тып уводу = " тэкст" > 
  </div>
  <div class = "input-append" > 
    <тып уводу = " тэкст" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Форма пошуку

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

Памер сеткі

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

<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 = "Гэта ў фокусе..." >

Няправільныя ўводы

Увод стылю праз функцыянальнасць браўзера па змаўчанні з дапамогай :invalid. Укажыце type, дадайце requiredатрыбут, калі поле не з'яўляецца абавязковым, і (калі дастасавальна) укажыце pattern.

Гэта недаступна ў версіях Internet Explorer 7-9 з-за адсутнасці падтрымкі псеўдаселектараў CSS.

<input class = "span3" type = "email" required >

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

Дадайце 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 = "інфармацыя пра групу кіравання" > 
  <label class = "control-label" for = "inputInfo" > Увод з інфармацыяй </label>  
  <div class = "элементы кіравання" > 
    <input type = "text" id = "inputInfo" >  
    <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-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-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">

Адрасы

<address>

Цытаты

Цытата па змаўчанні

Параметры блокавых цытат

Называнне крыніцы

Альтэрнатыўныя дысплеі

Спісы

Неўпарадкаваны

Замовілі

Нестыляваны

У радку

Апісанне

Гарызантальнае апісанне

Код

У радку

Базавы блок

Табліцы

Стылі па змаўчанні

Факультатыўныя заняткі

.table-striped

.table-bordered

.table-hover

.table-condensed

Неабавязковыя класы радкоў

Разметка табліцы, якая падтрымліваецца

Формы

Стылі па змаўчанні

Дадатковыя макеты

Форма пошуку

Убудаваная форма

Гарызантальная форма

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

Уваходы

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

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

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

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

Выбірае

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

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

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

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

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

Выпадаючыя кнопкі

Сегментаваныя выпадальныя групы

Форма пошуку

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

Уваходы на ўзроўні блока

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

Памер сеткі

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

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

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

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

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

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

Фокус уводу

Няправільныя ўводы

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

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`