Bootstrap 5 网格

Bootstrap 5 网格系统基于 flexbox 设计，并且支持跨页面最多 12 列。 如果我们不想单独使用所有 12 列，则可以将它们组合起来以制作更宽的列。

网格系统是响应式的，并且列会根据屏幕尺寸自动重新排列。 没有必要使用所有 12 个可用列。 确保总数小于或等于 12。

我们可以利用 Bootstrap 的默认网格类来轻松地为各种设备（如手机、平板电脑、笔记本电脑和台式机）创建布局。

例如，.col-* 类可以为特别小的设备（如纵向模式的手机）构建网格列，而 .col-sm-* 类可以为横向模式的手机构建网格列。

下表显示了 bootstrap 5 网格系统的格式。

默认网格系统

默认网格系统有助于使用“col”类为行中的单个列创建列。 我们可以使用“col”类十二次，以在一行中创建十二列。

网格系统的语法

bootstrap 5 中的默认网格系统语法如下所示

示例

给定的示例显示了具有类和函数的 bootstrap 5 中的默认网格系统。默认网格系统根据需要使用“row”和“col”类。 在这里，我们使用三个“col”类来表示一行中的三个列。

输出

具有大小的网格系统

我们可以应用列的大小来创建自定义列。 网格系统有助于使用“col-size”类为行中的单个列创建所需大小的列。 例如，“col-3”用于在一个列中创建三个列大小。

网格系统的语法

bootstrap 5 具有大小的网格系统语法如下所示。

示例

给定的示例显示了具有类和函数的 bootstrap 5 中的默认网格系统。 在此示例中，我们可以使用具有大小的列。 第一行使用不均匀的列大小，总共 12 列。 第二行使用均匀的列大小，即 4 列。 我们可以使用多个列，列大小等于或小于十二列。

输出

响应式网格类

Bootstrap 5 类用于响应式网格系统。 这些类组合在一起，可以创建更动态和更灵活的布局。 Bootstrap 5 为超大设备添加了“xxl”断点。

Bootstrap 5 网格系统有六个类

网格系统的语法

bootstrap 5 具有大小的网格系统语法如下所示。 我们可以一个元素中使用单个或多个网格类。

示例

给定的示例显示了具有类和函数的 bootstrap 5 中的默认网格系统。 在此示例中，我们在容器和容器流体元素中使用“col-xxl”和“col-sm”类。

输出

以下输出显示了适用于小屏幕宽度设备和大屏幕宽度设备的网格系统。 此网格类使用容器和容器流体。

带有网格类的示例

给定的示例显示了具有类和函数的 bootstrap 5 中的默认网格系统。 如果我们需要用于小、中、大、超大和双倍超大屏幕宽度，则分别使用“col-sm”、“col-md”、“col-lg”、“col-xl”和“col-xxl”类。

输出

以下输出显示了适用于小屏幕宽度设备的网格系统。

以下输出显示了适用于双倍超大屏幕宽度设备的网格系统。

堆叠到水平

让我们构建一个简单的网格系统，该系统在超小型设备上开始堆叠，并在更大的设备上变为水平。

示例

以下示例演示了一个简单的“堆叠到水平”两列布局。 它将在所有显示器上产生 50% 或 50% 的分割，除非在极小的屏幕上，否则将堆叠（100%）。 给出的示例显示了具有类和函数的 bootstrap 5 中的默认网格系统。

输出

自动布局网格系统

Bootstrap 将检测列数并确保每列的宽度相同。 要使用 Bootstrap 5 为所有设备建立等宽列，请从 .col-size-* 中删除数字，并且仅在给定数量的 col 组件上使用 .col-size 类。 Bootstrap 5 列应使用大小类进行响应。

示例

给定的示例显示了具有类和函数的 bootstrap 5 中的自动布局网格系统。 “col-sm”类用于网页的容器和容器流体。 “col-sm”类使用四次来创建四列。

输出

结论

bootstrap 5 网格系统有助于创建响应式、用户友好、有吸引力且简单的 Web 应用程序。 它以最小的空间和用户交互包含大量尺寸信息。 我们可以在一个页面上放置多个功能，而不会出现复杂的空间问题。