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

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

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

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

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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

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

.col-md-4

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

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

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

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

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

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

.col-MD-8

.col-6 .col-MD-4

.col-6

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

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Желоба

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

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

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

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

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

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

Контейнеры

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

.контейнер

.container-см

.container-md

.container-lg

.контейнер-xl

.контейнер-xxl

.контейнерная жидкость