Шаблон

Bootstrap построен на динамической 12-колонной сетке с фиксированной, либо плавающей шириной.

Необходим HTML5 doctype

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

<!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 (Николаса Галлагера) так же мы включили все плюсы от HTML5 Boilerplate. Сброс дефолтных стилей находится в reset.less, мы многое изменили для большей совместимости.

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

По умолчанию сетка состоит из 12 columns, с установленной шириной в 940px без использования динамических (респонсив) запросов. При использовании динамических CSS-запросов, сетка и элементы адаптируются под экраны шириной в 724px и 1170px в зависимости от вьюпорта (viewport). Вьюпорты менее 767px, делают сетку резиновой, а расположение элементов вертикальным.

Основа HTML-сетки

Для создания простой двух-колонной странички,- создайте элемент с классом .row и добавьте соответствующий номер для задания размера колонки от 1 до 12, например .span* где * значение от 1 до 12. Так как это 12 колонная сетка, число "spanning" или span(x)'ов должно равняться 12 основным колонкам, которые определенны как часть основной сетки. И сумма span(x)'ов не должна превышать номер родительской span-колонки.

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

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

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

Отключить колонку сохраняя за ней место можно с помощью класса .offset*. Каждый такой класс увеличивает левый margin от колонки имитируя отключение или отсутствие колонны. На пример: .offset4 сдвигает .span4 на 4 колонны.

3 offset 2

3 offset 1

3 offset 2

6 offset 3

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

Вложенные колонки

Со статическими колонками (не плавающими) в Bootstrap легко можно создать вложенные колонки. Для вложения одной группы колон в другую колонку просто добавьте новую .row (строку) и включите в неё .span(x) колонки.
Вложенные колонки не могут превышать размер родительской колонны т.е. в .span5 можно вложить пять .span1 или два .span2 и один .span1

Уровень 1

Уровень 2

Уровень 3

Уровень 2

<div class="row">
  <div class="span9">
    Уровень 1 
    <div class="row">
      <div class="span6">Уровень 2
        <div class="row">
          <div class="span3">Уровень 3</div>
          <div class="span3">Уровень 3</div>
        </div>
      </div>
      <div class="span3">Уровень 2</div>
    </div>
  </div>
</div>

Живой пример резиновых колонок

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

HTML-Основа для плавающей сетки шаблона

Сделать плавающую строку можно просто изменив .row на .row-fluid. Колонки (.span*) останутся прежними. Это позволяет с невероятной легкостью переключаться между фиксированным и плавающим шаблоном дизайна.

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

Отключение колонн в плавающей сетке

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

Отступ на 4 колонки слева

Отступ на 3 колонки слева

Отступ на 6 колонок слева

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

Вложение колонн в плавающую сетку

Вложение в плавающую сетку немного отличается: номер и сумма span(x)'ов может не совпадать с размером родительской колонки, так как вложенные колонны на каждом уровне вложения занимают 100% родительской колонки.

Fluid 12

Fluid 6

<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

Фиксированный шаблон

Основной и простой макет с шириной в 940px, отцентрованное расположение элементов для простого сайта с основным родительским <div class="container">.

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

Плавающий (резиновый) шаблон

<div class="container-fluid"> предоставляет плавающую структуру страницы, min- и max-widths, с левым сайдбаром для меню. Этот макет отлично подходит для текстов и приложений.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

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

Для активации responsive-дизайна добавьте CSS-файл и meta-тег в <head> вашей страницы. Если вы компилировали Bootstrap со страницы Изменить и скачать, Вам необходимо включить только meta-тег.

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

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

Подробнее о Динамическом дизайне

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

Изменяется ширина колонок в сетке шаблона
Заменяются плавающие элементы на фиксированные при необходимости
Изменяется размер заголовков и основного шрифта на разных устройствах

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

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

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

Категория	Ширина шаблона	Ширина колонок	Отступ колонок
Смартфоны	480px и меньше	Плавающие колонки без фиксированной ширины
Планшеты	767px и меньше	Плавающие колонки без фиксированной ширины
Портретные планшеты	768px и больше	42px	20px
По умолчанию	980px и больше	60px	20px
Большие дисплеи	1200px и больше	70px	30px

  /* Landscape - телефоны */
  @media (max-width: 480px) { ... }

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

  /* От портретного планшета до ландшафтного экрана и настольных дисплеев */
  @media (min-width: 768px) and (max-width: 979px) { ... }

  /* Большой дисплей */
  @media (min-width: 1200px) { ... }

Поддерживаемые классы

Показанная здесь таблица классов обеспечивает динамику для различных устройств и их работу в связке с сеткой макета и медиа-запросами (разделено по устройствам). Данные классы находятся в responsive.less.

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

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

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

Тестирование

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

Виден на...

Зеленая отметка означает что блок виден в текущем окне шаблона.

Телефон✔ Телефон
Планшет✔ Планшет
Монитор✔ Монитор

Скрыт на...

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

Телефон✔ Телефон
Планшет✔ Планшет
Монитор✔ Монитор