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

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

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

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

1. Установка

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

<!-- Обычный Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" >

<!-- Bootsrap с сеткой Flexbox -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css" rel="stylesheet" >

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

$enable-flex = true;

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

2. Стандартная сетка

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

<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 позволяет макету автоматически подбирать количество колонок. Размер указывать больше не нужно.

<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 все еще позволяет изменять размер колонок.

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

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

3. Переход колонок на новую строку

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

<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>

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

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

4. Адаптивная сетка

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

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

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

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

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

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

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

5. Высота колонок

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

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

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

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

6. Горизонтальное выравнивание

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

<div class="row">
    <div class="col-xs-6 offset-xs-3">This column is now centered.</div>
</div>

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

<div class="row flex-items-xs-center">
    <div class="col-xs-6">All columns in that row will be automatically centered.</div>
</div>

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

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

7. Вертикальное выравнивание

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

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

<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>

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

<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>

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

8. Сортировка колонок

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

<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.

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

Заключение

Если еще раз вернуться к основным пунктам статьи, становится ясно, что flexbox — более продвинутая и универсальная система сеток. Flexbox версия включает в себя все из обычной сетки, плюс свои функции. Единственный недостаток bootstrap-flex – это отсутствие поддержки в IE9.

Так мы заканчиваем наше сравнение систем сеток в новом Bootstrap 4. Добавляйте в закладки страницу с демо, чтобы иметь их всегда под рукой. Надеемся, статья оказалась полезной! Удачно покодить :)

Автор: Danny Markov

Источник: http://tutorialzine.com/

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Ребёнок и мама

    flexbox существует и сам по себе. Если уж использовать flexbox, то нету, абсолютно нету никакого смысла использовать Bootstrap. Он сам по себе — мощное средство. Если изучить его — не понадобятся костыли вроде Bootstrap — с Bootstrap подключается куча файлов, стили… зачем лишняя нагрузка на хостинг? Она просто не нужна. Есть неплохие реализации на flexbox, мы уже не раз использовали только его.

    • Юрий

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree