Как использовать сеточные макеты в 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 (Индекс)