1. 容器（Container）
在 Bootstrap 中，容器用于包裹网页的内容，分为两种类型：.container 和 .container-fluid。
- .container： 固定宽度的容器，根据屏幕宽度自动调整大小，适合于响应式设计。
<div class="container">
<!-- 网页内容放在这里 -->
</div>
- .container-fluid： 充满整个视口的容器，会占据整个屏幕的宽度。
<div class="container-fluid">
<!-- 网页内容放在这里 -->
</div>
2. 行（Row）
在容器内，使用行来创建水平的块。每一行可以包含 12 个列，这是网格系统的基础。
<div class="container">
<div class="row">
<!-- 列放在这里 -->
</div>
</div>
3. 列（Column）
列是行中的水平块，Bootstrap 使用 12 列的网格系统。每个列有相应的类，如 .col-、.col-md-、.col-lg- 等，用于指定在不同屏幕尺寸下列所占的宽度。
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- 占据6列的内容 -->
</div>
<div class="col-md-6">
<!-- 占据6列的内容 -->
</div>
</div>
</div>
在上述例子中，每个列占据了在中等屏幕（md）尺寸下的一半宽度。你可以根据需要调整列的宽度，总和不超过 12。
4. 响应式断点
Bootstrap 提供了几个响应式断点，用于指定在不同屏幕尺寸下如何显示列：
- col-xs-： 超小屏幕（<576px）
- col-sm-： 小屏幕（≥576px）
- col-md-： 中等屏幕（≥768px）
- col-lg-： 大屏幕（≥992px）
- col-xl-： 超大屏幕（≥1200px）
示例：
<div class="container">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
上述示例在中等屏幕尺寸下，创建了一行包含三个等宽的列。
这只是 Bootstrap 网格系统的入门介绍，更复杂的布局和定制可以通过组合使用容器、行和列来实现。查阅 Bootstrap 官方文档以获取更详细的信息和示例：[Bootstrap Grid System](https://getbootstrap.com/docs/4.3/layout/grid/)。
转载请注明出处：http://www.zyzy.cn/article/detail/12600/Bootstrap