Как использовать сеточные макеты в Bootstrap 5?
Bootstrap 5 предлагает мощную систему макетов сетки, которая помогает легко создавать макеты, удобные для мобильных устройств. В системе макета сетки Bootstrap есть шесть чувствительных точек останова для устройств разного размера. Каждая строка разделена на 12 столбцов, и, смешивая и сопоставляя, вы можете создавать различные макеты по своему желанию. Система сеток основана на гибком боксе и полностью адаптивна.
Учебное пособие по разметке сетки в Bootstrap 5
Это руководство содержит следующие темы:
- Основы компоновки сетки
- Сетка 5-го уровня
- Простая сетка одинаковой ширины
- Ширина одного столбца и изменение размера других столбцов
- Содержимое переменной ширины
- Сетка из нескольких строк одинаковой ширины
- Сложенная горизонтальная сетка
- Вертикальное выравнивание
- Горизонтальное выравнивание
- Сетка без желобов
- Обернутая сетка столбцов
- Изменение порядка содержимого столбца в сетке
- Смещение колонны
- Вложение в сетку
1. Основы системы сеток Bootstrap
Система сеток использует три основных класса CSS для создания необходимого макета — .container, .row и .col. Контейнер охватывает весь макет, затем строки, а затем столбцы.
- Класс .container используется для центрирования содержимого с фиксированной шириной, в то время как .container-fluid используется для адаптивного макета полной ширины.
- Класс .row используется для включения всех горизонтальных столбцов, разделенных на 12 столбцов одинаковой ширины.
- Фактическое содержимое должно быть размещено внутри столбцов с использованием класса .col или .col- *. Например, строка может содержать два столбца, например .col-8 + .col-4. Столбец должен быть непосредственным потомком класса строки.
- Все столбцы используют flexbox, что означает, что простое использование класса .col разделит строку на столбцы равной ширины. Например, если вы используете два класса .col в строке, она будет автоматически разделена на две области по 50%.
- Вы можете явно определить ширину столбца, например .col-sm-8, которая будет занимать 3/4 (75%) ширины строки.
- По умолчанию столбцы и строки имеют отступы и поля для лучшей видимости. Вы можете удалить поля и отступы, добавив дополнительный класс «.noglutter» с «.row».
- В Bootstrap 5 предлагается 6 точек останова — очень маленькие (xs), маленькие (sm), средние (md), большие (lg), очень большие (xl) и очень очень большие (xxl).
- По умолчанию класс .col будет применяться ко всем уровням точек останова. Любые другие используемые классы будут применяться ко всем устройствам более высокого уровня. Например, .col-sm-4 (small) будет применяться к маленьким, средним, большим и очень большим устройствам.
2. Сеточная система уровня 6
В таблице ниже показаны шесть уровней точек останова, предлагаемых в Bootstrap 5:
Сетка | Очень маленький | Небольшой | Середина | Большой | Очень большой | Дополнительный Дополнительный Большой |
---|---|---|---|---|---|---|
Точка останова | <576 пикселей | ≥576 пикселей | ≥768 пикселей | ≥992 пикселей | ≥1200 пикселей | ≥1400 пикселей |
CSS-класс | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
Максимальная ширина контейнера | Нет (авто) | 540 пикселей | 720 пикселей | 960 пикселей | 1140 пикселей | 1320 пикселей |
- Столбцы — каждая строка делится на 12 столбцов одинаковой ширины.
- Ширина желоба — 15 пикселей с каждой стороны столбца, всего 30 пикселей.
- Вложение — Да, столбцы могут быть вложены в другой столбец.
- Порядок столбцов — Да, содержимое любого столбца в строке можно переупорядочить.
Покажем разные примеры, чтобы лучше понять сетки:
3. Простая сетка равной ширины
Создайте простую сетку с равными столбцами, просто используя классы «.col». При использовании классов «.col» строка будет автоматически разделена на столбцы одинаковой ширины. Например, при использовании двух классов «.col» строка будет разделена на два столбца 1/2 + 1/2. Ниже приведен пример кода для создания 1/2 + 1/2 и 1/3 + 1/3 + 1/3 столбцов с использованием простых классов «.col».
<div class="container">
<div class="row">
<div class="col">
.col
</div>
<div class="col">
.col
</div>
</div>
<div class="row">
<div class="col">
.col
</div>
<div class="col">
.col
</div>
<div class="col">
.col
</div>
</div>
</div>
В браузере будут отображаться одинаковые столбцы, как показано ниже:

4. Ширина одного столбца и изменение размера других столбцов.
Система сетки Bootstrap позволяет вам определять ширину для одного столбца, а остальные столбцы в той же строке будут автоматически настроены. Например, когда вы определяете «col + col-6 + col» в строке, она будет автоматически разделена на столбцы «1/3 + 1/6 + 1/3». Ниже приведены два примера определения одного столбца, а затем оставшиеся два других столбца будут скорректированы соответствующим образом.

Ниже приведен код для настройки столбцов, окружающих столбец с определенной шириной:
<div class="container">
<div class="row">
<div class="col">
.col
</div>
<div class="col-6">
.col-6
</div>
<div class="col">
.col
</div>
</div>
<div class="row">
<div class="col">
.col
</div>
<div class="col-5">
.col-5
</div>
<div class="col">
.col
</div>
</div>
</div>
5. Контент переменной ширины
Ширина столбцов может быть ограничена фактическим содержимым с помощью класса «.col- {breakpoint} -auto», например, «.col-md-auto».

Средние столбцы в приведенном выше примере автоматически настраиваются по ширине содержимого. Ниже приведен код для приведенного выше макета сетки:
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
.col .col-lg-2
</div>
<div class="col-md-auto">
.col-md-auto (variable width)
</div>
<div class="col col-lg-2">
.col .col-lg-2
</div>
</div>
<div class="row">
<div class="col">
.col
</div>
<div class="col-md-auto">
.col-md-auto (variable width)
</div>
<div class="col col-lg-2">
.col .col-lg-2
</div>
</div>
</div>
6. Сетка из нескольких строк одинаковой ширины
Просто создайте макет из нескольких столбцов в строке, непрерывно используя классы «.col». Вам просто нужно вставить класс «.w-100» там, где требуется точка останова.

Ниже приведен код для создания нескольких строк одинаковой ширины с использованием одного класса «строка».
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="w-100"></div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="w-100"></div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
7. Горизонтальная сетка с накоплением
Вы можете создать сетку с накоплением, используя классы «.col-sm-», которые будут расширены до горизонтальной сетки на рабочем столе.

Ниже приведен код для создания разметки горизонтальной сетки с накоплением, как показано выше.
<div class="row">
<div class="col-sm-8">.col-sm-8</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">.col-sm</div>
<div class="col-sm">.col-sm</div>
<div class="col-sm">.col-sm</div>
</div>
8. Вертикальное выравнивание
Вертикальное выравнивание содержимого внутри столбца можно настроить, добавив один из следующих трех классов с классом «.row», как показано ниже:
<div class="row align-items-start"> - Align content vertical top
<div class="row align-items-center"> - Align content vertical middle
<div class="row align-items-end"> - Align content vertical bottom
9. Горизонтальное выравнивание
Подобно вертикальному выравниванию, вы также можете настроить горизонтальное выравнивание столбцов, как показано ниже:
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
.col-4
</div>
<div class="col-4">
.col-4
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
.col-4
</div>
<div class="col-4">
.col-4
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
.col-4
</div>
<div class="col-4">
.col-4
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
.col-4
</div>
<div class="col-4">
.col-4
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
.col-4
</div>
<div class="col-4">
.col-4
</div>
</div>
</div>
Это приведет к следующему результату в браузере:

10. Сетка без желобов
По умолчанию столбцы будут иметь горизонтальный отступ, а строки будут иметь отрицательные горизонтальные поля для лучшего выравнивания. Вы можете удалить эти поля и отступы, используя класс «без промежутков» с «строкой», как показано ниже.
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Это даст следующий результат:

11. Сетка столбцов с переносом
Если у вас более 12 столбцов в строке, столбцы будут автоматически перенесены на следующую строку. Например, с указанными ниже первые два столбца поместятся в первую строку (9 + 2 = 11), а третий и четвертый столбцы будут перенесены в новую строку.
<div class="row">
<div class="col-9">.col-9 (Row 1)</div>
<div class="col-2">.col-2 (Row 1)</div>
<div class="col-4">.col-4 (Row 1)</div>
<div class="col-5">.col-5 (Row 1)</div>
</div>
Обернутые столбцы будут выглядеть следующим образом:

12. Изменение порядка содержимого столбца в сетке
Bootstrap позволяет вам изменить порядок содержимого столбца независимо от позиции в строке. Например, в приведенном ниже макете сетки используются три столбца.
<div class="container">
<div class="row">
<div class="col">
First .col No order
</div>
<div class="col order-12">
Second .col .order-12 moved to last
</div>
<div class="col order-1">
Third .col .order-1 moved to first
</div>
</div>
</div>
Результат будет получен, как показано ниже, без упорядоченного столбца, будет иметь приоритет по сравнению со всеми другими упорядоченными столбцами и отображаться в первом столбце. Контент в столбце с использованием класса «порядок-12» будет перемещен на последнюю позицию. И содержимое в столбце с использованием «порядок-1» будет перемещено в центральную (первую) позицию.

13. Смещение колонки
Bootstrap 4 отказался от функции смещения столбцов из-за использования макета сетки flexbox. Но вы можете переместить столбцы, используя служебные классы маржи, такие как «ml-auto», «mr-auto» и т. Д.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
Ниже приведен результат смещения столбца с использованием классов маржи:

14. Вложение в сетку
Столбцы могут быть вложены в другие столбцы, как показано ниже:
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
Это даст следующий результат:

Заключение
Как видите, существует множество макетов по умолчанию, которые можно создать с помощью системы макетов сетки Bootstrap 4. Также можно создать собственный CSS для создания настраиваемых макетов или изменения одного из макетов по умолчанию. Прочная сетка flexbox и компоненты многократного использования делают Bootstrap 4 более надежным, чем предыдущая версия.
Изучите Bootstrap 5 (Индекс)