CSS

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

Заголовки & основной текст

HTML-заголовки, от <h1> до <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="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="..."> для объяснительного текста

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

<abbr title="Комплексное Автомобильное Страхование Кроме Ответственности">КАСКО</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

ФИО
E: first.last@gmail.com
P: (123) 456-7890

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@gmail.com</a>
</address>

Цитаты

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

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

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

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

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

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

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

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

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

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

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

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

Для выравнивания текста по правую сторону, добавьте класс class="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>

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

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

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: none.

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>

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

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

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

Форматирование кода при помощи PHP Пример редактора

При помощи функции htmlspecialchars() вы можете получить автоматическое преобразование угловых "< >" скобок в спецсимволы. И всех других символов HTML разметки.

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

<?php  
echo htmlspecialchars("<p>Выделенный текст...</p>");
?>

<!--На выходе получаем:-->
&lt;p&gt;Выделенный текст...&lt;/p&gt;

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

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

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

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

Скачать скрипт google-code-prettify. Документация и дополнительная информация здесь.

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

Для добавления стандартного и минимального форматирования таблицы—просто добавьте класс .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
1	Mark	Otto	@TwBootstrap
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="число"

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

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

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

Подробнее о Font Awesome на Русском здесь.

Оригинал на Английском здесь.

Один шрифт, 249 иконок

Все в одном файле, Font Awesome - это язык иконок для Ваших web-проектов.

Управление через CSS

Изменяйте цвет, размер, тень, и все что возможно изменить через CSS.

Бесконечная масштабируемость

Масштабируемая векторная графика позволяет делать иконки любого размера без потери в качестве.

На халяву!

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

Работает в IE7

Font Awesome работает в IE7. Мои соболезнования если это важно для Вас.

Отлично подходит для Retina дисплеев

Иконки в Font Awesome - векторные, что само собой означает превосходное отображение на дисплеях высокого разрешения.

Сделан для Twitter Bootstrap

Создан совместно и для использования с Twitter Bootstrap.

Дизайнеры оценят

Установите FontAwesome.otf и посетите страницу копи-паст. Удачи с дизайном.

Поддерживается читалками

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

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> для корректного расположения элемента.

Примеры

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

Визуальное обозначение пунктов меню (сайдбар)
Для навигации иконками
Для кнопок, визуально отображая их непосредственное действие
Для ссылок, визуально показывая куда попадет пользователь

Вообще везде, где уместен тег <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>

Поля форм

<div class="control-group">
  <label class="control-label" for="inputIcon">Email</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>

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

Заголовки & основной текст

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

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

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

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

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

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

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

Класс Lead

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

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

<small>

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

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

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

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

<abbr>

<abbr class="initialism">

Адрес

Цитаты

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

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

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

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

Списки

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

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

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

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

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

Код

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

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

Форматирование кода при помощи PHP Пример редактора

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

Таблицы

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

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

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