Примеры сетки Bootstrap
Основные макеты сетки, чтобы вы познакомились со сборкой в системе сетки Bootstrap.
В этих примерах .themed-grid-col
класс добавляется к столбцам, чтобы добавить некоторые темы. Это не тот класс, который доступен в Bootstrap по умолчанию.
Пять уровней сетки
Система сетки Bootstrap состоит из пяти уровней, по одному для каждого диапазона поддерживаемых нами устройств. Каждый уровень начинается с минимального размера окна просмотра и автоматически применяется к более крупным устройствам, если это не переопределено.
Три равных столбца
Получите три столбца одинаковой ширины, начиная с рабочих столов и масштабируя их до больших компьютеров . На мобильных устройствах, планшетах и более ранних версиях столбцы будут автоматически складываться.
Альтернатива трем равным столбцам
Используя .row-cols-*
классы, вы можете легко создать сетку с одинаковыми столбцами.
.col
ребенок
.row-cols-md-3
.col
ребенок
.row-cols-md-3
.col
ребенок
.row-cols-md-3
Три неравных столбца
Получите три столбца , начиная с рабочих столов и масштабируя их до больших рабочих столов различной ширины. Помните, что столбцов сетки должно быть до двенадцати для одного горизонтального блока. Более того, столбцы начинают складываться независимо от области просмотра.
Две колонки
Получите два столбца , начиная с рабочих столов и масштабируя их до больших рабочих столов .
Полная ширина, один столбец
Для элементов полной ширины не требуются классы сетки.
Два столбца с двумя вложенными столбцами
Согласно документации, вложение очень просто — просто поместите ряд столбцов в существующий столбец. Это дает вам два столбца, начиная с рабочих столов и масштабируясь до больших рабочих столов , с еще двумя (равной ширины) внутри большего столбца.
При размерах мобильных устройств, планшетов и ниже эти столбцы и их вложенные столбцы будут складываться.
Смешанный: мобильный и настольный
Сеточная система Bootstrap v4 имеет пять уровней классов: xs (очень маленький, этот инфикс класса не используется), sm (маленький), md (средний), lg (большой) и xl (очень большой). Вы можете использовать почти любую комбинацию этих классов для создания более динамичных и гибких макетов.
Каждый уровень классов масштабируется, то есть, если вы планируете установить одинаковую ширину для md, lg и xl, вам нужно указать только md.
Смешанный: мобильный, планшетный и настольный
Желоба
С помощью .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
точку останова.