容器是 Bootstrap 中的核心组件之一，用于定义页面的基本结构和布局。容器通过限制宽度和居中内容来帮助你创建响应式的布局。
容器的类型
Bootstrap 提供了三种不同类型的容器：常规容器、流体容器和响应式容器。每种容器都有其特定用途。
常规容器
常规容器用于固定宽度的内容区域，它会根据屏幕大小自动调整内容的最大宽度。使用 .container 类可以创建一个常规容器。
<div class="container">
<h1>这是一个常规容器</h1>
<p>容器中的内容将被限制在一个固定宽度内。</p>
</div>流体容器
流体容器用于占据整个视口宽度的内容区域，但不会像常规容器那样限制最大宽度。使用 .container-fluid 类可以创建一个流体容器。
<div class="container-fluid">
<h1>这是一个流体容器</h1>
<p>容器将占满整个视口宽度。</p>
</div>响应式容器
响应式容器可以根据不同的屏幕尺寸采用不同的宽度。例如，你可以为小屏幕设备使用常规容器，为大屏幕设备使用流体容器。这种策略可以通过媒体查询实现。
// www.javascriptcn.com code example
<div class="container d-sm-block d-md-none">
<h1>这是一个响应式容器</h1>
<p>在小屏幕上显示为常规容器，在大屏幕上隐藏。</p>
</div>
<div class="container-fluid d-sm-none d-md-block">
<h1>这是另一个响应式容器</h1>
<p>在大屏幕上显示为流体容器，在小屏幕上隐藏。</p>
</div>容器的布局
容器不仅可以控制内容的宽度，还可以影响布局的其他方面，如对齐方式和间距。
对齐方式
容器可以通过一些辅助类来控制其内部内容的水平和垂直对齐方式。例如，使用 .justify-content-center 类可以使内容在水平方向上居中。
<div class="container text-center">
<h1>水平居中文本</h1>
<p>使用 .text-center 类使文本居中。</p>
</div>
<div class="container d-flex justify-content-center">
<button class="btn btn-primary">点击我</button>
</div>边距和填充
容器内部的内容可以通过添加适当的边距和填充类来增加间距。Bootstrap 提供了一系列的边距和填充类，可以方便地调整元素之间的距离。
// www.javascriptcn.com code example
<div class="container my-3">
<h1>带有上下的边距</h1>
<p>使用 .my-3 类添加上下边距。</p>
</div>
<div class="container px-5">
<h1>增加内边距</h1>
<p>使用 .px-5 类增加水平内边距。</p>
</div>容器与网格系统
容器与 Bootstrap 的网格系统紧密相关。网格系统可以帮助你在容器内部创建响应式的布局。
基础网格
基础网格由一系列的行和列组成。每一行包含一个或多个列，而每一列都有固定的宽度和间距。
<div class="container">
<div class="row">
<div class="col-6">左半部分</div>
<div class="col-6">右半部分</div>
</div>
</div>响应式网格
响应式网格可以根据不同的屏幕尺寸自适应调整列的宽度。Bootstrap 提供了多个断点来支持不同设备的布局。
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">第一列</div>
<div class="col-12 col-md-6 col-lg-4">第二列</div>
<div class="col-12 col-md-12 col-lg-4">第三列</div>
</div>
</div>总结
容器是 Bootstrap 布局的基础，掌握容器的使用方法对于创建美观且功能强大的网页至关重要。通过理解不同类型容器的特点以及如何结合网格系统来创建响应式布局，你可以构建出各种复杂的网页结构。
接下来，我们将深入了解 Bootstrap 的其他核心组件，如导航栏和卡片等。