Ищете Bootstrap 4?

CSS

Основные элементы HTML, их стили и примеры использования классов.

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

Заголовки

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 часов вечера.

<p class="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> используется для выделения речи, технической информации и т.п.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<abbr>

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

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

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

<abbr class="initialism">

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

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

<abbr title="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>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>ФИО</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Цитаты

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

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

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

В горах этой ночью прохладно.

В разведке намаявшись днем...

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

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

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

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

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

В кофейнике кофе клокочет,

Солдаты усталые спят.

Над ним арагонские лавры

Тяжелой листвой шелестят.

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

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

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

Я вас молю – утешьтесь, государь!

Спасенью радоваться надо больше,

Чем горевать о тягостных утратах.

Шекспир Уильям - Буря 
<blockquote class="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>

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

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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
<ul class="unstyled">
  <li>...</li>
</ul>

В одну строку

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

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="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.
<dl class="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 
<table class="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 
<table class="table table-striped">
  …
</table>

.table-bordered

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

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="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 
<table class="table table-hover">
  …
</table>

.table-condensed

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="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>
    <input type="text" placeholder="Введите текст…">
    <span class="help-block">Подсказка или доп. информация.</span>
    <label class="checkbox">
      <input type="checkbox"> Нажми здесь и выдели 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="Пароль">
  <label class="checkbox">
    <input type="checkbox"> Запомнить меня
  </label>
  <button type="submit" class="btn">Войти</button>
</form>

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

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

  • Добавьте класс .form-horizontal к форме
  • Поместите лейблы и элементы формы в div с классом .control-group
  • Добавьте класс .control-label к элементу label
  • Поместите все дополнительные элементы управления (кнопки, чекбоксы и т.п.) в div с классом .controls это необходимо для правильного расположения элементов
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Пароль</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Пароль">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Запомнить меня
      </label>
      <button type="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, не смотря на значение по умолчанию.

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

Textarea

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

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

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

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

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

В данное поле возможно ввести не более 10 символов, размер данного поля не изменяется.
Несмотря на возможность ограничения ввода данных, типов символов и т.п. на стороне браузера ВСЕГДА осуществляйте повторную проверку на серверной стороне вашего приложения! 
<textarea id="redex" maxlength="10" rows="4"></textarea>
<style type="text/css">
  #redex { resize: none; }
</style>

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

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

По умолчанию


<label class="checkbox">
  <input type="checkbox" value="">
  Выберите—для бла бла бла...
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  Выберите пункт 1—для бла бла бла...
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  Или выберите пункт 2—для бла бла бла...
</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>

Select селектор

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


<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple="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 с одним или двумя классами для добавления Пред- и Пост-идущих элементов.

@

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

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

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

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

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

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


<div class="input-append">
  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</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">

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

Используйте классы начиная от .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>
<select class="span2">
  ...
</select>
<select class="span3">
  ...
</select>

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

<div class="controls">
  <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>
<div class="controls controls-row">
  <input class="span3" type="text" placeholder=".span3">
  <input class="span2" type="text" placeholder=".span2">
  <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>

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

Input focus

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Primary link Link 

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

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

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

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

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

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

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

Ссылка 
<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</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 в CSS.

Иконки от Glyphicons

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-*. Для использования поместите код с примера ниже, куда Вам необходимо:

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

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

<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="divider"></li>
    <li><a href="#"><i class="i"></i> Сделать админом</a></li>
  </ul>
</div>
Кнопки, иконки и их размеры
Star Star Star 
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</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">Email address</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>