Bootstrap 网格系统

什么是网格系统？

Bootstrap 的网格系统是一个强大的移动设备优先的 flexbox 网格系统，用于构建各种形状和大小的布局。它基于 12 列系统，具有多个层级、强大的预定义类和 Sass mixins。

网格系统工作原理

网格系统使用一系列容器、行和列来布局和对齐内容：

容器 (Container) - 提供居中和水平填充内容的方式
行 (Row) - 列的水平组
列 (Column) - 内容放置的地方

基本结构

html

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

断点系统

Bootstrap 使用以下断点来创建响应式布局：

断点	类前缀	尺寸
Extra small	无	`<576px`
Small	`sm`	`≥576px`
Medium	`md`	`≥768px`
Large	`lg`	`≥992px`
Extra large	`xl`	`≥1200px`
Extra extra large	`xxl`	`≥1400px`

列类

1. 自动宽度列

html

<div class="container">
    <div class="row">
        <div class="col">自动宽度</div>
        <div class="col">自动宽度</div>
        <div class="col">自动宽度</div>
    </div>
</div>

2. 指定宽度列

使用数字指定列占用的份数（1-12）：

html

<div class="container">
    <div class="row">
        <div class="col-4">4 列宽</div>
        <div class="col-8">8 列宽</div>
    </div>
    <div class="row">
        <div class="col-6">6 列宽</div>
        <div class="col-6">6 列宽</div>
    </div>
</div>

3. 响应式列

为不同屏幕尺寸指定不同的列宽：

html

<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>

实际示例

基本网格示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 网格系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .demo-col {
            background-color: #e9ecef;
            border: 1px solid #dee2e6;
            padding: 10px;
            margin-bottom: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Bootstrap 网格系统示例</h1>
        
        <!-- 等宽列 -->
        <h2>等宽列</h2>
        <div class="row">
            <div class="col demo-col">列 1</div>
            <div class="col demo-col">列 2</div>
            <div class="col demo-col">列 3</div>
        </div>
        
        <!-- 指定宽度列 -->
        <h2>指定宽度列</h2>
        <div class="row">
            <div class="col-3 demo-col">3 列</div>
            <div class="col-6 demo-col">6 列</div>
            <div class="col-3 demo-col">3 列</div>
        </div>
        
        <!-- 响应式列 -->
        <h2>响应式列</h2>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-3 demo-col">
                响应式 1
            </div>
            <div class="col-12 col-md-6 col-lg-3 demo-col">
                响应式 2
            </div>
            <div class="col-12 col-md-6 col-lg-3 demo-col">
                响应式 3
            </div>
            <div class="col-12 col-md-6 col-lg-3 demo-col">
                响应式 4
            </div>
        </div>
    </div>
</body>
</html>

列对齐

垂直对齐

使用 flexbox 对齐工具类：

html

<!-- 顶部对齐 -->
<div class="row align-items-start">
    <div class="col">列 1</div>
    <div class="col">列 2</div>
</div>

<!-- 居中对齐 -->
<div class="row align-items-center">
    <div class="col">列 1</div>
    <div class="col">列 2</div>
</div>

<!-- 底部对齐 -->
<div class="row align-items-end">
    <div class="col">列 1</div>
    <div class="col">列 2</div>
</div>

水平对齐

html

<!-- 左对齐 -->
<div class="row justify-content-start">
    <div class="col-4">列 1</div>
    <div class="col-4">列 2</div>
</div>

<!-- 居中对齐 -->
<div class="row justify-content-center">
    <div class="col-4">列 1</div>
    <div class="col-4">列 2</div>
</div>

<!-- 右对齐 -->
<div class="row justify-content-end">
    <div class="col-4">列 1</div>
    <div class="col-4">列 2</div>
</div>

<!-- 两端对齐 -->
<div class="row justify-content-between">
    <div class="col-4">列 1</div>
    <div class="col-4">列 2</div>
</div>

列偏移

使用 offset 类来移动列：

html

<div class="row">
    <div class="col-md-4">正常列</div>
    <div class="col-md-4 offset-md-4">偏移 4 列</div>
</div>

<div class="row">
    <div class="col-md-3 offset-md-3">偏移 3 列</div>
    <div class="col-md-3 offset-md-3">偏移 3 列</div>
</div>

列排序

使用 order 类改变列的显示顺序：

html

<div class="row">
    <div class="col order-3">第一个（显示第三）</div>
    <div class="col order-1">第二个（显示第一）</div>
    <div class="col order-2">第三个（显示第二）</div>
</div>

嵌套网格

在列内可以嵌套新的行和列：

html

<div class="row">
    <div class="col-sm-3">
        第一级列
    </div>
    <div class="col-sm-9">
        <div class="row">
            <div class="col-8 col-sm-6">
                嵌套列 1
            </div>
            <div class="col-4 col-sm-6">
                嵌套列 2
            </div>
        </div>
    </div>
</div>

间距 (Gutters)

默认间距

行和列之间有默认的间距（gutter）。

自定义间距

html

<!-- 无间距 -->
<div class="row g-0">
    <div class="col-sm-6 col-md-8">列 1</div>
    <div class="col-6 col-md-4">列 2</div>
</div>

<!-- 大间距 -->
<div class="row g-5">
    <div class="col-sm-6 col-md-8">列 1</div>
    <div class="col-6 col-md-4">列 2</div>
</div>

常见布局模式

1. 两列布局

html

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

2. 三列布局

html

<div class="row">
    <div class="col-md-3">左侧边栏</div>
    <div class="col-md-6">主要内容</div>
    <div class="col-md-3">右侧边栏</div>
</div>

3. 卡片网格

html

<div class="row">
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">卡片 1</h5>
                <p class="card-text">卡片内容</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">卡片 2</h5>
                <p class="card-text">卡片内容</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">卡片 3</h5>
                <p class="card-text">卡片内容</p>
            </div>
        </div>
    </div>
</div>

最佳实践

移动设备优先：先设计小屏幕布局，再扩展到大屏幕
使用语义化的列宽：选择有意义的列宽组合
避免过度嵌套：保持网格结构简单清晰
测试响应式：在不同设备上测试布局效果
合理使用偏移：适当使用偏移创建空白空间

下一步

现在你已经掌握了 Bootstrap 网格系统的使用方法，接下来我们将学习文字排版。

下一章：Bootstrap 文字排版 →

Bootstrap 网格系统 ​

什么是网格系统？ ​

网格系统工作原理 ​

基本结构 ​

断点系统 ​

列类 ​

1. 自动宽度列 ​

2. 指定宽度列 ​

3. 响应式列 ​

实际示例 ​

基本网格示例 ​

列对齐 ​

垂直对齐 ​

水平对齐 ​

列偏移 ​

列排序 ​

嵌套网格 ​

间距 (Gutters) ​

默认间距 ​

自定义间距 ​

常见布局模式 ​

1. 两列布局 ​

2. 三列布局 ​

3. 卡片网格 ​

最佳实践 ​

下一步 ​

Bootstrap 网格系统

什么是网格系统？

网格系统工作原理

基本结构

断点系统

列类

1. 自动宽度列

2. 指定宽度列

3. 响应式列

实际示例

基本网格示例

列对齐

垂直对齐

水平对齐

列偏移

列排序

嵌套网格

间距 (Gutters)

默认间距

自定义间距

常见布局模式

1. 两列布局

2. 三列布局

3. 卡片网格

最佳实践

下一步