Примеры сетки 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 v5 имеет шесть уровней классов: xs (очень малый, этот индекс класса не используется), sm (маленький), md (средний), lg (большой), xl (x-большой) и xxl (xx). -большой). Вы можете использовать почти любую комбинацию этих классов для создания более динамичных и гибких макетов.

Каждый уровень классов масштабируется, то есть, если вы планируете установить одинаковую ширину для md, lg, xl и xxl, вам нужно указать только 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

Промежутки

В классах .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

Контейнеры

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

.container
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.container-fluid