31.07.2018 Точка зрения

Как работает система сеток в Bootstrap 4

Bootstrap — это популярнейшая фронтэнд библиотека компонентов интерфейса. Компания Twitter выпустила ее в 2011 году, а спустя год после релиза у Bootstrap появилась 12-колоночная сетка и поддержка адаптивности. На протяжении долгого времени проекты создавались с использованием Bootstrap 3. Но, как мы знаем, время не стоит на месте, и в январе 2018 года официально был выпущен Bootstrap 4 с обновленной системой сеток, о которой мы и поговорим в данной статье.

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

Система сеток Bootstrap используется для верстки адаптивных макетов, т.е. таких, которые изменяют свой внешний вид в зависимости от разрешения экрана.

Сетка в Bootstrap состоит из строк (.row) и столбцов (.col) внутри одного или нескольких контейнеров (.container).

Использовать её можно отдельно, без подключения целой библиотеки. Для этого скачиваем с сайта архив стилей и js-скриптов и подключаем из этого архива к нашей HTML странице всего один файл bootstrap-grid.css, содержащий только сетку.

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

<div class="container">
  <div class="row">
    <div class="col">Текст внутри колонки</div>
  </div>
</div>

Сделаем две колонки:

<div class="container">
  <div class="row">
    <div class="col">Левая колонка</div>
    <div class="col">Правая колонка</div>
  </div>
</div>

Базовые принципы работы данной сетки просты, а их понимание сэкономит вам кучу времени при верстке сайта.

Правила сетки:

Колонки(.col) обязательно должны быть дочерним элементом cтроки (.row).
Строки(.row) должны состоять только из колонок.
Строки(.row) должны размещаться внутри контейнера (.container).

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

Контейнер

Из базовых примеров видно, что используется класс .container, в который оборачиваю класс .row. Контейнер является ключевым элементом в сетке Bootstrap, но может содержать не только сетку со строками и колонками, но и любой другой контент.

Не игнорируйте контейнер! Он необходим для выравнивания левых и правых краев макета.

Bootstrap 4 имеет две разновидности контейнера:

1) У .container фиксированная ширина и наш шаблон центрируется

<div class="container" ></div>

2) .container-fluid растягивается по всей ширине экрана

<div class="container-fluid"></div>

В контейнере можно размещать несколько строк (.row); также вы можете размещать несколько контейнеров на одной странице. Все зависит от дизайна вашего макета.

Строки и Колонки

Единственная цель .row — содержать одну или несколько колонок. Есть одно простое правило, про которое не стоит забывать — никогда не размещайте контент внутри .row, его нужно размещать внутри колонок.

<div class="row">
  <div class="col">Вот так правильно</div>
</div>

Важно помнить, что .row в Bootstrap 4 display:flex (в предыдущей версии фреймворка колонки создавались с использованием обтекания) и благодаря этому они имеют одинаковую высоту, а горизонтальное и вертикальное выравнивание легко осуществляется при использовании Flex and Auto-margin Utility классов.

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

Колонки:

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

Классическая сетка в Bootstrap состоит из 12 колонок:

Чтобы реализовать 6 колонок, нам необходимо выбрать и создать 6 div’ов с классом col-2 (12/6 = 2).

Для наглядности примеры с другим количеством колонок:

Но количество колонок не ограничено числом 12. Благодаря Flexbox’у, используемому в Bootstrap 4, появилась функция автоколонок. Колонки без заданной ширины дают вам больше гибкости при разработке макетов.

Когда единицы колонок в одной строке (.row) превышают количество 12, происходит следующее: колонки из одной строки располагаются горизонтально, а затем укладываются вертикально вниз. Эта вертикальная “укладка” носит название “Обтекание столбцов”.

Ширину колонки и обтекание можно контролировать, используя различные уровни адаптивной сетки (брейкпойнты):

У колонок могут бы дочерние строки и колонки. Этот метод называется вложенностью:

Как сделать адаптивный дизайн с Bootstrap 4

Bootstrap 4 имеет пять уровней адаптивной сетки (брейкпойнтов), которые вы могли заметить в предыдущих примерах с колонками (col-lg-4, col-md).

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

(xs) — ширина экрана < 576px (уровень по умолчанию)
sm — ширина экрана ≥ 576px
md — ширина экрана ≥ 768px
lg — ширина экрана ≥ 992px
xl — ширина экрана ≥ 1200px

Почему я ставлю xs в скобки, в отличии от других брейкпойнтов? С тех пор как xs (extra-small) является уровнем по умолчанию, -xs, используемый в Bootstrap 3 больше не используется в Bootstrap 4. Так, вместо записи col-xs-6, мы просто пишем col-6.

Bootstrap использует css медиа-запросы для создания брейкпойнтов. Они позволяют контролировать поведение колонок на разном разрешении экрана.

Например: 2 столбца, ширина каждого 50%:

<div class="container">
  <div class="row">
    <div class="col-sm-6">Column 1</div>
    <div class="col-sm-6">Column 2</div>
  </div>
</div>

Класс .col-sm-6 означает, что мы используем 6 из 12 колонок (50%) на устройствах с шириной экрана ≥ 576px. Когда ширина экрана станет меньше 576px, то 2 колонки начнут занимать не 50% экрана (как это было раньше), а 100%.

Это связано с тем, что (xs) является брейкпойнтом по умолчанию. Поскольку здесь не указана ширина столбца по умолчанию, ширина 50% была применена только на 576 пикселей, а шире для sm брейкпойнта.

Первым делом телефоны!

Брекопинты для больших разрешений экрана переопределяют брейкпойнты для экранов поменьше.

Если вам нужны изменения только на col-sm-3, то можно написать:

<div class="col-sm-3">..</div>

Если же вы меняете ширину колонок в зависимости от разрешения экрана, то нужно писать так (первым ставим класс с брейкпойнтом поменьше):

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

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

Давайте рассмотрим несколько примеров с автошириной.

3 колонки равной ширины. «Cols» остаются горизонтальными на всех размерах и не складываются вертикально:

<div class="container"> 
  <div class="row"> 
    <div class="col">1</div>
    <div class="col">2</div> 
    <div class="col">3</div>
  </div> 
</div>

3 колонки равной ширины (адаптивные). В этом примере колонки остаются горизонтальными до брейкпойнта sm в 576px, а затем располагаются вертикально:

<div class="container"> 
  <div class="row"> 
    <div class="col-sm">1</div>
    <div class="col-sm">2</div> 
    <div class="col-sm">3</div>
  </div> 
</div>

Ключевые моменты для создания адаптивного дизайна с использованием сетки Bootstrap 4:

Колонки будут складываться вертикально (и занимать 100%) при меньшей ширине экрана, если вы не используете определенный класс col * в вашей разметке HTML.

Меньшие классы сетки также применяются к более крупным экранам, если они не переопределены специально для экранов шириной побольше. Таким образом,
<div class="col-md-6"></div>

фактически совпадает с

<div class="col-md-6 col-lg-6"></div>

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

Текст: Дарья Чужайкина, Junior programmist, Bytex