Twitter Bootstrap: на Русском

Необходим 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

<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. Колонки (.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">
    Уровень 1
    <div class="row-fluid">
      <div class="span6">Уровень 2</div>
      <div class="span6">Уровень 2</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

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

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

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

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

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

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

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

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

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

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

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

Виден на...

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

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

Скрыт на...

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

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

Шаблон

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