Bootstrap 布局容器与栅格布局

Bootstrap 的布局系统是其核心之一，提供了一个灵活、响应式的布局结构。通过容器 (container) 和栅格系统 (grid system)，开发者可以轻松构建响应式网页。以下是详细介绍。

1. 布局容器

在 Bootstrap 中，容器用于包裹页面的内容，并控制内容的宽度。容器有两种类型：

1.1 固定宽度容器 (.container)

• 适用于设计需要在不同屏幕尺寸下具有固定宽度的布局。
• 在不同屏幕尺寸下，容器的宽度是固定的（例如，最大宽度为 960px 或 1140px），而不是占满整个屏幕。

示例：

<div class="container">
    <p>这是一个固定宽度的容器。</p>
</div>

1.2 流式容器 (.container-fluid)

• 它的宽度是 100% 的，始终适应浏览器的宽度，适用于响应式设计。
• 流式容器会根据设备屏幕大小自动扩展或收缩，适合多种设备使用。

示例：

<div class="container-fluid">
    <p>这是一个流式宽度的容器。</p>
</div>

2. 栅格系统

Bootstrap 使用 12 列的栅格系统来控制布局。通过在 row 中定义多个 col（列），可以创建响应式和自适应布局。

2.1 基本栅格系统

栅格系统基于行 (row) 和列 (col) 来划分页面布局。在一个 .row 元素中，列元素会分布在12个等宽的列上。

每一列使用 .col-{breakpoint}-{number} 类来控制占据的宽度。{number} 的范围是 1 到 12，表示该列占据的栅格数量。

示例：

<div class="container">
    <div class="row">
        <div class="col-4">内容 1</div>  <!-- 占据 4/12 的宽度 -->
        <div class="col-4">内容 2</div>  <!-- 占据 4/12 的宽度 -->
        <div class="col-4">内容 3</div>  <!-- 占据 4/12 的宽度 -->
    </div>
</div>

在上述代码中，.col-4 表示每个列占据 4 个栅格，因此 3 个 .col-4 列会一共占满 12 个栅格。

2.2 响应式栅格

Bootstrap 的栅格系统是响应式的，可以根据不同的屏幕尺寸调整布局。在 col 类中使用不同的断点（xs, sm, md, lg, xl）来定义不同屏幕大小下的列宽度。

示例：
在不同屏幕宽度下，列宽度的变化：

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4">内容 1</div>  <!-- 在小屏幕占满整行，在中等屏幕占据 6/12 的宽度，在大屏幕占据 4/12 -->
        <div class="col-12 col-md-6 col-lg-4">内容 2</div>
        <div class="col-12 col-md-6 col-lg-4">内容 3</div>
    </div>
</div>

• col-12：在超小屏幕下，占据 12 个栅格（即整行）。
• col-md-6：在中等屏幕（≥768px）下，占据 6 个栅格（即两列显示）。
• col-lg-4：在大屏幕（≥992px）下，占据 4 个栅格（即三列显示）。

3. 栅格系统的偏移与嵌套

3.1 偏移列

使用 offset-{breakpoint}-{number} 类可以创建偏移的列，目的是让列向右移动指定的栅格宽度。

示例：

<div class="container">
    <div class="row">
        <div class="col-4">内容 1</div>
        <div class="col-4 offset-4">内容 2</div> <!-- 偏移 4/12 栅格 -->
    </div>
</div>

在此示例中，第二列使用了 offset-4，因此它会向右偏移 4 个栅格，使其与第一列对齐。

3.2 嵌套列

Bootstrap 允许在一个列中嵌套另一个 .row，这意味着可以在每个栅格中创建更多的栅格。

示例：

<div class="container">
    <div class="row">
        <div class="col-8">
            <div class="row">
                <div class="col-6">嵌套内容 1</div>
                <div class="col-6">嵌套内容 2</div>
            </div>
        </div>
        <div class="col-4">内容 2</div>
    </div>
</div>

在这个例子中，外部的 .col-8 列包含了一个内部的 .row，其中有两个 .col-6，即内部的列每个占据 6 个栅格。

4. 常见布局示例

4.1 两列布局

<div class="container">
    <div class="row">
        <div class="col-md-8">主内容</div>
        <div class="col-md-4">侧边栏</div>
    </div>
</div>

4.2 三列布局

<div class="container">
    <div class="row">
        <div class="col-md-4">左侧内容</div>
        <div class="col-md-4">中间内容</div>
        <div class="col-md-4">右侧内容</div>
    </div>
</div>

4.3 四列布局

<div class="container">
    <div class="row">
        <div class="col-md-3">列 1</div>
        <div class="col-md-3">列 2</div>
        <div class="col-md-3">列 3</div>
        <div class="col-md-3">列 4</div>
    </div>
</div>

总结

Bootstrap 的栅格布局系统使得创建响应式和流畅的页面布局变得非常简单。通过使用 container 和 row 类结合不同宽度的 col 类，可以灵活地控制页面的结构，并确保在不同设备上都能自适应展示。使用响应式类（如 col-sm-、col-md-）可以让你更精确地控制不同屏幕尺寸下的布局效果。