Базовые макеты сеток, чтобы познакомить вас со строительством в сеточной системе 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
желобами