Новая финальная версия - Bootstrap 4!

Шаблон

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

Необходим HTML5 doctype

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

<!DOCTYPE html>
<html lang="en">
  ...
</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. Сброс дефолтных стилей находится в 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>

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

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

Level 1 column
Level 2
Level 2
<div class="row">
  <div class="span9">
    Level 1 column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span3">Level 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-Основа для плавающей сетки шаблона

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

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

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

Работает так же, как и фиксированная сетчатая система: добавьте .offset* в любой столбец, чтобы компенсировать это количество столбцов.

4
4 offset 4
3 offset 3
3 offset 3
6 offset 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 поддерживает несколько медиа-запросов в одном файле, что позволяет работать Вашему проекту на различных устройствах и с разными разрешениями экранов. Что включено:

Категория Ширина шаблона Ширина колонок Отступ колонок
Большие дисплеи 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) { ... }

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

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

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

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

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

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

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

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

Виден на...

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

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

Скрыт на...

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

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