Несколько наиболее распространенных примеров компоновки сетки, с которыми можно ознакомиться
построение в системе сетки 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-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-md-4
.col-md-4
. col-md-4
Показать код
Изменить в песочнице
<дел>
.col-md-4
.col-md-4
.col-md-4
Три неравных столбца
Получить три столбца , начиная с настольных компьютеров и масштабируясь до больших настольных компьютеров из
различной ширины. Помните, столбцы сетки должны составлять до двенадцати для
один горизонтальный блок. Более того, и столбцы не начинают складываться
дело в окне просмотра.
.col-md-3
.col-md-6
.col-md-3
Показать код
Изменить в песочнице
<дел>
. col-md-3
.col-md-6
.col-md-3
Две колонки
Получить два столбца начиная с настольных компьютеров и масштабируя их до больших компьютеров .
.col-md-8
.col-md-4
Показать код
Изменить в песочнице
<дел>
.col-md-8
.col-md-4
Два столбца с двумя вложенными столбцами
Согласно документации, вложение выполняется легко — просто поместите строку столбцов в
существующий столбец. Это дает вам два столбца , начиная с настольных компьютеров и масштабируясь до больших настольных компьютеров ,
с еще двумя (равной ширины) внутри большего столбца.
При размерах мобильных устройств, планшетов и ниже эти столбцы и их вложенные
столбцы будут складываться.
.col-md-8
.col-md-6
.col-md-6
.col-md-4
Показать код
Изменить в песочнице
<дел>
<дел>
<дел>
.col-MD-8
<дел>
.col-md-6
.col-md-6
.col-md-4
Смешанный: мобильный и настольный
Сеточная система Bootstrap v5 имеет пять уровней классов: xs (очень маленький,
этот инфикс класса не используется), sm (маленький), md (средний), lg (большой) и
XL (очень большой). Вы можете использовать почти любую комбинацию этих классов для
создавать более динамичные и гибкие макеты.
Каждый уровень классов увеличивается, а это означает, что если вы планируете установить одинаковые
ширины для md, lg и xl нужно указать только md.
«BuildBootstrap — это простой веб-инструмент, помогающий создавать сложные адаптивные макеты с помощью системы сеток Bootstrap. Он позволяет экспортировать созданную разметку в виде готового HTML-документа.
BuildBootstrap — это одностраничное веб-приложение, созданное на основе Bootstrap, Vue.js и Vuex. Это абсолютно бесплатно, регистрация не требуется.»
col-4
.col-4
.col-4
col-4
col-md-4
col-md-3
Вы можете использовать почти любую комбинацию этих классов для
создавать более динамичные и гибкие макеты.
col-6
com 