Примеры сетки bootstrap

Базовые макеты сеток, чтобы познакомить вас со строительством в сеточной системе Bootstrap.

В этих примерах .themed-grid-col класс добавляется к столбцам, чтобы добавить тематику. Это не тот класс, который по умолчанию доступен в Bootstrap.

Пять уровней сетки

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

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

Три равных столбца

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

.col-md-4
.col-md-4
.col-md-4

Альтернатива трех равных столбцов

Используя .row-cols-*классы, вы можете легко создать сетку с равными столбцами.

.col ребенок .row-cols-md-3
.col ребенок .row-cols-md-3
.col ребенок .row-cols-md-3

Три неравных столбца

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

.col-md-3
.col-md-6
.col-md-3

Две колонки

Получите две колонки, начиная с рабочих столов и заканчивая большими рабочими столами .

.col-md-8
.col-md-4

Полная ширина, один столбец

Для полноширинных элементов классы сетки не требуются.

Два столбца с двумя вложенными столбцами

Согласно документации, вложение очень просто - просто поместите строку столбцов в существующий столбец. Это дает вам два столбца, начиная с рабочих столов и масштабируясь до больших рабочих столов , с еще двумя (равной ширины) в пределах большего столбца.

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

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Смешанный: мобильный и настольный

Сеточная система Bootstrap v4 имеет пять уровней классов: xs (очень маленький, этот инфикс класса не используется), sm (маленький), md (средний), lg (большой) и xl (очень большой). Вы можете использовать практически любую комбинацию этих классов для создания более динамичных и гибких макетов.

Каждый уровень классов масштабируется, это означает, что если вы планируете установить одинаковую ширину для md, lg и xl, вам нужно только указать md.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Смешанный: мобильный, планшетный и настольный

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Gutters

С .gx-*классами можно регулировать горизонтальные желоба.

.col с .gx-4 желобами
.col с .gx-4 желобами
.col с .gx-4 желобами
.col с .gx-4 желобами
.col с .gx-4 желобами
.col с .gx-4 желобами

Используйте .gy-*классы для управления вертикальными желобами.

.col с .gy-4 желобами
.col с .gy-4 желобами
.col с .gy-4 желобами
.col с .gy-4 желобами
.col с .gy-4 желобами
.col с .gy-4 желобами

С .g-*классами желоба в обоих направлениях можно регулировать.

.col с .g-3 желобами
.col с .g-3 желобами
.col с .g-3 желобами
.col с .g-3 желобами
.col с .g-3 желобами
.col с .g-3 желобами