Bootstrap栅格布局是一种响应式网格系统，用于构建灵活的网页布局。它基于12个网格列的概念，可以将网页内容分成多个部分，并通过在不同屏幕尺寸下设置列的宽度、偏移和排序，来适应不同的设备和布局需求。
栅格容器
在使用Bootstrap栅格布局之前，首先需要创建一个栅格容器（Grid Container）。栅格容器使用.container类或.container-fluid类进行定义。
.container类创建一个固定宽度的容器，宽度随着屏幕尺寸的增大而增大。它在内容周围添加了一些内边距，以保持良好的视觉外观。
.container-fluid类创建一个占据整个视口宽度的容器，它会自动填充可用空间。
以下是一个示例，展示了栅格容器的使用：
代码语言：javascript复制<div class="container">
<!-- 内容 -->
</div>
<div class="container-fluid">
<!-- 内容 -->
</div>栅格行和列
栅格布局的核心是行（Row）和列（Column）。行使用.row类进行定义，用于容纳列。列使用.col-*类进行定义，用于布局和分割内容。
在Bootstrap中，列基于12个网格系统，意味着一行中最多可以包含12个列。可以将12个列均匀分割成几个部分，或根据需要指定每个列的宽度。
常用的列类如下所示：
.col-{breakpoint}-{number}: 在指定断点（breakpoint）处，将列的宽度设置为指定的数量（number）。
其中，breakpoint可以是以下断点之一：
xs：超小屏幕（Extra Small），通常是移动设备上的横向布局。sm：小屏幕（Small），通常是平板电脑上的纵向布局。md：中等屏幕（Medium），通常是小型笔记本电脑和台式机上的布局。lg：大屏幕（Large），通常是较大的笔记本电脑和台式机上的布局。xl：超大屏幕（Extra Large），通常是更大的显示器上的布局。
以下是一个示例，展示了栅格行和列的使用：
代码语言：javascript复制<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<!-- 内容 -->
</div>
<div class="col-sm-6 col-md-4">
<!-- 内容 -->
</div>
<div class="col-sm-6 col-md-4">
<!-- 内容 -->
</div>
</div>
</div>在上述示例中，我们创建了一个容器（.container），容器中包含一个行（.row）。行中包含了三个列（.col-sm-6 col-md-4）。
- 在小屏幕（
sm）上，每个列占据了一半的宽度（.col-sm-6）。 - 在中等屏幕（
md）及以上的屏幕尺寸上，每个列占据了三分之一的宽度（.col-md-4）。
通过使用栅格行和列，我们可以创建自适应的网页布局。通过指定不同的列宽度和断点，可以在不同屏幕尺寸下呈现不同的布局。
偏移和排序
除了基本的栅格布局，Bootstrap还提供了偏移和排序功能，用于进一步控制列的位置和顺序。
- 偏移（Offset）：可以通过
.offset-*类向右偏移列。例如，.offset-md-2将在中等屏幕及以上的屏幕尺寸上向右偏移2个列的宽度。 - 排序（Ordering）：可以通过
.order-*类更改列的顺序。例如，.order-md-1将在中等屏幕及以上的屏幕尺寸上将列设置为第一个。
通过使用偏移和排序，我们可以实现更灵活的布局调整，以适应不同屏幕尺寸和设计需求。
