Bootstrap 4: обычная сетка или flexbox

От автора: в Bootstrap 4 в систему сеток, с которой мы все знакомы с третьей версии, было внесено несколько изменений. Была добавлена новая сетка XL, изменились некоторые классы-модификаторы, а также появилась совершенно новая система сеток на flexbox.

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

Самый распространенный способ подключить Bootstrap к проекту – CDN или через локальный файл. Есть две скомпилированные версии, для flexbox и обычная:

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Тем, кто компилирует свой Bootstrap, необходимо включить переменную $enable-flex в главном файле настроек Sass: _variables.scss

В плане веса flexbox версия весит чуть-чуть больше из-за дополнительных правил и вендорных префиксов. Однако различие несильное (119Кб против 105Кб), в большинстве случаев никакой разницы не будет.

Сегодня уже все знают, как работает сетка в Bootstrap. Есть строка, разбитая на 12 равных частей, внутри которой идут столбцы. Каждый столбец может занимать от 1 до 12 частей:

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

Безразмерные колонки в сетке flexbox будут поровну делить доступное пространство, всегда заполняя весь ряд. Класс .col-xs-size все еще позволяет изменять размер колонок.

Чтобы помочь вам представить две системы, мы подготовили демо обеих сеток. Скриншот из демо показан ниже:

Когда колонок в строке становится больше 12, тринадцатая колонка перепрыгивает на следующую строку. Эффект называется переход столбца и работает одинаково в обычной сетке и flex-bootstrap.

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

Во вступлении мы упомянули новый вид сетки, XL. Медиа запросы теперь выглядят так:

Extra small (xs) – ниже 576px

Small (sm) – от 576px до 768px

Medium (md) – от 768px до 992px

Large (lg) – от 992px до 1200px

Extra Large (xl) – выше 1200px

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

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

В flexbox макетах все ячейки в строке имеют высоту колонки с наибольшим контентом.

В обычном Bootstrap горизонтальное позиционирование колонок выполняется через систему смещений. Смещения работают, как пустые колонки, и позволяют сдвигать элементы вправо (например, .offset-xs-3 сдвигает колонку на 3 вправо). Такой подход сильно раздражает, так как нам необходимо вручную настраивать сдвиг.

Благодаря свойству justify-content, чтобы сместить колонку в flex bootstrap по горизонтали, достаточно добавить правильный класс.

Если хотите использовать сдвиги, пожалуйста!

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

Flexbox же отлично справляется с выравниванием в макете и дает нам целых два способа вертикального позиционирования колонок:

Выравнивайте столбцы в строке отдельно друг от друга:

В обычной системе сеток, если нам необходимо поменять порядок колонок, нам нужно использовать push и pull. Не лучшее дизайнерское решение, но оно работает.

Кто раньше уже работал с 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

Редакция: Команда webformyself.

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля!