Bootstrap 4 – Сетка

Во фреймворке Bootstrap 4 была значительно обновлена модульная сетка. По сравнению с Bootstrap 3, благодаря технологии «FlexBox», сетка стала более гибкой и появилась возможность ее автоматизации, что упрощает верстку макетов и позволяет писать меньше служебных классов. Об основных нововведениях четвертого бутстрапа и отличиях от третьего можно посмотреть в этой статье.

Двенадцатиколоночная модульная сетка Bootstrap 4

Сетка Bootstrap 4 дает возможность создавать полностью адаптивные web-страницы для различных устройств. Для этого используется двенадцатиколоночная система и пять контрольных точек (брейкпоинтов). Контрольные точки располагаются на определенной ширине «viewport» (видимая часть окна браузера). При достижении того или иного брейкпоинта происходит перестроение элементов страницы, исходя из установленных для этих элементов служебных классов. Давайте разберем все вышесказанное по порядку.

Функционал сетки состоит из нескольких элементов:

  • .container и .container-fluid – контейнеры;
  • .row – ряды;
  • .col – столбцы.

Оберточные контейнеры и ряды

Контейнеры являются оберткой рядов и столбцов. Фреймворк дает на выбор два варианта:

<div class="container">...</div>
  • .container – обертка с фиксированной максимальной шириной для каждой контрольной точки.
<div class="container-fluid">...</div>
  • .container-fluid – полностью резиновый контейнер, его ширина занимает всегда 100% видимой части окна браузера.

В следующей таблице показано, на какой ширине «viewport» (в пикселях) располагаются контрольные точки и какая при этом ширина контейнеров.

Ширина viewport браузера < 576px ≥ 576px ≥ 768px ≥ 992px ≥ 1200px
Ширина .container (max) 100% 540px 720px 960px 1140px
Ширина .container-fluid 100%

Кроме различий в ширине, остальные стили обоих классов контейнеров одинаковые.

.container, .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Ряд – это обертка для столбцов с классом .row. В третьем бутстрапе при необходимости можно было опустить ряд и размещать столбцы прямо в контейнере, использование технологии «FlexBox» в Bootstrap 4 делает .row обязательным, так как он выступает flex-контейнером для столбцов.

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

Имея отрицательный внешний отступ в 15 пикселей (-15px) слева и справа, .row служит для устранения лишних внутренних отступов, так как контейнеры и столбцы имеют padding-left: 15px; и padding-right: 15px;.

контейнер (+15px) -> ряд (-15px) -> столбец (+15px) -> контент
<!-- Пример с вложенным рядом -->
контейнер (+15px) -> ряд (-15px) -> столбец (+15px) -> ряд (-15px) -> столбец (+15px) -> контент

Таким образом, с левого и правого края, между контейнером и контентом отступ будет всегда оставаться 15 пикселей. Если есть необходимость убрать отрицательные отступы у ряда, то нужно добавить к .row дополнительный класс .no-gutters.

Столбцы сетки: адаптация и перестроение

Столбец – это адаптивный блок, являющейся основным элементом сетки фреймворка, который можно настраивать для отображения на разных устройствах. Настройка элементов производится при помощи специальных классов и контрольных точек (брейкпоинтах), о которых упоминалось в начале статьи.

Адаптивному блоку (столбцу) присваивается класс .col, к этому классу добавляется префикс, соответствующий контрольной точке, по достижении которой должно произойти необходимое изменение столбца.

Ширина viewport браузера < 576px ≥ 576px ≥ 768px ≥ 992px ≥ 1200px
Префикс класса столбца .col- .col-sm- .col-md- .col-lg- .col-xl-
Количество столбцов 12
Ширина отступа 30px (15px с каждой стороны столбца)

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

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

Из представленного примера служебных классов следует, что при достижении каждого брейкпоинта, то есть на различных устройствах, блок будет занимать совершенно разную ширину. Вычислить процент ширины столбца очень просто, .row занимает 100%, колонок в сетке всего 12, получается следующая формула: текущее кол-во колонок блока / 12 * 100%. В результате получаем процент от ширины ряда, в нашем случае получается следующее:

Ширина viewport браузера < 576px ≥ 576px ≥ 768px ≥ 992px ≥ 1200px
Префикс класса столбца .col- .col-sm- .col-md- .col-lg- .col-xl-
Ширина столбца 100% 66,6% 50% 33,3% 16,6%

Стоит отметить, что в теперь при наименовании класса для самых маленьких устройств (< 576px) префикс (-xs-) не указывается, так как это делалось в Bootstrap 3.

Нужно также обратить внимание на то, что если для столбца присвоен класс, например .col-md-6, но не присвоены .col-sm-? и .col-?, то отображение блока на этих двух контрольных точках будет такое же, как на .col-md-6. Другими словами, если не задан класс брейкпоинта с меньшей шириной, то он наследует стили от заданного класса с большей шириной.

Автоматическая компоновка адаптивных блоков

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

Адаптивные блоки без количества колонок

<div class="container">
   <div class="row">
      <div class="col">1/12</div>
      <div class="col">2/12</div>
      <div class="col">3/12</div>
      <div class="col">4/12</div>
      <div class="col">5/12</div>
      <div class="col">6/12</div>
      <div class="col">7/12</div>
      <div class="col">8/12</div>
      <div class="col">9/12</div>
      <div class="col">10/12</div>
      <div class="col">11/12</div>
      <div class="col">12/12</div>
   </div>
   <div class="row">
      <div class="col">1/3</div>
      <div class="col">2/3</div>
      <div class="col">3/3</div>
   </div>
</div>

Есть возможность комбинирования блоков с установленным количеством колонок и без.

Столбцы с назначенными колонками и без

<div class="container">
   <div class="row">
      <div class="col">col</div>
      <div class="col-4">col-4</div>
      <div class="col">col</div>
   </div>
   <div class="row">
      <div class="col-4">col-4</div>
      <div class="col">col</div>
   </div>
</div>

Для того, чтобы не плодить много рядов, если, конечно, в них нет необходимости, то можно разделять столбцы блоком с классом .w-100, который имеет всего одно стилевое правило width: 100% !important;.

Отделяем линии адаптивных блоков без рядов

<div class="container">
   <div class="row">
      <div class="col">col</div>
      <div class="col">col</div>
      <div class="w-100"></div>
      <div class="col">col</div>
      <div class="col">col</div>
   </div>
</div>

Чтобы ширина блоков определялась исходя из их содержимого, нужно добавить -auto-.

<div class="container">
   <div class="row">
      <div class="col-auto">col-auto</div>
      <div class="col-sm-auto">col-sm-auto</div>
      <div class="col-md-auto">col-md-auto</div>
      <div class="col-lg-auto">col-lg-auto</div>
      <div class="col-xl-auto">col-xl-auto</div>
   </div>
</div>

Выравнивание столбцов по вертикали и горизонтали

Вертикальное выравнивание блоков по верхнему краю.

Выравнивание столбцов по верхнему краю классом align-items-start

<div class="container">
   <div class="row align-items-start">
      <div class="col">col</div>
      <div class="col">col</div>
      <div class="col">col</div>
   </div>
</div>

Вертикальное выравнивание блоков по центру.

Выравнивание столбцов по центру классом align-items-center

<div class="container">
   <div class="row align-items-center">
      <div class="col">col</div>
      <div class="col">col</div>
      <div class="col">col</div>
   </div>
</div>

Вертикальное выравнивание блоков по нижнему краю.

Выравнивание столбцов по нижнему краю классом align-items-end

<div class="container">
   <div class="row align-items-end">
      <div class="col">col</div>
      <div class="col">col</div>
      <div class="col">col</div>
   </div>
</div>

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

Разное вертикальное выравнивание столбцов в одном ряду

<div class="container">
   <div class="row">
      <div class="col align-items-start">col</div>
      <div class="col align-items-center">col</div>
      <div class="col align-items-end">col</div>
   </div>
</div>

Для горизонтального выравнивания адаптивных блоков существует пять классов, которые присваиваются ряду.

Горизонтальное выравнивание столбцов

<div class="container">
   <div class="row justify-content-start">
      <div class="col-4">col</div>
      <div class="col-4">col</div>
   </div>
   <div class="row justify-content-center">
      <div class="col-4">col</div>
      <div class="col-4">col</div>
   </div>
   <div class="row justify-content-end">
      <div class="col-4">col</div>
      <div class="col-4">col</div>
   </div>
   <div class="row justify-content-around">
      <div class="col-4">col</div>
      <div class="col-4">col</div>
   </div>
   <div class="row justify-content-between">
      <div class="col-4">col</div>
      <div class="col-4">col</div>
   </div>
</div>

Изменение порядка и смещение блоков

За изменение порядка отображения столбцов в ряду отвечает класс .order-?. Устанавливать порядок можно отдельно для каждой контрольной точки, для этого добавляем префикс брейкпоинта, например:  .order-md-1.

<div class="container">
   <div class="row">
      <div class="col order-12">Первый, но всегда будет отображаться последним.</div>
      <div class="col">Второй, но отображается самым первым, так как не задан класс order-? и поэтому не участвует в сортировке.</div>
      <div class="col order-2 order-md-1">Третий, но на col-md будет отображаться вторым, а на col-sm и col- снова третьим.</div>
      <div class="col order-1 order-md-1">Четвертый, но на col-md будет отображаться третьим, а на col-sm и col- вторым.</div>
   </div>
</div>

Существует еще один класс .order-first, который принудительно делает блок первым, независимо установлены для других столбцов .order-? или нет.

<div class="container">
   <div class="row">
      <div class="col">Первый неупорядоченный, отображается вторым.</div>
      <div class="col">Второй неупорядоченный, отображается третьим.</div>
      <div class="col col order-first">Третий, но всегда будет отображаться первым.</div>
   </div>
</div>

Смещение блоков вправо, производится при помощи класса .offset-{breakpoint}-?.

Смещение столбцов используя offset

<div class="container">
   <div class="row">
      <div class="col-md-4">col-md-4</div>
      <div class="col-md-4 offset-md-4">col-md-4 offset-md-4</div>
   </div>
   <div class="row">
      <div class="col-md-3 offset-md-3">col-md-3 offset-md-3</div>
      <div class="col-md-3 offset-md-3">col-md-3 offset-md-3</div>
   </div>
   <div class="row">
      <div class="col-md-6 offset-md-3">col-md-6 offset-md-3</div>
   </div>
</div>

Кроме .offset-? фреймворк предлагает еще два класса (.ml-auto и .mr-auto) для смещения столбцов, которые применяют к блокам стили: margin-left: auto; и margin-right: auto;. Ну, и конечно, не забываем за контрольные точки: .ml-{breakpoint}-auto и .mr-{breakpoint}-auto.

Смещение столбцов используя ml-auto и mr-auto

<div class="container">
   <div class="row">
      <div class="col-md-4">col-md-4</div>
      <div class="col-md-4 ml-auto">col-md-4 ml-auto</div>
   </div>
   <div class="row">
      <div class="col-md-3 ml-md-auto">col-md-3 ml-md-auto</div>
      <div class="col-md-3 ml-md-auto">col-md-3 ml-md-auto</div>
   </div>
   <div class="row">
      <div class="col-auto mr-auto">col-auto mr-auto</div>
      <div class="col-auto">col-auto</div>
   </div>
</div>

Основные принципы использования сетки Bootstrap 4

Используя фреймворк Bootstrap, верстка web-страниц производится гораздо быстрей и легче, чем без него. Здесь главное понять сам принцип работы сетки, на самом деле все очень просто, сначала идет оберточный контейнер, в него вложен ряд, а в ряд вложены столбцы. Присваивая специальные классы, отвечающие за контрольные точки ширины «viewport» браузера, блоки подстраиваются под разные устройства. Вот пример разметки простенькой web-страницы.

Пример макета веб-страницы

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>Bootstrap 4 - Сетка</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- Подключение стилей Bootstrap-->
</head>
<body>
   <div class="container">
      <div class="row">
         <div class="col">Header</div>
      </div>
      <div class="row">
         <div class="col-lg-9">Content</div>
         <div class="col-lg-3">Sidebar</div>
      </div>
      <div class="row">
         <div class="col">Footer</div>
      </div>
   </div>
   <!-- Подключение скриптов jQuery и Bootstrap-->
</body>
</html>

При ширине видимой части окна браузера меньше 992px, ширина блоков «Content» и «Sidebar» будет равна 100%, а при ширине «viewport» больше или равной 992px, ширина блоков будет равна количеству колонок, которое указывается в заданных столбцам классах .col-lg-?.

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

<div class="container">
   <div class="row">
      <div class="col-9">
         <div class="row">
            <div class="col">...</div>
            <div class="col">...</div>
            <div class="col">...</div>
         </div>
      </div>
      <div class="col-3">...</div>
   </div>
</div>

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

Похожие записи: Что нового в Bootstrap 4 и в чем отличие от Bootstrap 3? Bootstrap аккордеон: panel и collapse разбор и использование Переопределение стилей Bootstrap используя препроцессор Less Слайдер Bootstrap: как поменять вид анимации карусели?

Добавить комментарийОтменить ответ

Нажимая на кнопку «Добавить», я даю согласие на обработку своих персональных данных в соответствии с политикой конфиденциальности