Bootstrap栅格布局

Bootstrap栅格布局是一种响应式网格系统，用于构建灵活的网页布局。它基于12个网格列的概念，可以将网页内容分成多个部分，并通过在不同屏幕尺寸下设置列的宽度、偏移和排序，来适应不同的设备和布局需求。

栅格容器

在使用Bootstrap栅格布局之前，首先需要创建一个栅格容器（Grid Container）。栅格容器使用.container类或.container-fluid类进行定义。

.container类创建一个固定宽度的容器，宽度随着屏幕尺寸的增大而增大。它在内容周围添加了一些内边距，以保持良好的视觉外观。

.container-fluid类创建一个占据整个视口宽度的容器，它会自动填充可用空间。

以下是一个示例，展示了栅格容器的使用：

<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），通常是更大的显示器上的布局。

以下是一个示例，展示了栅格行和列的使用：

<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将在中等屏幕及以上的屏幕尺寸上将列设置为第一个。

通过使用偏移和排序，我们可以实现更灵活的布局调整，以适应不同屏幕尺寸和设计需求。