前言
- Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
Bootstrap5 容器
Bootstrap 需要一个容器元素来包裹网站的内容。我们可以使用以下两个容器类：
- .container 类用于固定宽度并支持响应式布局的容器。
- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<br>
<br>
<div class="container" style="background-color: green; color: white;">
<p>container</p>
</div>
<div class="container-fluid" style="background-color: blue; color: white;">
<p>container-fluid</p>
</div>
</body>
</html>
容器内边距
默认情况下，容器都有填充左右内边距，顶部和底部没有填充内边距。 Bootstrap 提供了一些间距类用于填充边距。 比如 .pt-5 就是用于填充顶部内边距：
<div class="container" style="background-color: green; color: white;">
<p>container</p>
<div class="container" style="background-color:purple; color: white;">
<p>containe pt-5</p>
</div>
</div>
未加入pt-5:
容器的边框和颜色
Bootstrap 提供了一些边框（border）和颜色（bg-dark、bg-primary等）类用于设置容器的样式。
响应式容器
-
可以使用
.container-sm|md|lg|xl类来创建响应式容器。 -
容器的 max-width 属性值会根据屏幕的大小来改变。