Bootstrap

Шаблон

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

Основные стили в CSS сброс браузерных дефолтов, оформление и ссылки

Необходим HTML5 doctype

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

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Оформление и ссылки

В файле scaffolding.less, мы установили основные стили, оформление (стили и размеры шрифтов), и стили ссылок. Конкретнее:

  • Удалили отступ (margin) элемента body
  • Установили background-color: white; для body
  • Используем @baseFontFamily, @baseFontSize, и @baseLineHeight атрибуты, как основные для оформления
  • Выставили основной цвет ссылки через @linkColor и применили подчеркивание только для селектора :hover

Сбрасывание браузерных дефолтов через Normalize

В Bootstrap 2 мы применили ставший обыденным сброс браузерных дефолтов с помощью Normalize.css, проект от Nicolas Gallagher (Николаса Галлагера) так же мы включили все плюсы от HTML5 Boilerplate.

Сброс дефолтных стилей находится в reset.less, мы многое изменили для большей совместимости.

Сетка дизайна динамическая 12-колонная сетка

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

Основная сетка макета представлена как часть Bootstrap'а в 940px-ширины в 12-колонок.

Так же представленны 4 динамических варианта для различных девайсов и разрешений экрана: телефон, наладонник портретная, наладонник горизонтальная, он же маленький монитор, и большой широкоэкранный монитор.

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

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


Отключение колонок с помощью offset(x) класса

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4
<div class="row">
  <div class="span4">...</div>
  <div class="span4 offset4">...</div>
</div>

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

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

Пример

Вложенные колонки не могут превышать размер родительской колонны т.е. в .span5 можно вложить пять .span1 или два .span2 и один .span1. Смотрите пример ниже.

Уровень 1 (.span6)
Уровень 2 (.span3)
Уровень 2 (.span3) 
<div class="row">
  <div class="span12">
    Уровень 1
    <div class="row">
      <div class="span6">Уровень 2</div>
      <div class="span6">Уровень 2</div>
    </div>
  </div>
</div>

Плавающая сетка макета 12 динамических колонок, размер колонок основан на процентном заполнении

Плавающие колонки

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

Проценты, не пиксели

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

Плавающие строки (.row)

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

Пример разметки

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

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

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

Fluid 12
Fluid 6
Fluid 6 
<div class="row-fluid">
  <div class="span12">
    Level 1 of column
    <div class="row-fluid">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>

Пользовательские настройки

Переменная Значение по умолчанию Описание
@gridColumns 12 Количество колонок
@gridColumnWidth 60px Ширина каждой колонки
@gridGutterWidth 20px Расстояние (отступ) между колонками

Переменные в LESS

Несколько переменных, описанных выше и встроенных в Bootstrap, позволят Вам с легкостью изменить настройки сетки, по умолчанию (940px). Все переменные связанные с сеткой шаблона находятся в variables.less.

Как изменить?

Изменение сетки шаблона связанны с изменением дерева переменных @grid* и должны быть перекомпилированны в Bootstrap. Изменяйте переменные сетки шаблона в variables.less и используйте четыре способа перекомпилировать less. Если Вы добавляете колонки в сетку шаблона, убедитесь что добавили CSS для новых колонок в grid.less.

Изменение параметров динамики

Изменение сетки макета работает только на дефолтном уровне, когда ширина составляет 940px. Для изменений в динамической сетке Bootstrap'а Вам так же необходимо изменить сетку шаблона в responsive.less.

Макеты Основные шаблоны для создания веб-сайтов

Фиксированный

Основной и простой макет с шириной в 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>

Динамический дизайн "Media-queries" (Медиа-запросы) для различных устройств и размеров экрана

Responsive devices

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

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

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

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

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

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

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

Обязательный meta - тег

Для корректного отображения и работы динамических медиа-запросов, необходимо включить viewport meta - тег.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Использование медиа-запросов

Bootstrap не включает в себя данные медиа-запросы по умолчанию, но понимание и их добавление - очень простой процесс. У Вас есть несколько путей для добавления динамических возможностей Bootstrap'a:

  1. Использовать скомпилированную версию, bootstrap-responsive.css
  2. Добавить @import "responsive.less" и перекомпилировать Bootstrap
  3. Изменить и перекомпилировать responsive.less как отдельный файл

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

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

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

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

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

Возможность динамических классов

Кто они такие?

Для быстрой разработки под мобильные платформы, используйте эти классы для показа или скрытия контента в зависимости от устройства.

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

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

Для примера, Вы можете показать <select> элемент для навигации в мобильном устройстве, но скрыть на десктопах и планшетах.

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

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

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

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

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

Виден на...

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

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

Скрыт на...

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

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