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-(超小型设备 - 屏幕宽度小于 576 像素)

  • .col-sm-(小型设备 - 屏幕宽度等于或大于 576 像素)

  • .col-md-(中型设备 - 屏幕宽度等于或大于 768 像素)

  • .col-lg-(大型设备 - 屏幕宽度等于或大于 992 像素)

  • .col-xl-(超大设备 - 屏幕宽度等于或大于 1200 像素)

  • .col-xxl-(xxlarge 设备 - 屏幕宽度等于或大于 1400 像素)

可以组合上面的类来创建更加动态和灵活的布局。

提示:每个类都会按比例放大,因此如果您想为 smmd,只需指定 sm代码>.

Bootstrap 5 网格的基本结构

以下是 Bootstrap 5 网格的基本结构:

  <!-- Control the column width, and how they should appear on different devices -->
<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>
<!-- Or let Bootstrap automatically handle the layout -->
<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 网格布局的示例。

三等柱

.col
.col
.col

以下示例展示了如何在所有内容上创建三个等宽列 设备和屏幕宽度:

例子

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

自己尝试一下→

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Three equal width columns</h1>
  <p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
  <div class="row">
    <div class="col p-3 bg-primary text-white">.col</div>
    <div class="col p-3 bg-dark text-white">.col</div>
    <div class="col p-3 bg-primary text-white">.col</div>
  </div>
</div>

</body>
</html>

响应栏

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3

以下示例演示如何创建四个等宽列,从平板电脑开始并缩放到 超大桌面。 在宽度小于 576 像素的手机或屏幕上,列会自动堆叠 彼此之上

例子

<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>

自己尝试一下→

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
  </div>
</div>

</body>
</html>

两个不相等的响应列

.col-sm-4
.col-sm-8

下面的示例展示了如何获取两个不同宽度的列,起始位置为 平板电脑并扩展到大型额外桌面:

例子

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

自己尝试一下→

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Two Unequal Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-4 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-8 p-3 bg-dark text-white">.col</div>
  </div>
</div>

</body>
</html>

提示:您将在本教程后面了解有关网格系统的更多信息。