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

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

Для примера,<code><section></код> следует поместить внутрь как строковый.

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

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

<p>Sample text here...</p>

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

Внимание! Всегда используйте теги <pre> как можно левее; это сохранит все отступы. Дополнительно вы можете использовать класс .pre-scrollable, который имеет максимальную высоту в 350px и добавляет вертикальную прокрутку.

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

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

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

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

Добавьте любой из следующих классов к основному классу .table.

.table-striped

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

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

.table-bordered

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

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

.table-hover

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

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

.table-condensed

Делает таблицы более компактными, наполовину сокращая отступы.

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

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

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

...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Поддерживаемая разметка таблиц

Список поддерживаемых элементов HTML и указания для их использования.

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

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

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

<form>
  <legend>Условные обозначения</legend>
  <label>Название</label>
  <input type="text" placeholder="Type something…">
  <span class="help-block">Это пример вспомогательного текста.</span>
  <label class="checkbox">
    <input type="checkbox"> Проверить
  </label>
  <button type="submit" class="btn">Подтвердить</button>
</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"> Запомнить
  </label>
  <button type="submit" class="btn">Отправить</button>
</form>

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

Выровняйте текст по правой стороне, ставя обтекание слева, чтобы он находился на одной линии с элементами формы:

• Добавьте .form-horizontal в форму
• Добавьте текст и элементы управления внутрь .control-group
• Добавьте .control-label в текст
• Добавьте любой подходящий элемент управления .controls для точной настройки

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">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: текст, пароль, text, password, время и дата, региональные настройки времени и даты, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, номер телефона и цвет.

Всякий раз обязательно используйте нужный тип type.

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

Многострочный текст

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

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

Флажки и радио-кнопки

Элементы «флажки» (чек-боксы) используются для выбора одной или нескольких опций в списке, а радио-кнопки предназначены только для выбора одной опции из нескольких.

По умолчанию (вертикально)

<label class="checkbox">
  <input type="checkbox" value="">
   А вот вам опция номер один - очень крутая штука.
</label>
 
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
   А вот вам опция номер один - очень крутая штука.
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  Опция два - это нечто другое. Выбрав ее, отменяете первую.
</label>

Флажки в одной строке

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

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

Список выбора

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

<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, чтобы отобразить текст до или после поля ввода.

<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="text"><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="text"><span class="add-on">.00</span>
</div>

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

Используйте с текстом вместо <span> класс .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">Search</button><button class="btn" type="button">Options</button>
</div>

Форма поиска

<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 class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

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

Сетка размеров

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

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

Неформатируемые поля

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

<span class="input-xlarge uneditable-input">Some value here</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">Inline help text</span>

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

<input type="text"><span class="help-block">Слишком большой блок вспомогательного текста переносится на новую строку и может продолжиться более, чем на одну строку.</span>

Настройки состояния элементов формы

Обеспечивают обратную связь с пользователями или посетителями.

Фокус ввода

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

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

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

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

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

Состояния валидации

В Bootstrap имеются стили валидации для ошибок, предупреждений, информации и успешных действий. Для использования добавьте подходящий класс к ближайшему классу .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> and <button> для лучшего отображения.

Кросс-браузерная совместимость

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

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

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

<p>
  <button class="btn btn-large btn-primary" type="button">Большая кнопка</button>
  <button class="btn btn-large" type="button">Большая кнопка</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Кнопка по умолчанию</button>
  <button class="btn" type="button">Кнопка по умолчанию</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">Маленькая кнопка</button>
  <button class="btn btn-small" type="button">Маленькая кнопка</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">Мини-кнопка</button>
  <button class="btn btn-mini" type="button">Мини-кнопка</button>
</p>

Создайте вложенный блок кнопок, который размещается по всей ширине родительских кнопок. Для этого добавьте класс .btn-block.

<button class="btn btn-large btn-block btn-primary" type="button">Вложенная кнопка</button>
<button class="btn btn-large btn-block" type="button">Вложенная кнопка</button>

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

Отмените нажатие кнопок, уменьшив их четкость на 50%.

Анкерный элемент

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

Исходная ссылка Ссылка

<a href="#" class="btn btn-large btn-primary disabled">Исходная ссылка</a>
<a href="#" class="btn btn-large disabled">Ссылка</a>

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

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

Добавьте атрибут disabled к кнопкам <button>.

Главная кнопка Кнопка

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Главная кнопка</button>
<button type="button" class="btn btn-large" disabled>Кнопка</button>

Один класс, множественные теги

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

<a class="btn" href="">Ссылка</a>
<button class="btn" type="submit">Кнопка</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

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

Добавьте классы к элементу <img>, чтобы легко настроить стили изображений.

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

Внимание! .img-rounded и .img-circle не работают в IE7-8 из-за недостаточной поддержки border-radius.

Иконки 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

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

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

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

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

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

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

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

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

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

Кнопки

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

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

Кнопки с выпадающим списком

<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> Пользователь</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Редактировать</a></li>
    <li><a href="#"><i class="icon-trash"></i> Удалить</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Запретить</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Назначить администратором</a></li>
  </ul>
</div>

Маленькая кнопка

<a class="btn btn-small" href="#"><i class="icon-star"></i></a>

Навигация

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

Поля формы

<div class="control-group">
  <label class="control-label" for="inputIcon">Адрес электронной почты</label>
  <div class="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>

Вернуться назад