Система сетки Bootstrap 5

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

Система сетки Bootstrap построена на основе flexbox, и на странице допускается до 12 столбцов.

Если вы не хотите использовать все 12 столбцов отдельно, вы можете комбинировать их, чтобы создать более широкие столбцы:

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

Убедитесь, что общая сумма равна или меньше 12 (необходимо использовать не все 12 доступных столбцов).

Классы сетки

Система сетки Bootstrap 5 предоставляет шесть классов:

  • .col- (Экстрамаленькие устройства - ширина экрана меньше 576px)
  • .col-sm- (Маленькие устройства - ширина экрана равна или превышает 576px)
  • .col-md- (Средние устройства - ширина экрана равна или превышает 768px)
  • .col-lg- (Нормальные устройства - ширина экрана равна или превышает 992px)
  • .col-xl- (Сверхнормальные устройства - ширина экрана равна или превышает 1200px)
  • .col-xxl- (Экстранормальные устройства - ширина экрана равна или превышает 1400px)

Комбинируя перечисленные классы, можно создать более динамичные и гибкие макеты.

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

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

Вот базовая структура сетки Bootstrap 5:

/* Управление шириной столбцов и их отображением на различных устройствах */
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
/* Или позвольте Bootstrap автоматически обрабатывать макет */
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Пробуйте сами

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

Второй пример: не нужно указывать каждый col Добавить цифру, а Bootstrap обработает макет, чтобы создать столбцы одинаковой ширины: два "col" Элемент = 50% ширины каждого столбца, а три столбца = 33.33% ширины каждого столбца. Четыре столбца = 25% ширины и т.д. Вы также можете использовать .col-sm|md|lg|xl|xxl Сделать столбцы адаптивными.

Опции сетки

Ниже приведена таблица,总结了, какBootstrap 5 сеточная система работает на различных размерах экрана:

Экстремально маленькие (<576px) Маленькие (>=576px) Средние (>=768px) Большие (>=992px) Сверхбольшие (>=1200px) Экстремально большой (>=1400px)
Префикс класса .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Поведение сетки Всегда горизонтально Сворачивание начинается, когда достигается точка брейк, и становится горизонтальным Сворачивание начинается, когда достигается точка брейк, и становится горизонтальным Сворачивание начинается, когда достигается точка брейк, и становится горизонтальным Сворачивание начинается, когда достигается точка брейк, и становится горизонтальным Сворачивание начинается, когда достигается точка брейк, и становится горизонтальным
Ширина контейнера None (auto) 540px 720px 960px 1140px 1320px
Подходит для Мобильный телефон в вертикальном положении Мобильный телефон в горизонтальном положении Таблетки Ноутбуки Ноутбуки и стационарные компьютеры Ноутбуки и стационарные компьютеры
Номер столбца # 12 12 12 12 12 12
Ширина зазора 1.5rem (по каждой стороне столбца 0.75rem) 1.5rem (по каждой стороне столбца 0.75rem) 1.5rem (по каждой стороне столбца 0.75rem) 1.5rem (по каждой стороне столбца 0.75rem) 1.5rem (по каждой стороне столбца 0.75rem) 1.5rem (по каждой стороне столбца 0.75rem)
Может быть вложенным Да Да Да Да Да Да
Смещение Да Да Да Да Да Да
Сортировка столбцов Да Да Да Да Да Да