Bootstrap

Базовый CSS

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

Типографика

Заголовки

Все HTML-заголовки, <h1> через <h6> доступны.

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

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

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

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

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

Тело копии

Базовый глобальный размер шрифта font-size в Bootstrap составляет 14px, с line-height 20px. Это применяется к <body> и всем параграфам. Кроме того, <p> (параграфы) получают нижний отступ на половину их высоты (10px по умолчанию).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Lead body copy

Сделайте параграф выделяющимся, добавив .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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

Built with Less

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

Эмперизм

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

<small>

Для де-эмперизма встроенных или блочных текстов, используйте тег small.

This line of text is meant to be treated as fine print.

<p>
  <small>This line of text is meant to be treated as fine print.</small>
</p>

Bold

Для выделения фрагмента текста более жирным шрифтом.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

Для выделения фрагмента текста курсивом.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Alignment classes

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

Left aligned text.

Center aligned text.

Right aligned text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Emphasis classes

Передайте значение через цвет с помощью нескольких классов полезных классов.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

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

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

<abbr>

Для расширенного текста при долгом наведении на аббревиатуру, включите атрибут title.

An abbreviation of the word attribute is attr.

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

<abbr class="initialism">

Добавьте .initialism к аббревиатуре для немного меньшего размера шрифта.

HTML is the best thing since sliced bread.

<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
Full Name
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>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Цитаты

Для цитирования блоков контента из другого источника в вашем документе.

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

Оберните <blockquote> вокруг любого HTML как цитату. Для прямых цитат мы рекомендуем <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Опции цитаты

Стиль и изменение контента для простых вариаций стандартной цитаты.

Именование источника

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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

Альтернативные отображения

Используйте .pull-right для плавающей, правой выровненной цитаты.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title 
<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>

Описание

Список терминов с их ассоциированными описаниями.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

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

Сделайте термины и описания в <dl> рядом друг с другом.

Список описаний
Список описаний идеально подходит для определения терминов.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Внимание! Горизонтальные списки описаний будут обрезать термины, которые слишком длинны для размещения в левом столбце, используя text-overflow. В более узких представлениях они будут изменяться на стандартный вертикальный макет.

Код

Инлайновый

Оберните встроенные фрагменты кода с помощью <code>.

Например, <section> должен быть обернут как инлайновый. 
Например, <code>&lt;section&gt;</code> должен быть обернут как инлайновый.

Базовый блок

Используйте <pre> для нескольких строк кода. Убедитесь, что все угловые скобки в коде экранированы для правильного рендеринга.

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

Heads up! Убедитесь, что код остается как можно ближе к левому краю в <pre> тегах; он будет рендерить все табы.

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

Таблицы

Стили по умолчанию

Для базового стилизарования—небольшой отступ и только горизонтальные разделители—добавьте базовый класс .table к любому <table>.

# Имя Фамилия Имя пользователя
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-8).

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
  …
</table>

.table-bordered

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

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
  …
</table>

.table-hover

Включает состояние наведения для строк таблицы в <tbody>.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
  …
</table>

.table-condensed

Делает таблицы более компактными, уменьшая отступы между ячейками.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-condensed">
  …
</table>

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

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

Класс Описание
.success Указывает на успешный или положительный результат.
.error Указывает на опасный или потенциально отрицательный результат.
.warning Указывает на предупреждение, требующее внимания.
.info Используется как альтернатива стандартным стилям.
# Продукт Оплата Статус
1 TB - Ежемесячно 01/04/2012 Одобрено
2 TB - Ежемесячно 02/04/2012 Отклонено
3 TB - Ежемесячно 03/04/2012 Ожидается
4 TB - Ежемесячно 04/04/2012 Позвонить для подтверждения 
...
  <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> Специальная ячейка таблицы для столбца (или строки, в зависимости от области действия и размещения) меток
<caption> Описание или сводка того, что таблица содержит, особенно полезно для экранирующих устройств 
<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Формы

Стили по умолчанию

Индивидуальные элементы формы получают стилизацию, но без базового класса на <form> или значительных изменений в разметке. Результаты вложены, метки слева от элементов формы.

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

Инлайновая форма

Добавьте .form-inline для выравнивания меток и блочных элементов управления для компактного макета.

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

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

Выровняйте метки и плавающие их влево, чтобы они появлялись на одной линии с элементами управления. Требует наибольших изменений в разметке от стандартной формы:

  • Добавьте .form-horizontal к форме
  • Оберните метки и элементы управления в .control-group
  • Добавьте .control-label к метке
  • Оберните любые связанные элементы управления в .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">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

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

Примеры стандартных элементов управления, поддерживаемых в примере макета формы.

Вводы

Самый распространенный элемент формы, текстовые поля на основе текста. Включает поддержку всех HTML5 типов: текст, пароль, дата, дата-время, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, телефон и цвет.

Требуется использование указанного type в любое время.

<input type="text" placeholder="Text input">

Текстовая область

Форма управления, поддерживающая несколько строк текста. Измените атрибут rows по необходимости.

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

Чекбоксы и радиокнопки

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

По умолчанию (вложенные)


<label class="checkbox">
  <input type="checkbox" value="">
  Option one is this and that—be sure to include why it's great
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  Option two can be something else and selecting it will deselect option one
</label>

Инлайновые чекбоксы

Добавьте .inline класс к серии чекбоксов или радиокнопок, чтобы элементы управления появлялись на одной линии.

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

Выпадающие списки

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


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

Расширение элементов управления формы

Добавляя на верх существующих браузерных элементов управления, Bootstrap включает другие полезные компоненты формы.

Префикс и суффикс ввода

Добавьте текст или кнопки перед или после любого текстового ввода. Обратите внимание, что select элементы не поддерживаются здесь.

По умолчанию

Оберните .add-on и input с одним из двух классов, чтобы добавить текст перед или после ввода.

@

.00 
<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <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" type="text">
  <span class="add-on">.00</span>
</div>

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

Вместо <span> с текстом используйте .btn, чтобы прикрепить кнопку (или две) к вводу.

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>

<div class="input-append">
  <input class="span2" id="appendedInputButtons" type="text">
  <button class="btn" type="button">Search</button>
  <button class="btn" type="button">Options</button>
</div>

Выпадающие кнопки

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

<div class="input-prepend">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="prependedDropdownButton" type="text">
</div>

<div class="input-prepend input-append">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="appendedPrependedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

Сегментированные выпадающие группы

<form>
  <div class="input-prepend">
    <div class="btn-group">...</div>
    <input type="text">
  </div>
  <div class="input-append">
    <input type="text">
    <div class="btn-group">...</div>
  </div>
</form>

Форма поиска

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">Search</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">Search</button>
    <input type="text" class="span2 search-query">
  </div>
</form>

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

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

Блочные элементы ввода

Сделайте любой <input> или <textarea> элемент ведущим как блочный элемент.

<input class="input-block-level" type="text" placeholder=".input-block-level">

Относительное управление размерами

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

Heads up! В будущих версиях мы изменим использование этих относительных классов ввода, чтобы соответствовать нашим размерам кнопок. Например, .input-large увеличит отступ и размер шрифта ввода.

Управление размерами сетки

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

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
  ...
</select>
<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>
...

Нередактируемые элементы ввода

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

Some value here 
<span class="input-xlarge uneditable-input">Some value here</span>

Действия формы

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

<div class="form-actions">
  <button type="submit" class="btn btn-primary">Save changes</button>
  <button type="button" class="btn">Cancel</button>
</div>

Текст помощи

Поддержка встроенного и блочного уровня для текста помощи, который появляется вокруг элементов управления формы.

Встроенный текст помощи

Inline help text 
<input type="text"><span class="help-inline">Inline help text</span>

Блочный текст помощи

A longer block of help text that breaks onto a new line and may extend beyond one line. 
<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

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

Предоставьте обратную связь пользователям или посетителям с базовыми состояниями обратной связи на элементах управления и метках.

Фокус ввода

Мы удаляем стандартные стили outline у некоторых элементов управления и применяем box-shadow в их место для :focus.

<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

Неверные вводы

Стиль ввода через стандартные возможности браузера с помощью :invalid. Укажите type, добавьте атрибут required, если поле не является обязательным, и (если применимо) укажите pattern.

Это не доступно в версиях Internet Explorer 7-9 из-за отсутствия поддержки CSS псевдоселекторов.

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

Отключенные вводы

Добавьте атрибут disabled на элемент ввода, чтобы предотвратить ввод пользователем и вызвать немного другой вид.

<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Состояния проверки

Bootstrap включает стили проверки для сообщений об ошибках, предупреждениях, информационных и успешных сообщениях. Чтобы использовать, добавьте соответствующий класс к окружающему .control-group.

Something may have gone wrong
Please correct the error
Username is taken
Woohoo! 
<div class="control-group warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">Something may have gone wrong</span>
  </div>
</div>

<div class="control-group error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Please correct the error</span>
  </div>
</div>

<div class="control-group info">
  <label class="control-label" for="inputInfo">Input with info</label>
  <div class="controls">
    <input type="text" id="inputInfo">
    <span class="help-inline">Username is already taken</span>
  </div>
</div>

<div class="control-group success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">Woohoo!</span>
  </div>
</div>

Кнопки

Кнопки по умолчанию

Стили кнопок можно применить к любому элементу с классом .btn. Однако, обычно вы будете использовать их только для элементов <a> и <button> для лучшего отображения.

Кнопка class="" Описание
btn Стандартная серая кнопка с градиентом
btn btn-primary Предоставляет дополнительный визуальный вес и идентифицирует основную действие в наборе кнопок
btn btn-info Используется как альтернатива стандартным стилям
btn btn-success Указывает на успешное или положительное действие
btn btn-warning Указывает на необходимость принятия мер предосторожности с этим действием
btn btn-danger Указывает на опасное или потенциально отрицательное действие
btn btn-inverse Альтернативная темно-серая кнопка, не связанная с семантическим действием или использованием
btn btn-link Уменьшить акцент на кнопке, сделав ее похожей на ссылку, сохраняя при этом поведение кнопки

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

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

Размеры кнопок

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

<p>
  <button class="btn btn-large btn-primary" type="button">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>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

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

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

Сделайте кнопки некликабельными, затухая их на 50%.

Элемент якоря

Добавьте класс .disabled к элементам <a> кнопкам.

Основная ссылка Ссылка 

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

Внимание! Мы используем .disabled как утилитный класс здесь, похожий на общий класс .active, поэтому не требуется префикс. Кроме того, этот класс предназначен только для визуального отображения; вы должны использовать пользовательский JavaScript для отключения ссылок здесь.

Элемент кнопки

Добавьте атрибут 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.

Иконки by Glyphicons

Иконки

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

Glyphicons Halflings обычно не доступны бесплатно, но соглашение между Bootstrap и создателями Glyphicons позволяет использовать их бесплатно. В качестве благодарности мы просим вас включить необязательную ссылку обратно на Glyphicons всякий раз, когда это практично.

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

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

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

Также доступны стили для инвертированных (белых) иконок, готовых с одним дополнительным классом. Мы специально применяем этот класс на состояниях наведения и активности для навигационных и выпадающих ссылок.

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

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

Примеры иконок

Используйте их в кнопках, группах кнопок для инструментария, навигации или введенных форм.

Кнопки

Группа кнопок в инструментарии
<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>
Выпадающее меню в группе кнопок
User 
<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</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> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</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> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</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>