Bootstrap

Шаблон

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

Основные настройки

Требуется HTML5 doctype

Bootstrap использует HTML-элементы и CSS-свойства, которые требуют HTML5 doctype. Включите его во все свои проекты.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   ...
  4. </html>

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

Основные компоненты Bootstrap включают в себя элементы отображения, оформления и стили ссылок. В частности, мы:

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

Эти стили вы можете найти в scaffolding.less.

Сброс настроек посредством Normalize

В Bootstrap 2 мы применили старый сброс браузерных дефолтов с помощью Normalize.css, проект от Николаса Галлагера который также включает в себя HTML5 Boilerplate. Так как мы часто используем Normalize в нашем reset.less, мы удалили некоторые элементы специально для Bootstrap.

Сетка дизайна по умолчанию

Демонстрация

Основная сетка макета состоит из 12 колонок, обеспечивая ширину контейнеров в 940px без активных динамических особенностей. При добавлении динамического файла CSS сетка может растягиваться в ширину от 724px до 1170px, в зависимости от вашего монитора. На дисплеях, ширина которых менее 767px, колонки становятся плавающими и выстраиваются вертикально.

1
1
1
1
1
1
1
1
1

2
3
4

4
5

9

Основная сетка HTML

Для простого макета в две колонки создайте класс .row и добавьте соответствующее число колонок .span*. Так как это сетка в 12 колонок, каждый диапазон из двух .span* насчитывает 12 колонок и всякий раз будет добавлять 12 колонок в каждую строку (или то количество колонок, которое задано в родительском элементе).

  1. <div class="row">
  2.   <div class="span4">...</div>
  3.   <div class="span8">...</div>
  4. </div>

В данном примере у нас имеются .span4 и .span8, созданные и 12 колонок и одной сплошной строки.

Перемещение колонок

Подвиньте колонки вправо, используя классы .offset*. Каждый класс увеличивает левый отступ колонки на размер ее самой. Например, .offset4 перемещает .span4 на четыре колонки.

4
3 offset 2

3 offset 1
3 offset 2

6 offset 3

  1. <div class="row">
  2.   <div class="span4">...</div>
  3.   <div class="span3 offset2">...</div>
  4. </div>

Верстка колонок

Чтобы сверстать контент, используя сетку по умолчанию, добавьте новый класс .row и установите расстояние .span* для колонок внутри существующей .span* колонки. Сверстанные строки должны состоять из набора колонок, который добавлен к количеству родительских колонок.

Колонка уровня 1

Уровень 2
Уровень 2 

  1. <div class="row">
  2.   <div class="span9">
  3.     Level 1 column
  4.     <div class="row">
  5.       <div class="span6">Level 2</div>
  6.       <div class="span3">Level 2</div>
  7.     </div>
  8.   </div>
  9. </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. Колонки останутся прежними, что позволяет с легкостью переключаться между фиксированным и плавающим шаблоном дизайна.

  1. <div class="row-fluid">
  2.   <div class="span4">...</div>
  3.   <div class="span8">...</div>
  4. </div>

Плавающее перемещение

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

4
4 offset 4

3 offset 3
3 offset 3

6 offset 6

  1. <div class="row-fluid">
  2.   <div class="span4">...</div>
  3.   <div class="span4 offset2">...</div>
  4. </div>

Плавающая верстка

Верстка плавающей сетки немного отличается: количество верстаемых колонок не должно соответствовать количеству родительских колонок. Вместо этого каждый уровень сверстанных колонок «сбрасывается», потому что каждая строка принимает 100% свойств родительской колонки.

Fluid 12

Fluid 6
Fluid 6 

  1. <div class="row-fluid">
  2.   <div class="span12">
  3.     Level 1 of column
  4.     <div class="row-fluid">
  5.       <div class="span6">Level 2</div>
  6.       <div class="span6">Level 2</div>
  7.     </div>
  8.   </div>
  9. </div>

Макеты

Фиксированная разметка

Основной фиксированный по ширине макет (опционально динамический) с единственным требованием — <div class="container">.

  1. <body>
  2.   <div class="container">
  3.     ...
  4.   </div>
  5. </body>

Плавающая разметка

Создайте плавающую страницу с двумя колонками с помощью <div class="container-fluid">. Идеально подходит для приложений и документации.

  1. <div class="container-fluid">
  2.   <div class="row-fluid">
  3.     <div class="span2">
  4.       <!--Sidebar content-->
  5.     </div>
  6.     <div class="span10">
  7.       <!--Body content-->
  8.     </div>
  9.   </div>
  10. </div>

Адаптивный дизайн

Включение адаптивных возможностей

Включите в вашем проекте адаптивный CSS, добавляя соответствующие мета теги и дополнительные таблицы стилей в <head> вашего документа. Если у вас компилированный Bootstrap, загруженный с нашей страницы, то вам всего лишь нужно добавить мета тег.

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

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

Об адаптивных особенностях Bootstrap

Responsive devices

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

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

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

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

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

Категория Ширина макета Ширина колонок Отступ между колонками
Большой дисплей 1200px и более 70px 30px
По умолчанию 980px и более 60px 20px
Портретные планшеты 768px и более 42px 20px
Планшеты 767px и менее Плавающие колонки, без фиксированной ширины
Смартфоны 480px и менее Плавающие колонки, без фиксированной ширины 
  1. /* Large desktop */
  2. @media (min-width: 1200px) { ... }
  3.  
  4. /* Portrait tablet to landscape and desktop */
  5. @media (min-width: 768px) and (max-width: 979px) { ... }
  6.  
  7. /* Landscape phone to portrait tablet */
  8. @media (max-width: 767px) { ... }
  9.  
  10. /* Landscape phones and down */
  11. @media (max-width: 480px) { ... }

Дополнительные адаптивные классы

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

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

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

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

Тестирование адаптивных классов

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

Виден на…

Зеленые отметки обозначают, что класс виден на данном дисплее.

  • Телефон? Телефон
  • Планшет? Планшет
  • Десктоп? Десктоп

Скрыт на…

В этом случае зеленые отметки обозначают, что класс не отображается на данном дисплее.

  • Телефон? Телефон
  • Планшет? Планшет
  • Десктоп? Десктоп

Scroll to top