Примеры сетки 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-md-4
.col-md-4
.col-md-4

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

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

.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

Контейнеры

Дополнительные классы, добавленные в Bootstrap v4.4, позволяют использовать контейнеры со 100% шириной до определенной точки останова.

.контейнер
.container-см
.container-md
.container-lg
.контейнер-xl
.контейнерная жидкость