Основные макеты сетки, чтобы вы познакомились со сборкой в системе сетки Bootstrap.
В этих примерах .themed-grid-col
класс добавляется к столбцам, чтобы добавить некоторые темы. Это не тот класс, который доступен в Bootstrap по умолчанию.
Система сетки Bootstrap состоит из пяти уровней, по одному для каждого диапазона поддерживаемых нами устройств. Каждый уровень начинается с минимального размера окна просмотра и автоматически применяется к более крупным устройствам, если это не переопределено.
Получите три столбца одинаковой ширины, начиная с рабочих столов и масштабируя их до больших компьютеров . На мобильных устройствах, планшетах и более ранних версиях столбцы будут автоматически складываться.
Получите три столбца , начиная с рабочих столов и масштабируя их до больших рабочих столов различной ширины. Помните, что столбцов сетки должно быть до двенадцати для одного горизонтального блока. Более того, столбцы начинают складываться независимо от области просмотра.
Получите два столбца , начиная с рабочих столов и масштабируя их до больших рабочих столов .
Для элементов полной ширины не требуются классы сетки.
Согласно документации, вложение очень просто — просто поместите ряд столбцов в существующий столбец. Это дает вам два столбца, начиная с рабочих столов и масштабируясь до больших рабочих столов , а еще два (равной ширины) находятся внутри большего столбца.
При размерах мобильных устройств, планшетов и ниже эти столбцы и их вложенные столбцы будут складываться.
Сеточная система Bootstrap v4 имеет пять уровней классов: xs (очень маленький), sm (маленький), md (средний), lg (большой) и xl (очень большой). Вы можете использовать почти любую комбинацию этих классов для создания более динамичных и гибких макетов.
Каждый уровень классов масштабируется, то есть, если вы планируете установить одинаковую ширину для xs и sm, вам нужно указать только xs.