Bootstrap 5 容器
Bootstrap 2023-08-10 09:26:51小码哥的IT人生shichen
Bootstrap 5 容器
Bootstrap 5 容器
从前一章中您学到了，Bootstrap 需要包含元素来包装站点内容。
我们在容器中填充内容，并且有两个容器类可用：
.container类提供了响应式的固定宽度容器.container-fluid类提供了全宽容器，跨越视口的整个宽度
固定容器
使用 .container 类创建响应式、固定宽度的容器。
请注意，它的宽度（max-width）会在不同的屏幕尺寸上发生变化：
| Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra Large ≥1200px |
XXL ≥1400px |
|
|---|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
请打开下面的例子并调整浏览器窗口的大小，来查看容器宽度在不同断点处发生的变化：
示例代码：
<div class="container">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这部分在 .container 类中。</p>
<p>.container 类提供了响应式固定宽度的容器。</p>
<p>调整浏览器窗口的大小，可查看容器宽度将在不同断点处发生变化。</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
XXL 断点（≥1400px）是 Bootstrap 5 中新增的，而 Bootstrap 4 中最大的断点是 Extra large（≥1200px）。
流体容器
使用 .container-fluid 类创建全宽容器，它总是跨越整个屏幕宽度（width 总是 100%）：
示例代码：
<div class="container-fluid">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这部分在 .container-fluid 类中。</p>
<p>.container-fluid 类提供全宽容器，跨越视口的整个宽度。</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
容器填充
默认情况下，容器有左右填充（左右内边距），没有顶部或底部填充（上下内边距）。因此，我们常使用 spacing 工具（utilities），诸如额外的填充和边距，使它们看起来更好。例如，.pt-5 的意思是“添加一个大的顶部填充”：
示例代码：
<div class="container pt-5"></div>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container pt-5">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这个容易有额外的上内边距。</p>
<p>请尝试删除 .pt-5 类，看看其中的差别。</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
容器边框和颜色
其他工具，诸如边框和颜色，也经常与容器一起使用：
示例代码：
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container p-5 my-5 border">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这个容器有边框和额外的内边距和外边距。</p>
</div>
<div class="container p-5 my-5 bg-dark text-white">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这个容器有深色背景色和白色文本，以及额外的内边距和外边距。</p>
</div>
<div class="container p-5 my-5 bg-primary text-white">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这个容器有蓝色背景色和白色文本，以及额外的内边距和外边距。</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
您将在后面的章节中学到更多关于颜色和边框工具的知识。
响应式容器
您还可以使用 .container-sm|md|lg|xl 类来确定容器何时应该响应。
容器的 max-width 将在不同的屏幕尺寸/视口上发生变化：
| 类 | Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
XXL ≥1400px |
|---|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
示例代码：
<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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container pt-3">
<h1>响应式容器</h1>
<p>请调整浏览器窗口大小来查看效果。</p>
</div>
<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
