Шаблон. Документация Bootstrap 2.3.2

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

Основа 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>

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

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

Level 1 column

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>

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

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

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

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

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

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

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

4 offset 4

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

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

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

Шаблон

Основные стили