В этом уроке мы рассмотрим систему сеток Bootstrap 5.
Сетчатая система Bootstrap 5
Сетка Bootstrap — это мощная система для построения макетов, ориентированных на мобильные устройства. Это очень обширный инструмент с большим количеством опций.
Использование системы Bootstrap Gid:
Система сетки Bootstrap позволяет пользователям создавать отзывчивые макеты.
Мы можем использовать ее для перестановки макета сайта в зависимости от размера экрана.
Пример:
Используя систему сеток bootstrap, мы можем создать страницу, которая будет иметь разный макет на настольном компьютере (правый верхний угол) и планшете (правый нижний угол).
Базовый пример системы сеток Bootstrap
Система сеток Bootstrap использует серию контейнеров, рядов и столбцов для компоновки и выравнивания содержимого. Она построена с использованием flexbox и является полностью отзывчивой. Ниже приведен пример и подробное объяснение того, как устроена система сетки.
<div class="container">
<div class="row">
<div class="col-md">
One of three columns
</div>
<div class="col-md">
One of three columns
</div>
<div class="col-md">
One of three columns
</div>
</div>
</div>
Пояснение:
Приведенный выше пример создает три колонки одинаковой ширины для всех устройств и видовых экранов, используя наши предопределенные классы сетки. Эти колонки центрируются на странице с помощью родительского .container.
Контейнер
Необходимый контейнер Bootstrap для правильной работы системы сетки.
Ряды
Ряды создают горизонтальные группы колонок. Поэтому, если вы хотите разделить свой макет по горизонтали, используйте. row.
Колонки
Система сетки Bootstrap позволяет разместить до 12 колонок на странице.
Как это работает
Вот как работает система сетки:
Наша сетка поддерживает шесть отзывчивых точек разрыва.
Точки разрыва основаны на медиа-запросах min-width, что означает, что они влияют на данную точку разрыва и все те, что выше нее (например, col-sm-4 применяется к sm, md, lg, xl и xxl). Это означает, что вы можете управлять размерами контейнеров и столбцов и их поведением в каждой точке останова.
Контейнеры центрируют и горизонтально размещают содержимое.
Используйте .container для отзывчивой ширины в пикселях, .container-fluid для ширины: 100% во всех видовых экранах и устройствах или отзывчивый контейнер (например, .container-md) для комбинации текучей и пиксельной ширины.
Строки являются оболочкой для столбцов.
Каждая колонка имеет горизонтальную прокладку (называемую желобом) для контроля пространства между ними. Эта подкладка затем противопоставляется строкам с отрицательными полями, чтобы содержимое колонок было визуально выровнено по левому краю. Строки также поддерживают классы модификаторов для равномерного применения размера столбцов и классы желоба для изменения расстояния между содержимым.
Колонки невероятно гибкие.
Для каждой строки доступно 12 колонок шаблонов, что позволяет создавать различные комбинации элементов, охватывающих любое количество колонок. Классы колонок указывают количество колонок шаблона (например, col-4 — четыре колонки). Ширина задается в процентах, поэтому вы всегда будете иметь одинаковый относительный размер.
Желоба также являются отзывчивыми и настраиваемыми.
Классы желобов доступны во всех точках разрыва и имеют те же размеры, что и наши интервалы margin и padding. Измените горизонтальные желоба с помощью классов .gx-*, вертикальные желоба с помощью .gy- или все желоба с помощью классов .g-. Для удаления желобков также можно использовать .g-0.
Переменные Sass, карты и миксины обеспечивают работу сетки.
Если вы не хотите использовать предопределенные классы сетки в Bootstrap, вы можете использовать исходный Sass нашей сетки, чтобы создать свою собственную с более семантической разметкой. Мы также включаем некоторые пользовательские свойства CSS для использования этих переменных Sass для еще большей гибкости.
Типы наиболее распространенных систем сетки
Пять ярусов сетки
В системе сетки Bootstrap существует пять ярусов, по одному для каждого диапазона устройств, которые мы поддерживаем. Каждый ярус начинается с минимального размера области просмотра и автоматически применяется к большим устройствам, если это не переопределено.
<div class="row">
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
<div class="row">
<div class="col-xl-4">.col-xl-4</div>
<div class="col-xl-4">.col-xl-4</div>
<div class="col-xl-4">.col-xl-4</div>
</div>
Три одинаковые колонки
Получите три колонки одинаковой ширины, начиная с настольных компьютеров и масштабируя до больших настольных компьютеров. На мобильных устройствах, планшетах и ниже колонки будут автоматически складываться.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
Три неравные колонки
Получите три колонки, начиная с рабочих столов и масштабируя до больших рабочих столов различной ширины. Помните, что столбцов сетки должно быть двенадцать для одного горизонтального блока. При большем количестве столбцы начинают складываться независимо от области просмотра.
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
Две колонки
Получите две колонки, начиная с рабочего стола и масштабируя до больших рабочих столов.
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
Две колонки с двумя вложенными колонками
Согласно документации, вложение колонок осуществляется просто — достаточно поместить строку колонок внутри существующей колонки. В результате вы получите две колонки, начиная с настольных компьютеров и масштабируя до больших настольных компьютеров, и еще две (одинаковой ширины) внутри большей колонки.
При размерах мобильных устройств, планшетов и ниже, эти колонки и вложенные в них колонки будут складываться.
<div class="row">
<div class="col-md-8">
<div class="pb-3">
.col-md-8
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
<div class="col-md-4">.col-md-4</div>
</div>
Смешанный: Мобильный и настольный
Система сеток Bootstrap v5 имеет пять уровней классов: xs (сверхмалый, инфикс этого класса не используется), sm (малый), md (средний), lg (большой) и xl (сверхбольшой). Вы можете использовать практически любую комбинацию этих классов для создания более динамичных и гибких макетов.
Каждый уровень классов масштабируется вверх, то есть если вы планируете установить одинаковую ширину для md, lg и xl, вам нужно указать только md.
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
Смешанный: Мобильный, планшетный и настольный
<div class="row">
<div class="col-sm-6 col-lg-8">.col-sm-6 .col-lg-8</div>
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>