От автора: в Bootstrap 4 в систему сеток, с которой мы все знакомы с третьей версии, было внесено несколько изменений. Была добавлена новая сетка XL, изменились некоторые классы-модификаторы, а также появилась совершенно новая система сеток на flexbox.
Обычная сетка и flexbox несовместимы, придется выбирать, под чем работать в своих проектах. Чтобы помочь вам выбрать, в этой статье мы разберем все различия двух систем. Для еще более простого сравнения мы подготовили различные примеры сеток, реализованные в обоих режимах.
1. Установка
Самый распространенный способ подключить Bootstrap к проекту – CDN или через локальный файл. Есть две скомпилированные версии, для flexbox и обычная:
|
1 2 3 4 5 |
<!-- Обычный Bootstrap --> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" > <!-- Bootsrap с сеткой Flexbox --> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css" rel="stylesheet" > |
Тем, кто компилирует свой Bootstrap, необходимо включить переменную $enable-flex в главном файле настроек Sass: _variables.scss
|
1 |
$enable-flex = true; |
В плане веса flexbox версия весит чуть-чуть больше из-за дополнительных правил и вендорных префиксов. Однако различие несильное (119Кб против 105Кб), в большинстве случаев никакой разницы не будет.
2. Стандартная сетка
Сегодня уже все знают, как работает сетка в Bootstrap. Есть строка, разбитая на 12 равных частей, внутри которой идут столбцы. Каждый столбец может занимать от 1 до 12 частей:
|
1 2 3 4 5 |
<div class="row"> <div class="col-xs-2">.col-xs-2</div> <div class="col-xs-4">.col-xs-4</div> <div class="col-xs-6">.col-xs-6</div> </div> |
Новый режим flexbox позволяет макету автоматически подбирать количество колонок. Размер указывать больше не нужно.
|
1 2 3 4 5 |
<div class="row"> <div class="col-xs">.col-xs</div> <div class="col-xs">.col-xs</div> <div class="col-xs">.col-xs</div> </div> |
Безразмерные колонки в сетке flexbox будут поровну делить доступное пространство, всегда заполняя весь ряд. Класс .col-xs-size все еще позволяет изменять размер колонок.
Чтобы помочь вам представить две системы, мы подготовили демо обеих сеток. Скриншот из демо показан ниже:
3. Переход колонок на новую строку
Когда колонок в строке становится больше 12, тринадцатая колонка перепрыгивает на следующую строку. Эффект называется переход столбца и работает одинаково в обычной сетке и flex-bootstrap.
|
1 2 3 4 5 |
<div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-3">.col-xs-3, This column will move to the next line.</div> </div> |
Единственное, на что стоит обратить внимание, это то, что в режиме автомакетирования безразмерная колонка может растянуться на всю строку, если она не вместилась на предыдущей.
4. Адаптивная сетка
Во вступлении мы упомянули новый вид сетки, XL. Медиа запросы теперь выглядят так:
Extra small (xs) – ниже 576px
Small (sm) – от 576px до 768px
Medium (md) – от 768px до 992px
Large (lg) – от 992px до 1200px
Extra Large (xl) – выше 1200px
5. Высота колонок
Старые сетки работали на обтеканиях, поэтому все колонки были разной высоты. Высота определялась контентом.
В flexbox макетах все ячейки в строке имеют высоту колонки с наибольшим контентом.
6. Горизонтальное выравнивание
В обычном Bootstrap горизонтальное позиционирование колонок выполняется через систему смещений. Смещения работают, как пустые колонки, и позволяют сдвигать элементы вправо (например, .offset-xs-3 сдвигает колонку на 3 вправо). Такой подход сильно раздражает, так как нам необходимо вручную настраивать сдвиг.
|
1 2 3 |
<div class="row"> <div class="col-xs-6 offset-xs-3">This column is now centered.</div> </div> |
Благодаря свойству justify-content, чтобы сместить колонку в flex bootstrap по горизонтали, достаточно добавить правильный класс.
|
1 2 3 |
<div class="row flex-items-xs-center"> <div class="col-xs-6">All columns in that row will be automatically centered.</div> </div> |
Если хотите использовать сдвиги, пожалуйста!
7. Вертикальное выравнивание
В обычном Bootstrap нельзя производить вертикальное выравнивание. Единственный способ добиться вертикального позиционирования – использовать пользовательский CSS, что зачастую засоряет код.
Flexbox же отлично справляется с выравниванием в макете и дает нам целых два способа вертикального позиционирования колонок:
|
1 2 3 4 5 6 7 8 9 |
<div class="row flex-items-xs-middle"> <div class="col-xs"> Middle </div> </div> <div class="row flex-items-xs-bottom"> <div class="col-xs"> Bottom </div> </div> <div class="row flex-items-xs-top"> <div class="col-xs"> Top </div> </div> |
Выравнивайте столбцы в строке отдельно друг от друга:
|
1 2 3 4 5 |
<div class="row"> <div class="col-xs flex-xs-middle"> Middle </div> <div class="col-xs flex-xs-bottom"> Bottom </div> <div class="col-xs flex-xs-top"> Top </div> </div> |
8. Сортировка колонок
В обычной системе сеток, если нам необходимо поменять порядок колонок, нам нужно использовать push и pull. Не лучшее дизайнерское решение, но оно работает.
|
1 2 3 4 |
<div class="row"> <div class="col-xs-4 push-md-8"> On MD screens this column will move 8 spaces to the right. </div> <div class="col-xs-8 pull-md-4"> On MD screens this column will move 4 spaces to the left.</div> </div> |
Кто раньше уже работал с flexbox, знает, что там есть встроенное свойство order. Разработчики Bootstrap реализовали его на основе трех классов сортировки:
.flex-xs-first – отображается первым.
.flex-xs-last – отображается последним.
.flex-xs-unordered – отображается между первым и последним.
Вручную вычислять ничего не нужно. Если нужно отсортировать более трех колонок, что бывает редко, можно использовать push/pull или свойство order в CSS.
Заключение
Если еще раз вернуться к основным пунктам статьи, становится ясно, что flexbox — более продвинутая и универсальная система сеток. Flexbox версия включает в себя все из обычной сетки, плюс свои функции. Единственный недостаток bootstrap-flex – это отсутствие поддержки в IE9.
Так мы заканчиваем наше сравнение систем сеток в новом Bootstrap 4. Добавляйте в закладки страницу с демо, чтобы иметь их всегда под рукой. Надеемся, статья оказалась полезной! Удачно покодить 🙂
Автор: Danny Markov
Источник: //tutorialzine.com/
Редакция: Команда webformyself.
Комментарии (2)