Bootstrap5 Система сеток

Bootstrap предоставляет адаптивную, mobile-first, гибкую систему сеток. По мере увеличения размера экрана или области просмотра система автоматически разделяется до 12 столбцов.

Мы также можем определить количество столбцов в соответствии с нашими потребностями:

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

Сеточная система Bootstrap 5 является адаптивной, и столбцы автоматически перестраиваются в зависимости от размера экрана.

Пожалуйста, убедитесь, что общее количество столбцов в каждой строке равно или меньше 12.

---

Классы сетки

Сеточная система Bootstrap 5 имеет следующие 6 классов:

• .col- для всех устройств.
• .col-sm- Планшеты — ширина экрана равна или больше 576px.
• .col-md- Настольные мониторы — ширина экрана равна или больше 768px.
• .col-lg- Большие настольные мониторы — ширина экрана равна или больше 992px.
• .col-xl- Очень большие настольные мониторы — ширина экрана равна или больше 1200px.
• .col-xxl- Ультрабольшие настольные мониторы — ширина экрана равна или больше 1400px.

Правила системы сеток

Правила сеточной системы Bootstrap5:

• Каждый ряд сетки должен быть помещён в контейнер с.container(фиксированная ширина) или.container-fluid(full-width) классом, чтобы некоторые внешние и внутренние отступы устанавливались автоматически.
• Используйте строки для создания горизонтальных групп столбцов.
• Содержимое должно размещаться в колонках, и только колонки могут быть прямыми дочерними элементами рядов.
• Предопределенные классы, такие как.rowи.col-sm-4, можно использовать для быстрого создания макетов сетки.
• Колонки создают промежутки между содержимым колонок с помощью padding. Этот промежуток достигается за счёт.rowsотрицательных внешних отступов у класса, задающего смещение для первой и последней колонок.
• Столбцы сетки создаются путем охвата указанных 12 столбцов. Например, чтобы задать три равных столбца, нужно использовать три.col-sm-4для настройки.
• Bootstrap 5 и Bootstrap 4 используют flexbox вместо float. Основное преимущество Flexbox в том, что колонки сетки без заданной ширины автоматически становятсяколонками одинаковой ширины и высоты.. Если вы хотите узнать больше о Flexbox, вы можете прочитать нашУчебник по CSS Flexbox. 。

В следующей таблице показано, как система сетки Bootstrap работает на разных устройствах:

	Сверхмалые устройства <576px	Планшет ≥576px	Настольный монитор ≥768px	Большой настольный монитор ≥992px	Очень большой настольный монитор ≥1200px	Ультрабольшой настольный монитор ≥1400px
Максимальная ширина контейнера	Нет (auto)	540px	720px	960px	1140px	1320px
Префикс класса	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-
Количество столбцов и	12
Ширина промежутка	1.5rem (.75rem с каждой стороны колонки)
Поддерживают вложенность	Да
Порядок колонок	Да

Мы объединяем приведённые выше классы вместе, чтобы создавать более гибкие макеты страниц.

Совет:Каждый класс масштабируется пропорционально, поэтому, если вы хотите, чтобы sm и md имели одинаковую ширину, достаточно указать sm.

---

Базовая структура сетки Bootstrap 5

Следующий код представляет базовую структуру сетки Bootstrap 5:

Первый пример: создайте строку (<div class="row">). Затем добавьте нужные столбцы (.col-*-*, заданные в классе). Первая звёздочка (*) обозначает адаптивное устройство: sm, md, lg или xl, вторая звёздочка (*) обозначает число, а числа в одной строке в сумме дают 12.

Второй пример: вместо добавления числа к каждомуcolстолбцу, позвольте Bootstrap автоматически управлять макетом; каждый столбец в одной строке имеет одинаковую ширину: два"col"столбца будут иметь ширину 50%. Три"col"столбца, каждый будет иметь ширину 33.33%, четыре"col"столбца, каждый будет иметь ширину 25%, и так далее. Аналогично можно использовать.col-sm|md|lg|xl, чтобы задать адаптивные правила для столбцов.

Далее мы можем рассмотреть примеры.

Создание столбцов одинаковой ширины, автоматическая раскладка Bootstrap

Адаптивные колонки одинаковой ширины

В следующем примере показано, как создать адаптивные столбцы одинаковой ширины на планшетах и экранах большего размера.На мобильных устройствах, то есть при ширине экрана менее 576px, четыре столбца будут располагаться вертикально друг под другом.:

Адаптивные колонки разной ширины

Следующий пример демонстрирует, как создать адаптивные столбцы неравной ширины на планшетах и экранах большего размера.На мобильных устройствах, т. е. когда ширина экрана меньше 576px, два столбца будут располагаться вертикально друг под другом.:

Задайте ширину одного столбца

Если вы зададите ширину только одного столбца, остальные столбцы автоматически разделят оставшуюся ширину поровну. В следующем примере ширина столбцов задается как 25%, 50%, 25%:

---

Планшет и настольный компьютер

Следующий пример демонстрирует, что на настольных дисплеях два столбца занимают по 50% ширины; на планшетах левый столбец — 25%, а правый — 75%; на небольших устройствах, таких как мобильные телефоны, они будут располагаться вертикально друг под другом.

---

Планшет, настольный компьютер, большой настольный дисплей, сверхбольшой настольный дисплей

В следующем примере соотношения ширины составляют 25%/75%, 50%/50%, 33.33%/66.67%, 16.67/83.33% на планшетах, настольных компьютерах, больших настольных дисплеях и сверхбольших настольных дисплеях соответственно; на небольших устройствах, таких как мобильные телефоны, они будут располагаться вертикально друг под другом.

---

Вложенные столбцы

В следующем примере создается макет с двумя столбцами, причем один столбец содержит два вложенных столбца:

Эффект отображения:

---

Столбцы со смещением

Столбцы со смещением задаются с помощью классаoffset-*-*. Первая звездочка (*) может бытьsm、md、lg、xl, обозначая тип экранного устройства; вторая звездочка (*) может быть1от11числа.

Чтобы использовать смещения на больших экранных дисплеях, используйте классы.offset-md-*. Эти классы увеличивают левое поле (margin) столбца на*столбцов, где*диапазон — от1до11。

Например: .offset-md-4 сдвигает .col-md-4 на четыре колонки сетки вправо.

Другие расширения