了解 Bootstrap 5 布局-得设创意

构建网站布局是一项复杂的任务。当网络出现时，我们没有任何特定的方法，只有后来发明的表格。

几年后，div以及其他一些 HTML 标签和工具出现了，它们可以帮助你构建体面的方形网站布局。然后，随着技术的进步，响应式网站设计的理念被引入，因此前端框架根深蒂固。

Bootstrap 是用于构建强大而出色的 Web 布局的最流行的前端框架之一。Bootstrap 一直是开发响应式项目的热门框架。Bootstrap 提供了一个响应式、移动优先的流体网格系统，随着屏幕或视口尺寸的增加，该系统可以充分扩展到 12 列。它充满了预定义的类，可轻松创建布局。

随着 Bootstrap 5 的发布，我们添加了一些与布局系统相关的附加类。以下是新版 Bootstrap 基本概念（尤其是网格系统）的指南。

Bootstrap 5 布局

Bootstrap 5专注于响应性、自定义和性能，提供了一套强大的工具来构建响应式、移动优先的 Web 项目。本文将深入了解 Bootstrap 5 的核心功能和布局组件，帮助您轻松创建具有视觉吸引力且功能丰富的网页设计。

Bootstrap 5 入门

要开始使用 Bootstrap 5，您可以从官方网站下载源文件，也可以在 HTML 文件中包括 CDN 链接。此外，您需要对 HTML、CSS 和 JavaScript 有基本的了解，才能充分利用该框架。

容器：

容器是 Bootstrap 5 布局的基本构建块。它用于在页面上居中和对齐内容，提供响应式和流畅的设计。Bootstrap 5 中有两种类型的容器：标准容器和流体容器。

标准容器：以固定宽度居中并对齐内容。
流体容器：扩展以填充整个视口，提供完全响应的布局。

网格系统

Bootstrap 5 采用强大的 12 列网格系统来构建和组织内容。此响应式网格系统允许轻松创建布局，只需使用以下类将页面划分为列和行即可：

容器：包裹网格并提供基础结构。
行：定义水平列组。
列：代表行内的单独列。

网格系统还包括一系列针对不同屏幕尺寸的响应类：

超小（col）：<576px
小（col-sm）：≥576px
中（col-md）：≥768px
大号（col-lg）：≥992px
特大（col-xl）：≥1200px
超大（col-xxl）：≥1400px

弹性框和对齐

Bootstrap 5 利用 Flexbox 的强大功能提供更灵活、更高级的布局选项。它提供各种对齐类，用于在容器、行和列内垂直和水平对齐内容。

开始：将项目与父元素的开始对齐。
中心：将项目置于父元素的中心。
结束：将项目与父元素的末尾对齐。
基线：沿基线对齐项目。
拉伸：拉伸物品以填充可用空间。

间距和实用类：

Bootstrap 5 引入了多种实用程序类，用于管理边距、填充和其他布局属性。这些类遵循简单的语法，可轻松在整个设计中应用一致的间距：

“m” 表示边距，“p” 表示填充
“t” 表示顶部，“b” 表示底部，“l” 表示左侧，“r” 表示右侧，“x” 表示水平，“y” 表示垂直
间距值 0-5

例如，要对元素的顶部和底部应用 3 个单位的边距，可以使用类“my-3”。

响应断点

为了在各种设备上提供最佳的用户体验，Bootstrap 5 具有预定义断点，允许您为不同的屏幕尺寸定义不同的样式。断点可以与网格系统和其他 Bootstrap 布局组件结合使用，以创建响应式设计。

Bootstrap 5 布局网格系统

尽管为虚拟网格基础付出了如此多的努力，但即使使用表格也没有取得任何成功，因为表格的水平范围不灵活，使得缩放变得不可能，尤其是对于较小的视口。当引入div时，使用 CSS 提供类似网格的系统成为可能，而这随后成为包括 Bootstrap 在内的每个 CSS 框架的基本基础。

Bootstrap 默认就像一个画布，网页上有水平网格，随着屏幕尺寸的增加，元素被放置在特定的视口控件内。为了使用 Bootstrap 的基本网格系统，您必须使用 HTML5 的正确文档类型以及通过meta viewport设置的查看区域。

参见下面的代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta charset="UTF-8">
      <title>Your Title</title>
   </head>
   <body>
      <!-- Your content goes here -->
   </body>
</html>

使用上面的响应式元视口标记仅意味着浏览器将使用当前正在查看网页的视口大小来呈现网页的宽度。请注意，如果您不确定您的网站是否设计为响应式设计，则不得使用此元标记。结果可能是不可预测的。

容器

Bootstrap 使用容器元素作为其网格系统的基础。容器可以多次使用，但不应嵌套。有三种类型的容器类可供使用：.container、.container-fluid和responsive container。.container类提供居中的响应式像素网格布局，而.container-fluid提供跨所有视口大小的全宽布局。responsive容器只是生成一个响应式容器，其宽度为：100%，直到指定的断点。容器的最大宽度将根据容器的语义宽度断点在不同的视口上发生变化（例如。容器-*）。

下表显示了当您选择使用任何预定义容器类时每个容器的最大宽度。

让我们看看每个容器类在不同屏幕分辨率或视口尺寸下的工作方式。下面，我们为每个容器类提供了一个基本标记。

<div class="container">.container</div>
<div class="container-fluid">.container-fluid</div>
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

上面的容器在特大屏幕分辨率下看起来应该是这样的：

在超大屏幕分辨率下，它应该是这样的：

在大屏幕分辨率下它应该是这样的：

以下是中等屏幕分辨率或平板设备的情况：

最后，它在较小屏幕分辨率或移动设备上看起来应该是这样的：

行

为了使用 Bootstrap 网格系统，您需要插入至少一行列。每个容器类中可以嵌套一行或多行。Bootstrap 行只是一组水平Bootstrap 列，可以分为 12 个部分。

在讨论列之前，让我们先看看行的标记。

<div class="container">
   <div class="row">
      <!-- insert column code here -->
   </div>
</div>

上面的代码只是创建了一行，但您可以在容器中拥有任意多的行。您可以在单个网页上重复使用任意多次行。以下是编写三行布局的方法：

<div class="container">
   <div class="row">
      <!-- insert column code here -->
   </div>
   <div class="row">
      <!-- insert column code here -->
   </div>
   <div class="row">
      <!-- insert column code here -->
   </div>
</div>

列

Bootstrap 包含一个六列类，可以适应所有六个默认断点。让我们来看看 Bootstrap 5 中每个列类的细节。

超小（xs）列类适用于最大宽度为 575 像素的移动设备。
小 (sm)列类，适用于分辨率大于或等于 576 像素但小于 768 像素的目标设备。
中等（md）列类，适用于大于或等于 768 像素但小于 992 像素的目标设备。
大（lg）列类，适用于大于等于 992 像素但小于 1200 像素的目标设备。
超大（xl）列类，适用于大于等于 1200 像素但小于 1140 像素的目标设备。
特大（xxl）列类选项适用于所有大于或等于 1400 像素的分辨率。

如上所述，每个类都有其独特的类前缀和修饰符。列或间距之间的间距为 1.5rem（左右两侧为 0.75rem）。

下表显示了列尺寸的宽度。

举个例子，让我们创建一个简单的响应式三列布局。您的标记应如下所示：

<div class="container">
   <div class="row">
      <div class="col-md-4">
         Column 1
      </div>
      <div class="col-md-4">
         Column 2
      </div>
      <div class="col-md-4">
         Column 3
      </div>
   </div>
</div>

如上面的标记所示，我们在.row类div中使用了三个div，每个 div 都包含.col-md-4 类。对于分辨率大于等于 768 像素且小于 992 像素的设备，您将看到如下三列布局：

随着屏幕分辨率降低，直到达到小于 768 像素的分辨率，每列的宽度将变为 100%，并且每列将堆叠在另一列之上。在此状态下，您将看到如下所示的三列布局：

接下来，让我们看看如何混合列类以适应不同的屏幕分辨率。让我们考虑上面的三列布局。当屏幕分辨率降低到 768 像素以下时，我们希望第一列和第二列彼此相邻，并且各占 50% 的宽度。然后，第三列应拉伸到 100% 的宽度，并且必须位于前两列下方。

为了实现这种布局，我们将混合一些不同的列类。标记应如下所示：

<div class="container">
   <div class="row">
      <div class="col-md-4 col-sm-6">
         Column 1
      </div>
      <div class="col-md-4 col-sm-6">
         Column 2
      </div>
      <div class="col-md-4 col-sm-12">
         Column 3
      </div>
   </div>
</div>

注意，我们为第一列和第二列的div添加了.col-sm-6类。当屏幕分辨率大于或等于 576 像素但小于 768 像素时，它会将前两列设置为各 50% 宽度，第三列将使用.col-sm-12跨越 100% 宽度布局。

在小型设备/视口上的结果应该如下所示：

响应式列

如果您希望从最小到最大的设备/视口，列的大小都相同，则可以使用.col或.col-*类。这意味着无论您如何增加或减少屏幕分辨率，每列的大小都将根据您定义的列大小保持不变。

让我们举个例子。让我们创建一个两行布局。第一行有三列，每列都有一个.col类，而第二行有三列，每列依次为.col-3、.col-6和.col-3类。

标记看起来应如下：

<div class="container">
   <div class="row">
      <div class="col">Column 1</div>
      <div class="col">Column 2</div>
      <div class="col">Column 3</div>
   </div>
   <div class="row">
      <div class="col-3">Column 3/12</div>
      <div class="col-6">Column 6/12</div>
      <div class="col-3">Column 3/12</div>
   </div>
</div>

结果应如下所示：

此外，您还可以使用.col-*类创建堆叠到水平的列。 “ * ” 表示视口大小，可以是xs、sm、md、lg、xl、xxl。当达到定义的屏幕分辨率或视口大小时，这将使每列折叠并堆叠到水平视图。

作为示例，让我们回到前面的示例，并将前三列div从.col类修改为.col-sm。当屏幕分辨率小于 768 像素时，这将简单地折叠并堆叠在每列的顶部。

标记看起来应如下：

<div class="container">
   <div class="row">
      <div class="col-sm">Column 1</div>
      <div class="col-sm">Column 2</div>
      <div class="col-sm">Column 3</div>
   </div>
   <div class="row">
      <div class="col-3">Column 3/12</div>
      <div class="col-6">Column 6/12</div>
      <div class="col-3">Column 3/12</div>
   </div>
</div>

如果屏幕分辨率大于或等于 768 像素，结果应该如下所示：

然后，如果将屏幕尺寸减小到小于 768 像素的屏幕分辨率，则列应如下所示：

行列

Bootstrap 还允许您使用.row-cols-*类快速设置呈现每个内容的列数。这将简单地创建基本的网格布局或控制内容布局。

举个例子，让我们创建一个两行布局，其中有六个大小相同的列。为此，我们需要在通常的.row类div内添加.row-cols-3类，然后在每个 div 上创建一个带有.col类的六列 div 类。

标记看起来应如下：

<div class="container">
   <div class="row row-cols-3">
      <div class="col">Column 1</div>
      <div class="col">Column 2</div>
      <div class="col">Column 3</div>
      <div class="col">Column 4</div>
      <div class="col">Column 5</div>
      <div class="col">Column 6</div>
   </div>
</div>

结果应如下所示：

如上所示，使用.row.cols-3类将三列分布在两行上。

偏移列

也许您的布局需要您偏移一些列，并在元素之前或之后留出一些水平空白空间。Bootstrap 5 提供了两种方法来实现这一点。首先是使用响应式.offset-*-*（第一个“ * ”再次代表媒体查询的基本宽度，第二个“ * ”是要偏移的列数）网格类，第二种是使用边距实用程序（例如.ms-auto）强制同级列彼此远离。

首先让我们看看.offset-*-*类是如何工作的。我们的标记应该是这样的：

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
</div>

如上面的标记所示，我们在第一个.row类div的第二列上使用了.offset-md-4类。这将在网格左侧最后四列之前留出四列的空白。同样，我们为第二个.row类div的每个div添加.offset-md-3，因此这将在网格左侧分别留出三个空白。

结果应该是这样的：

接下来，让我们看看如何使用边距实用程序实现相同的目的。我们的标记应如下所示：

<div class="container">
   <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
   </div>
   <div class="row">
      <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
      <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
   </div>
</div>

在上面的第一行中，我们在第二个 div 列中使用了.ms-auto类。.ms -auto中的字母“ m ”代表边距，而字母“ s ”用于设置左边距和右边距。单词“ auto ”表示我们将边距设置为自动，这会将.col-md-4拉到网格的末尾。

对于第二行，我们使用.ms-md-auto类。同样，字母“ m ”代表边距，而字母“ s ”用于设置左边距和右边距。字母“ md ”代表列将设置为 100% 最大宽度的断点，在本例中为中等视口或中等屏幕分辨率。您可以根据布局需求将其更改为您喜欢的任何断点。您还可以访问边距实用程序页面以了解有关间距选项的更多信息。

最终的布局将如下所示：

间距

Bootstrap 5提供了预定义的间距类，用于在列之间添加填充，主要用于响应式地分隔和对齐内容。间距是列内容之间的间隙，可以响应式地调整，并专门通过水平填充构建。

在使用引导槽时，需要记住几个类：

.gx-*类主要用于控制水平间距宽度。
.gy- *类主要用于控制垂直间距宽度。
.g-*类主要用于控制水平和垂直间距的宽度。
.g-0类删除了预定义的网格类，包括.row类中的负边距和相关列中的水平填充。

让我们通过一些示例来仔细看看每一个间距类别。

<div class="container">
   <div class="row gx-5">
      <div class="col">
         <div class="p-3 border">Horizontal Gutter</div>
      </div>
      <div class="col">
         <div class="p-3 border">Horizontal Gutter</div>
      </div>
      <div class="col">
         <div class="p-3 border">Horizontal Gutter</div>
      </div>
   </div>
</div>
<div class="container">
   <div class="row gy-5">
      <div class="col-6">
         <div class="p-3 border">Vertical Gutter</div>
      </div>
      <div class="col-6">
         <div class="p-3 border">Vertical Gutter</div>
      </div>
      <div class="col-6">
         <div class="p-3 border">Vertical Gutter</div>
      </div>
      <div class="col-6">
         <div class="p-3 border">Vertical Gutter</div>
      </div>
   </div>
</div>
<div class="container">
   <div class="row g-3">
      <div class="col-6">
         <div class="p-3 border">V & H Gutter</div>
      </div>
      <div class="col-6">
         <div class="p-3 border">V & H Gutter</div>
      </div>
      <div class="col-6">
         <div class="p-3 border">V & H Gutter</div>
      </div>
      <div class="col-6">
         <div class="p-3 border">V & H Gutter</div>
      </div>
   </div>
</div>
<div class="container">
   <div class="row g-0">
      <div class="col-3">
         <div class="p-3 border">No Gutter</div>
      </div>
      <div class="col-9">
         <div class="p-3 border">No Gutter</div>
      </div>
   </div>
</div>

为了理解上述标记，让我们详细了解一下每个 div 类的细节：

第一个容器代表水平间距。如您所见，在第一个容器的.row类div中，我们添加了.gx-5类，以在控制水平间距宽度的每列之间添加空格。在.gx-*类中输入的数字越小，间距或水平间距宽度就越小。
第二个容器代表垂直间距。在第二个容器的.row 类div中，我们添加了.gy-5类，它将以垂直方式在每列之间添加空间。就像水平间距一样，在.gy-*类中输入的数字越少，空间或垂直间距宽度就越小。
第三个容器代表水平和垂直间距。通过在.row类div内使用.g-3类，我们基本上在水平和垂直间距宽度上相应地添加了空间。
有两种方法可以在引导程序中设置列的偏移量：第一种是通过.offset-*-*类，另一种是通过边距实用程序。
最后一个容器代表零间距宽度，它基本上通过与.row类div一起添加的.g-0类删除了与间距相关的预定义网格类。
为了避免较大的间距出现不必要的溢出，您可以使用匹配的填充实用程序类（例如.px-*类）或使用.overflow-hidden类以及.container类div作为包装器解决方案。

让我们看看它在浏览器中的样子：

网格简介

任何 Bootstrap 网站的主要概念都是布局或网格组件。Bootstrap 网格系统由 12 个等宽列组成。使用其内置的预定义类，您可以创建列并一次跨越多个列。或者，您可以使用列内的行来添加新的变化列宽。

以下是使用网格布局时需要了解的要点：

每个（.row）必须位于一个容器（.container，.container-fluid或responsive container）中。
每一行都可以水平使用，将多个元素放在一起。
每列必须放在行内。您可以在一行内放置更多行，以更好地控制列宽。
如果特定元素需要可定位在一行内的列并且超出十二列的元素限制，则整个集合将被包装。
如果您希望从最小屏幕分辨率到最大屏幕分辨率的网格尺寸相同，则可以使用.col类。
您还可以使用.row-cols-*快速设置每个要呈现的列数。这将简单地创建基本的网格布局或控制内容布局。
如果您想要一个水平堆叠网格，您可以使用.col-*-*类，其中第一个“*”是您希望网格堆叠的断点，最后一个“ * ”表示列数（例如.col-sm-5）。
列间距默认已预定义，起始宽度为 1.5 rem (24 px)，但可以通过 .gy -*、. gx -*、. g-* 和 .g -0进行响应式调整。

以上就是您需要了解的 Bootstrap 5 网格的基础知识。我们在此没有讨论 flexbox 或其他有用的实用程序；创建单独的教程以避免原始网格系统的疑虑更有意义。

随着 Bootstrap 5 的发布，开发人员可以使用强大而灵活的布局系统，从而简化设计响应式、移动优先网站的过程。通过理解和利用容器、网格系统等核心组件，

Bootstrap 的网格是一个功能强大且响应迅速的网格系统，适用于多种用途，并且与多种设备和屏幕分辨率兼容。只要具备基本知识，就可以轻松设置自己的 Bootstrap 布局。

有关 Bootstrap 网格的更多信息，请参阅此处的官方文档。

免责声明：得设创意所发布的一切资源及软件的文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络和用户自行分享，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版，得到更好的正版服务。如有侵权请邮件与我们联系处理。

THE END

前端开发设计文章
# Bootstrap 5 # Web 布局 # 前端框架