Сетка bootstrap 4. Что нового?

18 января 2018 года случилось важное событие - вышла из беты четвертая версия bootstrap. Далее мы рассмотрим все нововведения и отличия сетки bootstrap 3 от сетки bootstrap 4.

Технология Flexbox

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

Параметры сетки по-умолчанию

Сетка по сути осталась прежней, но перенесла некоторые изменения

Появился новый брейкпоинт xl (Extra large)

Новый брейкпоинт который теперь отвечает за разрешение >1200px (xl) . Все остальные сдвинулись на один уровень вниз, и последний, самый нижний, теперь отвечает за разрешение < 576px (xs)

У xs (Extra small) больше нет префикса

Теперь класс нижнего брейкпоинта выглядит так col-n (не пишеться префикс xs)

Пример:

<div class='col-6'>...</div>

вместо

<div class='col-xs-6'>...</div>

Автоматическая разметка колонок

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

<div class="container">
	<div class="row">
		<div class="col">
			1 из 2
		</div>
		<div class="col">
			2 из 2
		</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">
      1 из 3
    </div>
    <div class="col-6">
      2 из 3 (широкая)
    </div>
    <div class="col">
      3 из 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col-5">
      2 из 3 (широкая)
    </div>
    <div class="col">
      3 из 3
    </div>
  </div>
</div>

В этом примере второй элемент в первом ряду имеет класс col-6 и он занимает соответствущее количество колонок на всех разрешениях экрана. Ширина остальных колонок в этом ряду вычисляется автоматически, занимая все оставшееся пространство.

Контент переменной ширины

Можно использовать col-[breakpoint]-auto чтобы определить колонку с шириной в зависимости от пространства занимаемого содержимым.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 из 3
    </div>
    <div class="col-md-auto">
		Контент переменной ширины
    </div>
    <div class="col col-lg-2">
      3 из 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col-md-auto">
		Контент переменной ширины
    </div>
    <div class="col col-lg-2">
      3 из 3
    </div>
  </div>
</div>

Здесь центральные колонки занимают ширину, соответствующую ширине содержимого. В первом ряду .row имеет класс justify-content-sm-center - весь ряд центрируется и общая ширина складывается из ширины центральной колонки и двух колонок .col-md-2

Второй ряд не имеет центрирующего класса и растягивается на всю ширину, но вторая колонка col-sm-auto имеет ширину в зависимости от содержимого

Мульти-ряд

В новой версии вы можете сделать в одном ряду несколько строк, с помощью переносов, реализовать это можно с помощью класса w-100, который по сути работает как тег <br>, только для колонок

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

Адаптивные классы

Брейкпоинты

Используя упомянутый ранее класс col с добавление количества колонок, например: col-6 можно получить элемент который будет занимать одинаковое количество колонок на всех разрешениях, кроме того эта возможность используется в замену префиксу bootstrap 3 xs

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

На мобильных устройствах

Используйте префикс класса .col-sm-[n] для того, чтобы задать сетку на всех разрешениях, кроме самых маленьких, на них колонки будут складываться друг под друга.

<div class="row">
	<div class="col-sm-8">col-sm-8</div>
	<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
	<div class="col-sm">col-sm</div>
	<div class="col-sm">col-sm</div>
	<div class="col-sm">col-sm</div>
</div>

Создание сложной комбинированной сетки

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

<!-- На мобильных устройствах: Первая колонка - на полную ширину, вторая на половину -->
<div class="row">
    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- На десктопе: 3 колонки по 4 в каждой. На мобильных: все колонки вполовину контейнера -->
<div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Колонки занимают 6 из 12 колонок на любом разрешении -->
<div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
</div>

Выравнивание

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

<div class="row align-items-start">
    <div class="col">Верх</div>
    <div class="col">Верх</div>
    <div class="col">Верх</div>
</div>
<div class="row align-items-center">
    <div class="col">Середина</div>
    <div class="col">Середина</div>
    <div class="col">Середина</div>
</div>
<div class="row align-items-end">
    <div class="col">Низ</div>
    <div class="col">Низ</div>
    <div class="col">Низ</div>
</div>

Соответственно align-items-start выравнивание по верху, align-items-center выравнивание по центру, align-items-end выравнивание по низу

Также вы можете задавать выравнивание отдельным колонкам

<div class="row">
    <div class="col align-self-start">Верх</div>
    <div class="col align-self-center">Середина</div>
    <div class="col align-self-end">Низ</div>
</div>

align-self-start выравнивание по верху, align-self-center выравнивание по центру, align-self-end выравнивание по низу

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

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

Удаление полей между колонками

Иногда встречаются ситуации, когда необходимо убрать поля между колонками. Напримеркогда элементы должны быть расположены вплотную. Для этого достаточно у элемента «.row» задать дополнительный класс no-gutters.

<div class="row no-gutters">
    <div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
    <div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
    <div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
    <div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
    <div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
    <div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
    <div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
    <div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
    <div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
</div>

Перенос колонок на новую строку

Если ряд row заполняется количеством колонок более 12, то последующая колонка переносится на новую строку.

<div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>9 + 4 = 13 колонок - это больше 12. Данный элемент шириной в 4 колонки будет перенесён на новую строку.</div>
    <div class="col-6">.col-6<br>Следующие колонки расположатся вдоль строки.</div>
</div>

Порядок элементов

Классы порядка элементов

Для определения порядка элементов можно использовать специальные классы с префиксом order-[n]. Если вы знакомы с версткой на flexbox, данные правила будут вам знакомы. В новом bootstrap у нас есть возможность задавать порядок элементов с помощью классов. Можно задавать порядок напрямую .order-1.order-md-2

<div class="row">
    <div class="col">Первый неупорядоченный элемент</div>
    <div class="col order-12">Второй, упорядоченный как последний</div>
    <div class="col order-1">Третий, упорядоченный как первый</div>
</div>

Еще можно использовать специальные классы, которые определяют порядок первый и последний элемент order-first, order-last

<div class="row">
    <div class="col">Первый неупорядоченный</div>
    <div class="col order-last">Второй, упорядоченный как последний</div>
    <div class="col order-first">Третий, упорядоченный как первый</div>
</div>

Смещение колонок

Классы смещения

Отступы у колонок можно делать только слева, используя классы offset-[breakpoint]-[n] . Из примера ниже, offset-md-2 сдвинет колонку col-md-4 на 2 колонки вправо.

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

Отступ на всех разрешениях можно сбрасывать классом .offset-[breakpoint]-0

Вложенность

Bootstrap 4 поддерживает вложенность элементов. Здесь все работает также, как в третьей версии - чтобы вложить колонки в другие, необходимо создать дочерний элемент с классом row в него и вкладывать колонки.

<div class="row">
    <div class="col-sm-9">Уровень 1: col-sm-9
        <div class="row">
            <div class="col-8 col-sm-6">Уровень 2: col-8 col-sm-6</div>
            <div class="col-4 col-sm-6">Уровень 2: col-4 col-sm-6</div>
        </div>
    </div>
</div>

Мы рассмотрели основные особенности сетки bootstrap 4 и отличия от bootstrap 3. Нововведений много, и на мой взляд, они только положительные.

Также вы можете ознакомиться с документацией фреймворка.

Перейти на главную страницу