Bootstrap 5学习教程，从入门到精通，Bootstrap 5 容器（Container）语法知识点及案例代码详解（4）
Bootstrap 5 容器（Container）语法知识点及案例代码详解
Bootstrap 5 是一个强大的前端框架，提供了丰富的预定义组件和布局工具。容器（Container） 是 Bootstrap 布局系统的基础，用于包裹页面内容，并提供响应式布局的起点。
一、Bootstrap 5 容器概述
1.1 容器的定义与作用
- 定义：容器是 Bootstrap 中用于包裹页面内容的元素，是实现响应式布局的基础。
- 作用：
- 提供左右内边距（padding），避免内容紧贴浏览器边缘。
- 根据不同的断点（breakpoints）调整宽度，实现响应式设计。
- 支持固定宽度和全宽两种布局方式。
1.2 容器的类型
Bootstrap 5 提供了三种主要的容器类型：
.container：在每个响应式断点处设置一个max-width，提供响应式固定宽度。.container-fluid：始终占据整个视口宽度（100%）。.container-{breakpoint}：在指定的断点及以上宽度时，容器宽度为 100%，在更小宽度时具有固定宽度。
1.3 断点（Breakpoints）
Bootstrap 5 定义了以下断点，用于响应式设计：
| 断点 | 类前缀 | 尺寸（px） |
|---|---|---|
| 超小设备 | xs | <576 |
| 小型设备 | sm | ≥576 |
| 中型设备 | md | ≥768 |
| 大型设备 | lg | ≥992 |
| 超大型设备 | xl | ≥1200 |
| 超超大型设备 | xxl | ≥1400 |
二、容器语法详解
2.1 基本容器（.container）
<div class="container"><!-- 内容 -->
</div>
- 特点：在每个断点处具有不同的
max-width，提供响应式固定宽度。 - 适用场景：需要根据不同设备宽度调整内容宽度的场景。
2.2 全宽容器（.container-fluid）
<div class="container-fluid"><!-- 内容 -->
</div>
- 特点：始终占据整个视口宽度（100%）。
- 适用场景：需要内容全宽显示的场景，如全屏布局、背景图等。
2.3 响应式容器（.container-{breakpoint}）
<div class="container-sm"><!-- 在小型设备及以上宽度时，宽度为 100% -->
</div><div class="container-md"><!-- 在中型设备及以上宽度时，宽度为 100% -->
</div><div class="container-lg"><!-- 在大型设备及以上宽度时，宽度为 100% -->
</div><div class="container-xl"><!-- 在超大型设备及以上宽度时，宽度为 100% -->
</div><div class="container-xxl"><!-- 在超超大型设备及以上宽度时，宽度为 100% -->
</div>
- 特点：在不同断点处具有不同的宽度行为。
- 适用场景：需要根据特定断点调整容器宽度的场景。
三、案例代码详解
以下是一个包含详细注释的 Bootstrap 5 容器案例，展示了不同类型容器的使用方法和效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 5 容器案例</title><!-- 引入 Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><style>/* 自定义样式，用于演示容器效果 */.box {background-color: #f8f9fa;border: 1px solid #dee2e6;padding: 20px;margin-bottom: 20px;}.box-fluid {background-color: #e9ecef;border: 1px solid #ced4da;padding: 20px;margin-bottom: 20px;}</style>
</head>
<body><div class="container mt-5"><h2>1. 基本容器（.container）</h2><div class="box"><p>这是一个基本的 .container 容器。在不同设备上具有不同的最大宽度，提供响应式固定宽度。</p></div></div><div class="container-fluid mt-5"><h2>2. 全宽容器（.container-fluid）</h2><div class="box-fluid"><p>这是一个 .container-fluid 容器，始终占据整个视口宽度（100%）。适用于需要全宽显示的内容。</p></div></div><div class="container mt-5"><h2>3. 响应式容器（.container-{breakpoint}）</h2><div class="box"><p>以下是不同断点下的响应式容器示例：</p><ul><li><strong>.container-sm</strong>: 在小型设备及以上宽度时，宽度为 100%</li><li><strong>.container-md</strong>: 在中型设备及以上宽度时，宽度为 100%</li><li><strong>.container-lg</strong>: 在大型设备及以上宽度时，宽度为 100%</li><li><strong>.container-xl</strong>: 在超大型设备及以上宽度时，宽度为 100%</li><li><strong>.container-xxl</strong>: 在超超大型设备及以上宽度时，宽度为 100%</li></ul></div><div class="box mt-3"><p><strong>.container-sm</strong></p><div class="container-sm"><div class="box" style="background-color: #dee2e6;"><p>在小型设备及以上宽度时，宽度为 100%</p></div></div></div><div class="box mt-3"><p><strong>.container-md</strong></p><div class="container-md"><div class="box" style="background-color: #dee2e6;"><p>在中型设备及以上宽度时，宽度为 100%</p></div></div></div><div class="box mt-3"><p><strong>.container-lg</strong></p><div class="container-lg"><div class="box" style="background-color: #dee2e6;"><p>在大型设备及以上宽度时，宽度为 100%</p></div></div></div><div class="box mt-3"><p><strong>.container-xl</strong></p><div class="container-xl"><div class="box" style="background-color: #dee2e6;"><p>在超大型设备及以上宽度时，宽度为 100%</p></div></div></div><div class="box mt-3"><p><strong>.container-xxl</strong></p><div class="container-xxl"><div class="box" style="background-color: #dee2e6;"><p>在超超大型设备及以上宽度时，宽度为 100%</p></div></div></div></div><!-- 引入 Bootstrap 5 JS（可选） --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
3.1 代码说明
-
引入 Bootstrap 5 CSS 和 JS：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>- 通过 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件，确保使用 Bootstrap 的样式和功能。
-
自定义样式：
.box {background-color: #f8f9fa;border: 1px solid #dee2e6;padding: 20px;margin-bottom: 20px; } .box-fluid {background-color: #e9ecef;border: 1px solid #ced4da;padding: 20px;margin-bottom: 20px; }- 为不同类型的容器添加背景色、边框和内边距，以便更清晰地展示容器效果。
-
基本容器（.container）：
<div class="container mt-5"><h2>1. 基本容器（.container）</h2><div class="box"><p>这是一个基本的 .container 容器。在不同设备上具有不同的最大宽度，提供响应式固定宽度。</p></div> </div>- 使用
.container类创建一个基本容器，具有响应式固定宽度。
- 使用
-
全宽容器（.container-fluid）：
<div class="container-fluid mt-5"><h2>2. 全宽容器（.container-fluid）</h2><div class="box-fluid"><p>这是一个 .container-fluid 容器，始终占据整个视口宽度（100%）。适用于需要全宽显示的内容。</p></div> </div>- 使用
.container-fluid类创建一个全宽容器，始终占据整个视口宽度。
- 使用
-
响应式容器（.container-{breakpoint}）：
<div class="container mt-5"><h2>3. 响应式容器（.container-{breakpoint}）</h2><div class="box"><p>以下是不同断点下的响应式容器示例：</p><ul><li><strong>.container-sm</strong>: 在小型设备及以上宽度时，宽度为 100%</li><li><strong>.container-md</strong>: 在中型设备及以上宽度时，宽度为 100%</li><li><strong>.container-lg</strong>: 在大型设备及以上宽度时，宽度为 100%</li><li><strong>.container-xl</strong>: 在超大型设备及以上宽度时，宽度为 100%</li><li><strong>.container-xxl</strong>: 在超超大型设备及以上宽度时，宽度为 100%</li></ul></div>- 展示了不同断点下的响应式容器，并分别用不同的
.container-{breakpoint}类进行演示。
- 展示了不同断点下的响应式容器，并分别用不同的
-
响应式容器示例：
<div class="box mt-3"><p><strong>.container-sm</strong></p><div class="container-sm"><div class="box" style="background-color: #dee2e6;"><p>在小型设备及以上宽度时，宽度为 100%</p></div></div> </div>- 每个响应式容器示例都包含一个子容器（
.box），用于展示在不同设备宽度下的行为。
- 每个响应式容器示例都包含一个子容器（
3.2 响应式效果演示
为了更好地理解不同容器的响应式行为，可以调整浏览器窗口的宽度，观察容器宽度的变化：
.container：在不同断点处具有不同的最大宽度。.container-fluid：始终占据整个视口宽度。.container-sm：在小型设备及以上宽度时，宽度为 100%，在更小设备时具有固定宽度。.container-md、.container-lg、.container-xl、.container-xxl：类似地，根据不同的断点调整宽度。
四、总结
Bootstrap 5 的容器系统为开发者提供了强大的响应式布局工具。通过合理使用不同类型的容器，可以轻松实现各种布局需求。