Вы здесь: Главная » Bootstrap » Сетка Bootstrap 4

Сетка Bootstrap 4

Сетка Bootstrap 4 - это, пожалуй, самое "вкусное" в этом фреймворке, т.к. именно из-за сетки с ее адаптивными возможностями Bootstrap стал самой популярной системой для верстки. И, если в 3-й версии Bootstrap колонки с точки зрения css базировались на свойстве float: left, то в 4-ой версии основой разбиения блока на колонки стала модель Flexbox.

Классы-контейнеры

Но начнем мы не с самой сетки, а с классов-контейнеров, в которые обычно помещаются колонки. Как и в BS3, эти классы имеют название .container и .container-fluid. Общее в правилах для этих классов - это отступы слева и справа в 15px (padding-left: 15px и padding-right: 15px). Отличаются же они тем, что класс .container-fluid имеет ширину в 100% и занимает все доступное пространство по ширине окна браузера, причем при любом разрешении экрана, а класс .container имеет для разных разрешений фиксированную ширину, представленную в таблице:

Extra small
Extra small
<576px
Small
Small
≥576px
Medium
Medium
≥768px
large
Large
≥992px
Extra large
Extra large
≥1200px
Максимальная
ширина контейнера.container
Нет (auto) 540px 720px 960px 1140px
Префикс класса .col- .col-sm- .col-md- .col-lg- .col-xl-
Число колонок 12
Ширина отступа 30px (15px с каждой стороны столбца)
Может быть вложенным Да
Упорядочивание колонок Да

Стили контейнеров

Размещение колонок

Класс .colВсе колонки, которые вы хотите разместить в одном ряду, следует в обязательном порядке размещать в div с классом .row, т.к. именно этот класс имеет свойство display: flex.

Чтобы создать несколько колонок одинаковой ширины, достаточно назначить элементу div класс .col. Вы не увидите особых изменений и перестраивания колонок при уменьшении экрана. Основными правилами для этого класса являются:

Поэтому только при значительном уменьшении экрана колонки перестраиваются.

Колонки для всех устройств

Также можно использовать классы, которые делят пространство контейнера на равные части, исходя из 12 колонок в нем. Например, 3 колонки с классами .col-4 или 2 колонки с классами .col-6, или 6 колонок с классами .col-2 и т.п. Также можно использовать эти классы в другом сочетании, например, класс .col-9 и класс .col-3. Минусом этого варианта построения сетки является то, что колонки остаются колонками при любом разрешении экрана и не перестраиваются в одну даже на смартфонах. Поэтому в таблице выше этот класс указан для создания колонок для extra-small (очень маленьких) устройств.

Стили классов .col-* будут выглядеть примерно так:

Изменяться будут только значения свойств flex-basis (последняя цифра свойства flex) и max-width в зависимости от цифры (чем меньше цифра, тем больше значения свойств).

В основе примера ниже лежит следующая разметка:

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

See the Pen Bootstrap 4 .col-* class by Elen (@ambassador) on CodePen.dark

Классы адаптивной сетки

И, наконец, мы добрались до классов, которые перестаиваются в зависимости от разрешения экрана. Собственно, они уже были представлены в таблице. Все классы начинаются со слова col (от англ. column - столбец или колонка) и префикса -xl-, -lg-, -md-, -sm-, после которого идет цифра. Цифра получается путем деления 12 (максимальное количество столбцов в сетке Bootstrap) на нужное вам количество колонок. Например, для 2-х колонок равной ширины вам понадобятся классы с цифрой 6 в конце (12:2=6), для 3-х колонок - классы с цифрой 4 (12:3=4), для 4-х колонок - классы с цифрой 3 (12:4=3), для 6-и колонок - классы с цифрой 2 (12:6=2).

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

Рассмотрим их применение для 3-хколоночного макета. Нам понадобится 3 колонки с классами .col-xl-4.col-lg-4.col-md-4 и .col-sm-4. Если уменьшать размер экрана, то все колонки будут перестраиваться в одну. Вот только произойдет это на разных разрешениях. Позже всех перестроятся в один столбец div-ы с классами .col-sm-4.

See the Pen Bootstrap 4 Grid by Elen (@ambassador) on CodePen.dark

Вы можете посмотреть на внешний вид колонок в отдельном файле, изменяя размер окна браузера или с помощью  Device Toolbar в инспекторе свойств  браузера Chrome или Firefox.

Если вы хотите разделить внутреннее пространство одной из колонок на части, вам нужно также исходить из того, что ширина родительского элемента для дочерних делится на 12 колонок. Соответственно, вы формируете классы, исходя из того, сколько колонок вам нужно: если 2, то используете классы col-6, если 3, то классы col-4 и т.п., помещаете их внутри класса row, но при этом блок .row колонок находится внутри родительского элемента.

See the Pen Внутренние колонки Bootstrap 4 by Elen (@ambassador) on CodePen.dark

Колонки разной ширины

Для построения колонок разной ширины вам, как правило, придется исходить из цифры 12, которую в сумме должны составлять колонки разных классов. Например, .col-sm-8 и .col-sm-4 или .col-sm-2 и .col-sm-10, если вы делаете двухколоночный макет. Для трехколоночного макета можно использовать такие сочетания классов: .col-md-3 и .col-md-6 и .col-md-3 или .col-md-3 и .col-md-7 и .col-md-2.

See the Pen Bootstrap 4 2-column Grid by Elen (@ambassador) on CodePen.dark

Ссылка на документацию

В Bootstrap-4 существует много вариантов использования классов сетки, которое мы рассмотрим в другой статье.

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

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