Уроки по Bootstrap. Урок №5: верстка шаблонов, мобильная верстка

Блочная система (Grid System) Bootstrap позволяет вам горизонтально разделить страницу на 12 столбцов. Если использовать все 12 частей вам нет необходимости, такие блоки можно легко группировать, создавая более широкие столбцы. Они будут состоять из двух, трех и так далее частей страницы, разделённой на 12 частей. Это около 8.3% на столбец.

Разделить таким образом можно как страницу, так и любой блочный элемент, размеры блоков будут рассчитаны как часть родительского элемента.

Вот пример того, как можно разделить страницу при помощи Bootstrap.

Блочная структура в Bootstrap рассчитана также на мобильные устройства и планшеты. Блоки будут автоматически перестраиваться в зависимости от размера экрана.

Классы для ячеек

В блочной верстке Bootstrap есть четыре основных класса:

• xs (extra small) — для мобильных телефонов, до 767 пикс. включительно
• sm (small) — для планшетов, размер экрана 768—991 пикс.
• md (middle) — для десктопов, 992—1199 пикс.
• lg (large) — для больших экранов, от 1200 пикс.

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

Базовая структура макета

Это пример верстки макета при помощи блочной системы Bootstrap:

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
 <div class="col-*-*"></div>
 <div class="col-*-*"></div>
 <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

Для начала создайте строку с ячейками: <div class="row"> и далее добавьте в нее нужное количество столбцов с соответствующими классами .col-*-*.

Обратите внимание, что сумма ячеек для каждого типа (sm, xs, md, lg) в ячейке .col-*-* не должна превышать 12 частей для каждой строки.

Отступы для колонок

Вы можете указывать, какой отступ будет у колонки, если вы хотите “отодвинуть” ее вправо. Для этого используйте класс .col-md-offset-*. Такой класс увеличит отступ слева на количество колонок, указанное в *

<div class="row"> 
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> 
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0"> .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> 
</div>

Смена порядка отображения ячеек

Можно указывать, в каком порядке будут отображаться ячейки, при помощи классов .col-md-push-* и .col-md-pull-*.

<div class="row"> 
  <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div> 
  <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div> 
</div>

Ниже приведено несколько примеров вёрстки самых популярных макетов при помощи блочной верстки Bootstrap.

Пример: три одинаковые колонки

Этот пример показывает, как сверстать три равных по ширине колонки, которые будут отображаться горизонтально на планшетах и более крупных экранах. На экране мобильного такая верстка будет растянута и каждая из ячеек займёт всю ширину экрана:

<div class="row">
 <div class="col-sm-4">.col-sm-4</div>
 <div class="col-sm-4">.col-sm-4</div>
 <div class="col-sm-4">.col-sm-4</div> 
</div>

Пример: две колонки разной ширины

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

<div class="row">
 <div class="col-sm-4">.col-sm-4</div>
 <div class="col-sm-8">.col-sm-8</div> 
</div>

Пример: две колонки с двумя вложенными колонками

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

<div class="row">
  <div class="col-sm-8"> 
   .col-sm-8 
   <div class="row"> 
    <div class="col-sm-6">.col-sm-6</div> 
    <div class="col-sm-6">.col-sm-6</div> 
   </div> 
 </div> 
 <div class="col-sm-4">.col-sm-4</div> 
</div>

Отзывчивая мобильная верстка

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

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

<div class="row">
  <div class="col-sm-12 col-md-8 col-lg-6">
  <div class="col-sm-12 col-md-4 col-lg-6">
</div>

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