Заголовки

HTML-заголовки, от <h1> through <h6>.

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

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

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

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

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

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

Пример основного текста

В Bootstrap по умолчанию font-size равняется 14px, а line-height составляет 20px. Эти правила применяются к элементу <body> и всему тексту. В дополнение, элемент <p> (Параграф) имеет отступ снизу в половину line-height т.е. равен 10px по умолчанию.

Было восемь часов утра - время, когда офицеры, чиновники и приезжие обыкновенно после жаркой, душной ночи купались в море и потом шли в павильон пить кофе или чай. Иван Андреич Лаевский, молодой человек лег двадцати восьми, худощавый блондин, в фуражке министерства финансов и в туфлях, придя купаться, застал на берегу много знакомых и между ними своего приятеля, военного доктора Самойленко.

С большой стриженой головой, без шеи, красный, носастый, с мохнатыми черными бровями и с седыми бакенами, толстый, обрюзглый, да еще вдобавок с хриплым армейским басом, этот Самойленко на всякого вновь приезжавшего производил неприятное впечатление бурбона и хрипуна, но проходило два-три дня после первого знакомств, и лицо его начинало казаться необыкновенна добрым, милым и даже красивым. Несмотря на свою неуклюжесть и грубоватый тон. эго был человек смирный, безгранично добрый, благодушный и обязательный.

Это письмо должен Вам доставить мой ключник Трофим ровно в 8 часов вечера. Если же привезет его пожже, то побейте его по щекам, по профессорски, нечего с этим племенем церемонится. Если доставит пожже то значит в кабак анафема заходил. Обычай ездить к соседям не нами выдуман не нами и окончится, а потому непременно приежжайте с машинками и книгами. Я бы сам к Вам поехал, да конфузлив очень и смелости не хватает..

<p>...</p>

Класс Lead

Выделите параграф добавив класс .lead.

Это письмо должен Вам доставить мой ключник Трофим ровно в 8 часов вечера.

<pclass="lead">...</p>

Создано при помощи Less

Оформление основано на двух LESS-переменных в файле variables.less: @baseFontSize и @baseLineHeight. Первая задает font-size, вторая устанавливает line-height. Используя простые математические уравнения мы задаем внешние и внутренние отступы элементов, высоту строки и многое другое. Редактируйте их для оптимизации и создания своего персонального Bootstrap'а.

Выделение шрифта

Используйте стандартные HTML-теги для выделения шрифта.

`<small>`

Для уменьшения значения текста на странице используйте тег small.

Было восемь часов утра - время, когда офицеры, чиновники и приезжие обыкновенно после жаркой, душной ночи купались в море и потом шли в павильон пить кофе или чай.

<p><small>Было восемь часов утра - время, когда офицеры, чиновники и приезжие обыкновенно после жаркой, душной ночи купались в море и потом шли в павильон пить кофе или чай.</small></p>

Выделение полужирным

Используется для выделения важного текста.

Следующие слова в предложении очень важные и требуют особого внимания со стороны читателя.

<strong>Это полужирный и очень важный текст</strong>

Выделение Курсивом

Используйте для выделения цитат и речи в тексте.

<em>Это чья-то речь</em>

Минуту внимания! Используйте тег <b> и <i> в HTML5. Используйте <b> для простого выделения текста, акцентируя на нем внимание, когда как тег <i> используется для выделения речи, технической информации и т.п.

Классы выравнивания

Легко выровнять текст с компонентами с помощью классов выравнивания текста.

Выровненный текст слева.

Выровненный по центру текст.

Выровненный справа текст.

<pclass="text-left">Выровненный текст слева.</p>
<pclass="text-center">Выровненный по центру текст.</p>
<pclass="text-right">Выровненный справа текст.</p>

Классы для выделения текста

Передайте дополнительное значение текста используя цветовое решение.

Науки юношей питают

Отраду старым подают

В счастливой жизни украшают

В несчастный случай берегут

В домашних трудностях утеха

<pclass="muted">Науки юношей питают</p>
<pclass="text-warning">Отраду старым подают</p>
<pclass="text-error">В счастливой жизни украшают</p>
<pclass="text-info">В несчастный случай берегут</p>
<pclass="text-success">В домашних трудностях утеха</p>

Аббревиатура

Стилизованное представление стандартного HTML-тега <abbr>. Поместите слово внутрь элемента <abbr> для создания аббревиатуры или акронима - при наведении на который пользователь увидит расшифровку. Аббревиатуры с атрибутом title имеют точечное подчеркивание и курсор справки при наведении.

`<abbr>`

Используйте для аббревиатур и сокращений; объяснение сокращения отображается при наведении курсора, Вложите дополнительный атрибут title.

Аббревиатура "Комплексное Автомобильное Страхование Кроме Ответственности" - КАСКО.

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

`<abbr class="initialism">`

Добавьте класс .initialism для выделения аббревиатуры ЗАГЛАВНЫМИ БУКВАМИ.

HTML лучшая вещь придуманная человеком после изобретения колеса.

<abbrtitle="HyperText Markup Language"class="initialism">HTML</abbr> лучшая вещь придуманная человеком после изобретения колеса.

Адрес

Ниже два примера как тег <address> может быть использован: При форматировании используйте тег <br> для переноса строки. Present contact information for the nearest ancestor or the entire body of work.

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

ФИО
first.last@example.com

<address>
<strong>Twitter, Inc.</strong><br>
 795 Folsom Ave, Suite 600<br>
 San Francisco, CA 94107<br>
<abbrtitle="Phone">P:</abbr> (123) 456-7890
</address>
 
<address>
<strong>ФИО</strong><br>
<ahref="mailto:#">first.last@example.com</a>
</address>

Цитаты

Для цитирования текста в вашем тексте от лица другого автора или ресурса, с возможностью ссылки на оригинал.

Цитаты по умолчанию

Для использования цитат, поместите любой HTML-текст внутрь тега <blockquote>. Для однострочных цитат мы рекомендуем использовать тег <p>.

В горах этой ночью прохладно.
В разведке намаявшись днем...

<blockquote>
<p>В горах этой ночью прохладно. В разведке намаявшись днем...</p>
</blockquote>

Дополнения в цитатах

Дополнительные стили и элементы для использования с цитатами.

Указание оригинального источника

Добавьте тег <small> для идентификации источника. Оберните имя исходной работы в <cite>.

В кофейнике кофе клокочет,
Солдаты усталые спят.
Над ним арагонские лавры
Тяжелой листвой шелестят.
Константин Симонов Всемирная библиотека поэзии. 1998

<blockquote>
<p>В кофейнике кофе клокочет,
Солдаты усталые спят.
Над ним арагонские лавры
Тяжелой листвой шелестят.</p>
<small>Константин Симонов <citetitle="Всемирная библиотека поэзии">Всемирная библиотека поэзии</cite></small>
</blockquote>

Альтернативное расположение

ля выравнивания текста по правую сторону, добавьте класс .pull-right к тегу blockquote.

Я вас молю – утешьтесь, государь!
Спасенью радоваться надо больше,
Чем горевать о тягостных утратах.
Шекспир Уильям - Буря

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

Списки

Неупорядоченный

Список в котором расположение элементов не имеет особого значения.

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>

Упорядоченный

Список в котором нумерация элементов имеет особое значение.

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>

Не стилизованный

Список элементов без нумерации и стиля, где list-style.

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

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

В одну строку

Поместите все элементы списка в одну строку inline-block с встроенным блоком и небольшим дополнением.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ulclass="inline">
<li>...</li>
</ul>

Списки описания

Список элементов с дополнительным описанием.

Списки описаний: Списки описаний идеально подходят для определения терминов.
Термины: Описание терминов.; 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> будут располагаться горизонтально относительно друг друга.

Списки описаний: Списки описаний идеально подходят для определения терминов.
Термины: Описание терминов.; 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.

<dlclass="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>

Внимание! В горизонтальных списках описания "Термин" будет обрезан при помощи свойства text-overflow. На малых дисплеях (телефон, планшет и т.д.) размер списка будет изменяться в соответствии с сеткой шаблона.

Строчное выделение кода

Поместите строковый код в тег <code>.

Например: <section> выделен в строке.

Например:<code><section></code>выделенвстроке.

Блочное выделение кода

Используйте <pre> для выделения 2-х и более строк кода. Избегайте использования угловых скобок < и >, для корректного отображения фрагментов кода.

<p>Выделенный текст...</p>

<pre>
 &lt;p&gt;Выделенный текст...&lt;/p&gt;
</pre>

Замечание! Всегда используйте теги <pre> как можно левее в редакторе кода, так как внутри тега <pre> сохраняются все отступы и пробелы.

Вы можете дополнительно добавить класс .pre-scrollable, который задаст максимальную высоту (max-width) блока в 350px и добавит вертикальный скроллбар.

Таблица по умолчанию

Для добавления стандартного и минимального форматирования таблицы—просто добавьте класс .table к любому элементу <table>. Стандартное форматирование содержит минимальные отступы и только горизонтальные линии разделяющие строки.

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

<tableclass="table">
 …
</table>

Дополнительные классы

Совместите следующие классы со стандартным классом .table - для получения требуемого результата при форматировании таблицы.

`.table-striped`

Дополняет каждую первую строку в таблице серым фоном (Зебра), при этом строки должны быть помещены в суб-элемент <tbody>, данный метод работает через CSS-селектор :nth-child, имейте в виду что селекторы не поддерживаются и не работают в IE7-IE8.

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

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

`.table-bordered`

Добавляет границы и закругленные углы к таблице.

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

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

`.table-hover`

Добавляет подсветку строки при наведении, при условии что строки помещены в суб-элемент <tbody>.

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

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

`.table-condensed`

Делает таблицу более компактной, путем урезания отступов в ячейках в два раза.

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

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

Опции выделения строк в таблице

Классы для выделения строк в таблице цветом. Используйте эти классы для большей интерактивности Вашего приложения и/или ответа на действия пользователя.

Класс	Описание
`.success`	Зеленый - отображение успешного или положительного действия.
`.error`	Красный - отображение ошибки, опасного или потенциально негативного действия.
`.warning`	Желтый - отображение предупреждения или информации на которой пользователь должен сделать особый акцент.
`.info`	Голубой - альтернатива ко всем предыдущим классам. Используйте для вывода дополнительной информации.

#	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>
...

Структура и разметка таблицы

Список и описание стандартной HTML-разметки таблиц.

Тэг	Описание
`<table>`	Родительский тег таблиц
`<thead>`	Родительский тег строк заголовка таблицы (`<tr>`)
`<tbody>`	Родительский тег тела и строк таблицы (`<tr>`)
`<tr>`	Родительский тег (строка) для ячеек (колонок) таблицы (`<td>` или `<th>`)
`<td>`	Ячейка таблицы
`<th>`	Ячейка заголовка таблицы Должен использоваться внутри тега `<thead>`
`<caption>`	Описание или краткое содержание таблицы

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

Стандартные формы

Стандартное форматирование форм включено в Bootstrap и работает без дополнительных классов для <form> и без какого-либо изменения в стандартной HTML-разметке форм. По умолчанию: выровненные по левому краю, подписи элементов сверху от полей и компактные по размеру.

Пример редактора: Узнайте подробнее об используемом элементе label, о его свойствах и возможностях - label.

<form>
<fieldset>
<legend>Название формы</legend>
<label>Описание поля</label>
<inputtype="text"placeholder="Введите текст…">
<spanclass="help-block">Подсказка или доп. информация.</span>
<labelclass="checkbox">
<inputtype="checkbox"> Нажми здесь и выдели checkbox
</label>
<buttontype="submit"class="btn">Отправить</button>
</fieldset>
</form>

Дополнительные классы форматирования

Bootstrap включает в себя четыре наиболее часто используемых стиля форм.

Форма поиска

Добавьте класс .form-search к форме, и класс .search-query к полю <input> для добавления поля с сильно закругленными углами.

<formclass="form-search">
<inputtype="text"class="input-medium search-query">
<buttontype="submit"class="btn">Найти</button>
</form>

Линейная форма

Добавьте класс .form-inline для улучшения вида формы в горизонтальном положении и оптимизации отступов между элементами формы.

<formclass="form-inline">
<inputtype="text"class="input-small"placeholder="Email">
<inputtype="password"class="input-small"placeholder="Пароль">
<labelclass="checkbox">
<inputtype="checkbox"> Запомнить меня
</label>
<buttontype="submit"class="btn">Войти</button>
</form>

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

Выровненные по правому краю и расположенные слева подписи полей. Требует небольшое изменение в стандартной разметке формы:

Добавьте класс .form-horizontal к форме
Поместите лейблы и элементы формы в div с классом .control-group
Добавьте класс .control-label к элементу label
Поместите все дополнительные элементы управления (кнопки, чекбоксы и т.п.) в div с классом .controls это необходимо для правильного расположения элементов

<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label"for="inputEmail">Email</label>
<divclass="controls">
<inputtype="text"id="inputEmail"placeholder="Email">
</div>
</div>
<divclass="control-group">
<labelclass="control-label"for="inputPassword">Пароль</label>
<divclass="controls">
<inputtype="password"id="inputPassword"placeholder="Пароль">
</div>
</div>
<divclass="control-group">
<divclass="controls">
<labelclass="checkbox">
<inputtype="checkbox"> Запомнить меня
</label>
<buttontype="submit"class="btn">Войти</button>
</div>
</div>
</form>

Поддерживаемые элементы форм

Примеры использования стандартных элементов форм.

Input Текстовое поле

Самый часто используемый элемент форм. Поддерживаемые типы в спецификации HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Подробнее о типах, поддержки в браузерах и возможностях - здесь.

Обязательно всегда указывайте type, не смотря на значение по умолчанию.

<inputtype="text"placeholder="Введите текст">

Textarea

Поле поддерживаемое ввод текста в несколько строк. Изменяйте значение атрибута rows для задания минимального количества отображаемых строк.

<textarearows="3"></textarea>

Пример редактора

Отключение изменения размера поля textarea через CSS:
Для отключения возможности изменять размер поля textarea в CSS-код описывающий свойства элемента необходимо прописать resize: none; (работает не во всех браузерах).

Ограничение максимального количества вводимых символов:
Для ограничения максимального количества вводимых символов в поле textarea используйте атрибут maxlength="число"

<textareaid="redex"maxlength="10"rows="4"></textarea>
<styletype="text/css">
#redex { resize: none; }
</style>

Checkbox и radio флажки и радио-кнопки

Чек-боксы используются для множественного выбора в форме, когда как кадио-кнопки для выбора одного пункта из множества представленных.

По умолчанию

<labelclass="checkbox">
<inputtype="checkbox"value="">
 Выберите—для бла бла бла...
</label>
 
<labelclass="radio">
<inputtype="radio"name="optionsRadios"id="optionsRadios1"value="option1"checked>
 Выберите пункт 1—для бла бла бла...
</label>
<labelclass="radio">
<inputtype="radio"name="optionsRadios"id="optionsRadios2"value="option2">
 Или выберите пункт 2—для бла бла бла...
</label>

Линейные чек-боксы

Добавьте класс .inline к чек-боксам которые необходимо расположить в одну строку.

<labelclass="checkbox inline">
<inputtype="checkbox"id="inlineCheckbox1"value="option1"> 1
</label>
<labelclass="checkbox inline">
<inputtype="checkbox"id="inlineCheckbox2"value="option2"> 2
</label>
<labelclass="checkbox inline">
<inputtype="checkbox"id="inlineCheckbox3"value="option3"> 3
</label>

Select селектор

Используйте элемент по умолчанию или добавьте атрибут multiple="multiple" для множественного выбора из списка.

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
 
<selectmultiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

Дополнения к формам

Используйте дополнительные элементы в формах для наилучшего user experience.

Пред-идущие и Пост-идущие элементы

Добавление информации при помощи Пред-идущих или Пост-идущих элементов позволяет пользователям более легко и приятно ориентироваться на Вашем сайте. Например, добавление по умолчанию символа @ для Twitter-аккаунтов или знака $ для денежных исчислений. Имейте ввиду что элемент select не поддерживает данную опцию.

По умолчанию

Поместите span элемент с классом .add-on и элемент input с одним или двумя классами для добавления Пред- и Пост-идущих элементов.

<divclass="input-prepend">
<spanclass="add-on">@</span><inputclass="span2"id="prependedInput"size="16"type="text"placeholder="Username">
</div>
<divclass="input-append">
<inputclass="span2"id="appendedInput"size="16"type="number"><spanclass="add-on">.00</span>
</div>

Комбинированные

Используйте сразу два элемента с классом .add-on.

<divclass="input-prepend input-append">
<spanclass="add-on">$</span><inputclass="span2"id="appendedPrependedInput"size="16"type="number"><spanclass="add-on">.00</span>
</div>

Кнопки вместо текста

Вместо <span>, используйте button с классом .btn для добавления Пред- и Пост-идущих кнопок.

<divclass="input-append">
<inputclass="span2"id="appendedInputButton"size="16"type="text"><buttonclass="btn"type="button">Go!</button>
</div>
 
<divclass="input-append">
<inputclass="span2"id="appendedInputButtons"size="16"type="text"><buttonclass="btn"type="button">Найти</button><buttonclass="btn"type="button">Опции</button>
</div>

Форма поиска

<formclass="form-search">
<divclass="input-append">
<inputtype="text"class="span2 search-query">
<buttontype="submit"class="btn">Найти</button>
</div>
<divclass="input-prepend">
<buttontype="submit"class="btn">Найти</button>
<inputtype="text"class="span2 search-query">
</div>
</form>

Управление размерами полей

Используйте стандартные классы .input-large для контроля размеров, или .span* классы для соответствия размерам вашей сетки шаблона.

Стандартные классы

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

Классы в соответствии с сеткой шаблона

Используйте классы начиная от .span1 до .span12 для создания полей ввода размером соответствующим размеру сетки шаблона.

<inputclass="span1"type="text"placeholder=".span1">
<inputclass="span2"type="text"placeholder=".span2">
<inputclass="span3"type="text"placeholder=".span3">
<selectclass="span1">
 ...
</select>
<selectclass="span2">
 ...
</select>
<selectclass="span3">
 ...
</select>

Для расположения полей ввода на одной строке, при этом используя размеры в соответствии с размерами сетки шаблона, используйте класс.controls-rowдля правильного расположения элементов.

<divclass="controls">
<inputclass="span5"type="text"placeholder=".span5">
</div>
<divclass="controls controls-row">
<inputclass="span4"type="text"placeholder=".span4">
<inputclass="span1"type="text"placeholder=".span1">
</div>
<divclass="controls controls-row">
<inputclass="span3"type="text"placeholder=".span3">
<inputclass="span2"type="text"placeholder=".span2">
<inputclass="span1"type="text"placeholder=".span1">
</div>
...

Отключенное (неактивное) поле

Отключение элемента формы без изменения кода элемента и добавления дополнительных атрибутов.

<spanclass="input-xlarge uneditable-input">Текст</span>

Элементы управления формами

Закончить форму логичнее всего группой элементов контроля (кнопками). Используя .form-horizontal, кнопки и другие элементы будут автоматически помещены сразу после других элементов формы.

<divclass="form-actions">
<buttontype="submit"class="btn btn-primary">Сохранить</button>
<buttontype="button"class="btn">Отменить</button>
</div>

Вспомогательный текст

Строчный вспомогательный текст

<inputtype="text"><spanclass="help-inline">Здесь строчный вспомогательный текст</span>

Блочный вспомогательный текст

<inputtype="text"><spanclass="help-block">Здесь блочный вспомогательный текст.</span>

Контроль состояний элементов формы

Input focus

Bootstrap предоставляет стили для активных элементов форм и disabled (отключенные элементы). Мы отключили стандартные стили форм в Webkit, такие как outline, взамен добавив box-shadow для селектора :focus.

<inputclass="input-xlarge focused"id="focusedInput"type="text"value="Поле в фокусе...">

Поля с неверно введенными данными

Стили поля через стандартный браузерный селектор :invalid. Укажите тип type поля через и добавьте атрибут required. Если ввести данные неверно, поле будет красным и форма не будет отправлена, если ввести email в поле ниже - поле будет выделено синим цветом и форма будет отправлена. Действия полей, работа формы и реакция браузера зависит от бренда и версии браузера.

<inputclass="span3"type="email"required>

Отключенное (неактивное) поле

Добавьте атрибут disabled к полю input.

<inputclass="input-xlarge"id="disabledInput"type="text"placeholder="Отключенное поле..."disabled>
<inputtype="checkbox"id="optionsCheckbox2"value="option1"disabled>Это неактивный (отключенный) флажок

Состояния элементов формы валидация

Добавлены состояния для errors (ошибок), warnings (предупреждений) и success (успешных). Например, для отображения ошибки в заполнении поля добавьте класс .error к родительскому элементу носящему класс .control-group.

<divclass="control-group warning">
<labelclass="control-label"for="inputWarning">Поле с предупреждением</label>
<divclass="controls">
<inputtype="text"id="inputWarning">
<spanclass="help-inline">Что-то здесь не так</span>
</div>
</div>
<divclass="control-group error">
<labelclass="control-label"for="inputError">Поле с ошибкой</label>
<divclass="controls">
<inputtype="text"id="inputError">
<spanclass="help-inline">Пожалуйста исправьте ошибку в этом поле</span>
</div>
</div>
<divclass="control-group success">
<labelclass="control-label"for="inputSuccess">Успешное поле</label>
<divclass="controls">
<inputtype="text"id="inputSuccess">
<spanclass="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`	Позволяет обратить кнопку в ссылку по стилю, при этом сохраняя весь функционал элемента `button`

Совместимость с браузерами

IE9 не подгоняет градиенты к элементам и закругленным углам, так что мы убрали их. Еще IE9 делает недоступным применение стилей к элементам button, текст становится серым и добавляется ужасная тень, которую невозможно исправить.

Различные размеры

Нужны большие и маленькие кнопки? Добавьте классы .btn-large, .btn-small, или .btn-mini для дополнительных размеров.

<p>
<buttonclass="btn btn-large btn-primary"type="button">Large button</button>
<buttonclass="btn btn-large"type="button">Large button</button>
</p>
<p>
<buttonclass="btn btn-primary"type="button">Default button</button>
<buttonclass="btn"type="button">Default button</button>
</p>
<p>
<buttonclass="btn btn-small btn-primary"type="button">Small button</button>
<buttonclass="btn btn-small"type="button">Small button</button>
</p>
<p>
<buttonclass="btn btn-mini btn-primary"type="button">Mini button</button>
<buttonclass="btn btn-mini"type="button">Mini button</button>
</p>

Нужна кнопка размер которой совпадает с шириной родительского элемента? — Добавьте класс .btn-block к нопке или любому элементу с классом .btn.

<buttonclass="btn btn-large btn-block btn-primary"type="button">Block level button</button>
<buttonclass="btn btn-large btn-block"type="button">Block level button</button>

Отключенное состояние

Дополнительные стили кнопок, позволяют понять что они не кликабельные или отключены.

Элемент Anchor Ссылка

Для отключения ссылок со стилем кнопок добавьте класс .disabled.

Primary link Link

<ahref="#"class="btn btn-large btn-primary disabled">Primary link</a>
<ahref="#"class="btn btn-large disabled">Link</a>

Внимание! Используйте .disabled как дополнительный класс, так же как и класс .active, без префиксов. И имейте ввиду что для элемента >a< - это только применения стиля, Вы должны использовать JavaScript для полноценного отключения ссылок.

Элемент Button Кнопка

Добавьте атрибут disabled к элементу <button> для отключения кнопки.

<buttontype="button"class="btn btn-large btn-primary disabled"disabled="disabled">Primary button</button>
<buttontype="button"class="btn btn-large"disabled>Button</button>

Один класс, несколько тегов

Используйте класс .btn для элементов <a>, <button>, или <input>.

<aclass="btn"href="">Link</a>
<buttonclass="btn"type="submit">Button</button>
<inputclass="btn"type="button"value="Input">
<inputclass="btn"type="submit"value="Submit">

Для наилучшей совместимости с браузерами, используйте элементы корректно обрабатываемые во всех браузерах. Например input, используйте как кнопку <input type="submit">.

Добавляйте классы к элементу <img> для задания различных стилей картинкам.

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

Внимание! Классы .img-rounded и .img-circle не работают в IE7-8 из-за отсутвия поддержки border-radius в CSS.

Icon glyphs

140 иконок в едином спрайте, доступны в темном (по умолчанию) и белом исполнении, предоставлены Glyphicons.

icon-glass
icon-music
icon-search
icon-envelope
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-thumbs-up
icon-thumbs-down
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-right
icon-circle-arrow-left
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen

Glyphicons attribution

Glyphicons позволили нам использовать набор иконок Halflings, который является частью open-source проекта. По соглашению мы приводим ссылку на оригинал их проекта и на автора работы.

Как использовать?

Bootstrap использует тег <i> для всех иконок, они не имеют единого класса—только единый префикс класса icon-*. Для использования поместите код с примера ниже, куда Вам необходимо:

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

Так же иконки доступны в белом виде (inverted), и доступны при дополнительном классе:

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

Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега <i> для корректного расположения элемента.

Примеры

Иконки это хорошо, но когда их стоит использовать? Вот вам идеи:

Кнопки

Группа кнопок в меню

<divclass="btn-toolbar">
<divclass="btn-group">
<aclass="btn"href="#"><iclass="icon-align-left"></i></a>
<aclass="btn"href="#"><iclass="icon-align-center"></i></a>
<aclass="btn"href="#"><iclass="icon-align-right"></i></a>
<aclass="btn"href="#"><iclass="icon-align-justify"></i></a>
</div>
</div>

Выпадающий список в группе кнопок

Пользователь

<divclass="btn-group">
<aclass="btn btn-primary"href="#"><iclass="icon-user icon-white"></i> Пользователь</a>
<aclass="btn btn-primary dropdown-toggle"data-toggle="dropdown"href="#"><spanclass="caret"></span></a>
<ulclass="dropdown-menu">
<li><ahref="#"><iclass="icon-pencil"></i> Редактировать</a></li>
<li><ahref="#"><iclass="icon-trash"></i> Удалить</a></li>
<li><ahref="#"><iclass="icon-ban-circle"></i> Забанить</a></li>
<liclass="divider"></li>
<li><ahref="#"><iclass="i"></i> Сделать админом</a></li>
</ul>
</div>

Кнопки, иконки и их размеры

Star Star Star

<aclass="btn btn-large"href="#"><iclass="icon-star"></i> Star</a>
<aclass="btn btn-small"href="#"><iclass="icon-star"></i> Star</a>
<aclass="btn btn-mini"href="#"><iclass="icon-star"></i> Star</a>

<ulclass="nav nav-list">
<liclass="active"><ahref="#"><iclass="icon-home icon-white"></i> Домой</a></li>
<li><ahref="#"><iclass="icon-book"></i> Библиотека</a></li>
<li><ahref="#"><iclass="icon-pencil"></i> Приложения</a></li>
<li><ahref="#"><iclass="i"></i> Дополнительно</a></li>
</ul>

Поле формы

<divclass="control-group">
<labelclass="control-label"for="inputIcon">Email address</label>
<divclass="controls">
<divclass="input-prepend">
<spanclass="add-on"><iclass="icon-envelope"></i></span>
<inputclass="span2"id="inputIcon"type="text">
</div>
</div>
</div>

Оформление и шрифты

Заголовки

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

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

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

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

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

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

Пример основного текста

Класс Lead

Создано при помощи Less

Выделение шрифта

<small>

Выделение полужирным

Выделение Курсивом

Классы выравнивания

Классы для выделения текста

Аббревиатура

<abbr>

<abbr class="initialism">

Адрес

Цитаты

Цитаты по умолчанию

Дополнения в цитатах

Указание оригинального источника

Альтернативное расположение

Списки

Неупорядоченный

Упорядоченный

Не стилизованный

В одну строку

Списки описания

Горизонтальные списки описания

Код

Строчное выделение кода

Блочное выделение кода

Таблицы

Таблица по умолчанию

Дополнительные классы

.table-striped

.table-bordered

.table-hover

.table-condensed

Опции выделения строк в таблице

Структура и разметка таблицы

Формы

Стандартные формы

Дополнительные классы форматирования

Форма поиска

Линейная форма

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

Поддерживаемые элементы форм

Input Текстовое поле

Textarea

Пример редактора

Checkbox и radio флажки и радио-кнопки

По умолчанию

Линейные чек-боксы

Select селектор

Дополнения к формам

Пред-идущие и Пост-идущие элементы

По умолчанию

Комбинированные

Кнопки вместо текста

Форма поиска

Управление размерами полей

Стандартные классы

Классы в соответствии с сеткой шаблона

Отключенное (неактивное) поле

Элементы управления формами

Вспомогательный текст

Строчный вспомогательный текст

Блочный вспомогательный текст

Контроль состояний элементов формы

Input focus

Поля с неверно введенными данными

Отключенное (неактивное) поле

Состояния элементов формы валидация

Кнопки

Стандартные кнопки

`<small>`

`<abbr>`

`<abbr class="initialism">`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`