Шаблон

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, делают сетку резиновой, а расположение элементов вертикальным.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Основа 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 колонны.

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
Уровень 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>

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

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

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

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

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

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

4
Отступ на 4 колонки слева
Отступ на 3 колонки слева
Отступ на 3 колонки слева
Отступ на 6 колонок слева
<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

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

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

Fluid 12
Fluid 6
Fluid 6
Fluid 6
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-дизайна и его элементов, мы считаем что логичнее предоставить простую возможность включения.

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

Responsive devices

Медиа-запросы позволяют изменять 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 Виден Виден

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

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

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

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

Виден на...

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

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

Скрыт на...

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

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