Ретículа Bootstrap 5

Система ретикулы Bootstrap 5

Bootstrap 的网格系统是用 flexbox 构建的，页面上最多允许 12 列。

如果您不想单独使用所有 12 列，那么可以将这些列组合在一起，以创建更宽的列：

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

网格系统响应迅速，列会根据屏幕大小自动重新排列。

请确保总和等于或小于 12（如果不需要使用所有 12 个可用列）。

网格类

Bootstrap 5 网格系统有六个类：

  • .col- (超小型设备 - 屏幕宽度小于 576px)
  • .col-sm- (小型设备 - 屏幕宽度等于或大于 576px)
  • .col-md- (中型设备 - 屏幕宽度等于或大于 768 像素)
  • .col-lg- (大型设备 - 屏幕宽度等于或大于 992 像素)
  • .col-xl- (xlarge 设备 - 屏幕宽度等于或大于 1200px)
  • .col-xxl- (xxlarge 设备 - 屏幕宽度等于或大于 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" Элемент = каждая col имеет ширину 50%, а три cols имеют ширину 33.33%. Четыре колонки = 25% ширины и т.д. Вы также можете использовать .col-sm|md|lg|xl|xxl Сделать колонки адаптивными.

Ниже мы собрали несколько примеров базовых сеточных布局 Bootstrap 5.

Три равные колонки

Следующий пример показывает, как создать три колонки одинаковой ширины на всех устройствах и экранах:

Пример

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

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

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

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

Пример

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

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

Две неравные адаптивные колонки

Следующий пример показывает, как получить два колонки с разной шириной на планшете и расширить их до超大ного рабочего стола:

Пример

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

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

Совет:Вы узнаете о ней в конце этого руководства Сеточная система Дополнительная информация.