Каркас

Требуется doctype HTML5

Bootstrap использует определённые HTML-элементы и CSS-свойства, которые требуют использования doctype HTML5. Включайте его в начало всех ваших проектов.

<!DOCTYPE html>
<html lang="ru">
  ...
</html>

Типографика и ссылки

Bootstrap задаёт базовые глобальные стили отображения, типографики и ссылок. В частности:

Удаляет margin у body
Устанавливает background-color: white; для body
Использует @baseFontFamily, @baseFontSize и @baseLineHeight как основу типографики
Устанавливает глобальный цвет ссылок через @linkColor и подчёркивает ссылки только при :hover

Эти стили находятся в scaffolding.less.

Сброс через Normalize

В Bootstrap 2 старый блок сброса заменён на Normalize.css, проект Nicolas Gallagher и Jonathan Neal, который также используется в HTML5 Boilerplate. Мы используем большую часть Normalize в reset.less, но некоторые элементы были удалены специально для Bootstrap.

Живой пример сетки

Стандартная сетка Bootstrap использует 12 колонок, что даёт контейнер шириной 940px без включённых адаптивных возможностей. При добавлении адаптивного CSS сетка подстраивается под ширину 724px и 1170px в зависимости от ширины экрана. При ширине экрана менее 767px колонки становятся гибкими и располагаются вертикально.

Базовый HTML сетки

Для простого двухколоночного макета создайте .row и добавьте нужное количество колонок .span*. Поскольку это 12-колоночная сетка, сумма всех .span* в ряду должна быть равна 12 (или количеству колонок в родителе).

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

В этом примере используются .span4 и .span8, что в сумме даёт 12 колонок и завершённый ряд.

Смещение колонок

Смещайте колонки вправо с помощью классов .offset*. Каждый класс увеличивает левый отступ колонки на одну колонку. Например, .offset4 сдвигает .span4 на четыре колонки вправо.

3 смещено на 2

3 смещено на 1

3 смещено на 2

6 смещено на 3

<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

Вложенность колонок

Чтобы вложить содержимое в стандартную сетку, добавьте новый .row и набор колонок .span* внутри существующей колонки .span*. Вложенные ряды должны содержать колонки, сумма которых равна количеству колонок родителя.

Колонка 1 уровня

2 уровень

<div class="row">
  <div class="span9">
    Колонка 1 уровня
    <div class="row">
      <div class="span6">2 уровень</div>
      <div class="span3">2 уровень</div>
    </div>
  </div>
</div>

Живой пример гибкой сетки

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

Базовый HTML гибкой сетки

Сделайте любой ряд "гибким", заменив .row на .row-fluid. Классы колонок остаются теми же, что облегчает переключение между фиксированной и гибкой сеткой.

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Гибкое смещение

Работает так же, как и смещение в фиксированной сетке: добавьте .offset* к любой колонке, чтобы сместить её на соответствующее количество колонок.

4 смещено на 4

3 смещено на 3

6 смещено на 6

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

Гибкая вложенность

Гибкая сетка использует вложенность иначе: на каждом уровне вложенности сумма колонок должна быть равна 12. Это связано с тем, что гибкая сетка использует проценты, а не пиксели для задания ширины.

Гибкая 12

Гибкая 6

<div class="row-fluid">
  <div class="span12">
    Гибкая 12
    <div class="row-fluid">
      <div class="span6">
        Гибкая 6
        <div class="row-fluid">
          <div class="span6">Гибкая 6</div>
          <div class="span6">Гибкая 6</div>
        </div>
      </div>
      <div class="span6">Гибкая 6</div>
    </div>
  </div>
</div>

Фиксированный макет

Обеспечивает общий фиксированный (и при необходимости адаптивный) макет, для которого требуется только <div class="container">.

<body>
  <div class="container">
    ...
  </div>
</body>

Гибкий макет

Создайте гибкую двухколоночную страницу с помощью <div class="container-fluid"> — отлично подходит для приложений и документации.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Боковое меню-->
    </div>
    <div class="span10">
      <!--Основное содержимое-->
    </div>
  </div>
</div>

Включение адаптивных возможностей

Включите адаптивный CSS в вашем проекте, добавив соответствующий мета-тег и дополнительный стиль в <head> вашего документа. Если вы скомпилировали Bootstrap на странице Customize, достаточно добавить только мета-тег.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Внимание! По умолчанию Bootstrap не включает адаптивные возможности, так как не всем проектам это нужно. Вместо того чтобы заставлять разработчиков удалять эту функцию, мы предлагаем включать её по мере необходимости.

О адаптивном Bootstrap

Медиа-запросы позволяют использовать пользовательский CSS в зависимости от различных условий — соотношения сторон, ширины, типа дисплея и т.д., но обычно фокусируются на min-width и max-width.

Изменяют ширину колонок в сетке
Располагают элементы вертикально вместо float там, где это необходимо
Изменяют размер заголовков и текста для разных устройств

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

Поддерживаемые устройства

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

Метка	Ширина макета	Ширина колонки	Ширина отступа
Большой экран	1200px и выше	70px	30px
По умолчанию	980px и выше	60px	20px
Портретные планшеты	768px и выше	42px	20px
Телефоны и планшеты	767px и ниже	Гибкие колонки, без фиксированной ширины
Телефоны	480px и ниже	Гибкие колонки, без фиксированной ширины

/* Большой экран */
@media (min-width: 1200px) { ... }

/* Портретный планшет до десктопа */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Ландшафтный телефон до портретного планшета */
@media (max-width: 767px) { ... }

/* Ландшафтные телефоны и ниже */
@media (max-width: 480px) { ... }

Адаптивные утилиты

Для быстрой мобильной разработки используйте эти утилитарные классы для отображения и скрытия контента в зависимости от устройства. Ниже приведена таблица доступных классов и их действия для каждого макета (по устройствам). Они находятся в responsive.less.

Класс	Телефоны 767px и ниже	Планшеты 979px до 768px	Десктопы По умолчанию
`.visible-phone`	Видимый	Скрыт	Скрыт
`.visible-tablet`	Скрыт	Видимый	Скрыт
`.visible-desktop`	Скрыт	Скрыт	Видимый
`.hidden-phone`	Скрыт	Видимый	Видимый
`.hidden-tablet`	Видимый	Скрыт	Видимый
`.hidden-desktop`	Видимый	Видимый	Скрыт

Когда использовать

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

Тестовый пример адаптивных утилит

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

Видим на...

Зелёные галочки означают, что класс видим в вашем текущем окне.

Телефон✔ Телефон
Планшет✔ Планшет
Десктоп✔ Десктоп

Скрыт на...

Здесь зелёные галочки означают, что класс скрыт в вашем текущем окне.

Телефон✔ Телефон
Планшет✔ Планшет
Десктоп✔ Десктоп

Глобальные настройки