1. Bootstrap5中的断点
Bootstrap是一款流行的前端框架，用于快速搭建响应式网站，Bootstrap5中的断点指的是屏幕宽度的一些特定点，用于定义网站在不同设备上的展示方式，以适应不同的屏幕尺寸。
1.1 断点的分类
在Bootstrap5中，断点被分为以下几类：
xs：Extra Small，超小屏幕设备（<576px）
sm：Small，小型屏幕设备（≥576px）
md：Medium，中型屏幕设备（≥768px）
lg：Large，大型屏幕设备（≥992px）
xl：Extra Large，超大屏幕设备（≥1200px）
xxl：Extra Extra Large，超超大屏幕设备（≥1400px）
1.2 断点的应用
在Bootstrap5中，我们可以使用断点来定义网站在不同设备上的展示方式，例如设置具有响应式布局的导航栏，在不同屏幕尺寸上表现不同，如下：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
在这个例子中，navbar-expand-lg表示在宽度大于等于992px的大屏幕设备上，导航栏将一直处于展开状态，并且只有在点击按钮时才会折叠起来；而在小屏幕设备上，导航栏默认是折叠的，只有在点击按钮时才会展开，以适应较小的屏幕尺寸。
2. Bootstrap5中的容器
在构建Bootstrap网站时，容器是一个非常重要的概念。容器是一个包含网站内容的元素，用于限制网站的最大宽度，并确保内容在屏幕上居中对齐。
2.1 容器的分类
在Bootstrap5中，容器被分为以下几类：
container：用于创建一个固定宽度的容器，在所有屏幕上均匀对齐网站内容。
container-fluid：用于创建一个100%宽度的容器，可适应所有屏幕尺寸。
container-{breakpoint}：用于创建一个固定宽度的容器，在特定屏幕宽度下调整对齐方式。例如，container-lg将在大型屏幕设备上变为一个固定宽度的容器。
2.2 容器的应用
在Bootstrap5中，我们可以使用容器来包含网站的内容，并使其在不同设备上呈现不同的表现方式。例如：
<div class="container">
<h1>Hello, world!</h1>
<p>这是一个使用Bootstrap5的例子。</p>
</div>
<div class="container-fluid">
<h1>Hello, world!</h1>
<p>这是一个使用Bootstrap5的例子。</p>
</div>
<div class="container-lg">
<h1>Hello, world!</h1>
<p>这是一个使用Bootstrap5的例子。</p>
</div>
在这个例子中，第一个<div>元素使用了默认的固定宽度容器，第二个<div>元素使用container-fluid创建了一个100%宽度的容器，并可以适应所有屏幕尺寸；第三个<div>元素使用了container-lg，在大型屏幕设备上将显示为一个固定宽度的容器。