网格系统

掌握Bootstrap强大的网格布局系统

全站首页 频道首页

Bootstrap网格系统概述

Bootstrap网格系统是基于Flexbox构建的响应式布局系统，包含容器、行和列，用于创建页面布局和对齐内容。它是Bootstrap框架中最强大的功能之一，能够帮助开发者快速构建复杂的响应式布局。

核心概念： Bootstrap网格系统采用12列布局，通过行和列的组合实现灵活的页面布局。

网格系统的重要性

在现代Web开发中，网格系统具有以下优势：

  • 一致性：确保页面布局的一致性和可预测性
  • 响应式：自动适应不同屏幕尺寸和设备
  • 效率：减少手动编写CSS布局代码的工作量
  • 维护性：使代码更易于理解和维护
  • 灵活性：支持复杂的布局需求

网格基础

Bootstrap网格系统由三个主要组件构成：容器(Container)、行(Row)和列(Column)。

网格结构

列 1
列 2
列 3
基础网格代码 
<div class="container">
  <div class="row">
    <div class="col">列 1</div>
    <div class="col">列 2</div>
    <div class="col">列 3</div>
  </div>
</div>

网格组件说明

组件 类名 作用
容器 .container 或 .container-fluid 包装内容，提供水平居中和最大宽度
行 .row 包装列，提供负边距抵消列的内边距
列 .col-* 实际的内容容器，使用12列系统

容器类型

Bootstrap提供了两种类型的容器：

  • .container - 响应式固定宽度容器，在不同断点有最大宽度限制
  • .container-fluid - 全宽容器，始终占据100%视口宽度
容器类型示例 
<!-- 固定宽度容器 -->
<div class="container">
  <!-- 内容 -->
</div>

<!-- 全宽容器 -->
<div class="container-fluid">
  <!-- 内容 -->
</div>

网格选项

Bootstrap网格系统提供了多个断点，允许在不同屏幕尺寸下创建不同的布局。

网格断点

断点 类名前缀 尺寸 容器最大宽度
X-Small .col- <576px None (auto)
Small .col-sm- ≥576px 540px
Medium .col-md- ≥768px 720px
Large .col-lg- ≥992px 960px
X-Large .col-xl- ≥1200px 1140px
XX-Large .col-xxl- ≥1400px 1320px

网格示例

.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
网格示例代码 
<div class="container">
  <!-- 两列布局 -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  
  <!-- 三列布局 -->
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  
  <!-- 混合布局 -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
</div>

断点工作原理

Bootstrap的网格系统采用移动优先的方法：

  1. 从最小屏幕尺寸开始设计
  2. 使用.col-*类定义移动设备上的布局
  3. 使用断点前缀类（如.col-md-*）为更大屏幕定义布局
  4. 网格类向上应用，意味着.col-md-适用于中等及以上屏幕

自动布局列

Bootstrap提供了自动布局列，无需指定列宽，系统会自动分配宽度。

等宽列

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
等宽列代码 
<div class="container">
  <div class="row">
    <div class="col">1 of 2</div>
    <div class="col">2 of 2</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col">2 of 3</div>
    <div class="col">3 of 3</div>
  </div>
</div>

设置一列宽度

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
设置一列宽度代码 
<div class="container">
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col-6">2 of 3 (wider)</div>
    <div class="col">3 of 3</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col-5">2 of 3 (wider)</div>
    <div class="col">3 of 3</div>
  </div>
</div>

可变宽度内容

1 of 3
可变宽度内容
3 of 3
1 of 3
可变宽度内容
3 of 3
可变宽度内容代码 
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">1 of 3</div>
    <div class="col-md-auto">可变宽度内容</div>
    <div class="col col-lg-2">3 of 3</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col-md-auto">可变宽度内容</div>
    <div class="col col-lg-2">3 of 3</div>
  </div>
</div>

响应式网格

Bootstrap网格系统可以创建在不同屏幕尺寸下表现不同的响应式布局。

响应式断点混合

.col-sm-6 .col-md-3
.col-sm-6 .col-md-3
.col-sm-6 .col-md-3
.col-sm-6 .col-md-3
响应式断点混合代码 
<div class="container">
  <!-- 在手机上一列，平板两列，桌面四列 -->
  <div class="row">
    <div class="col-sm-6 col-md-3">.col-sm-6 .col-md-3</div>
    <div class="col-sm-6 col-md-3">.col-sm-6 .col-md-3</div>
    <div class="col-sm-6 col-md-3">.col-sm-6 .col-md-3</div>
    <div class="col-sm-6 col-md-3">.col-sm-6 .col-md-3</div>
  </div>
</div>

行和列

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
行和列代码 
<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
  
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
  
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

嵌套网格

Bootstrap网格系统支持嵌套，可以在一个列内创建新的行和列。

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
嵌套网格代码 
<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

对齐

使用Flexbox对齐工具类垂直和水平对齐列。

垂直对齐

align-items-start
align-items-start
align-items-start
align-items-center
align-items-center
align-items-center
align-items-end
align-items-end
align-items-end
垂直对齐代码 
<div class="container">
  <div class="row align-items-start" style="min-height: 100px;">
    <div class="col">align-items-start</div>
    <div class="col">align-items-start</div>
    <div class="col">align-items-start</div>
  </div>
  <div class="row align-items-center" style="min-height: 100px;">
    <div class="col">align-items-center</div>
    <div class="col">align-items-center</div>
    <div class="col">align-items-center</div>
  </div>
  <div class="row align-items-end" style="min-height: 100px;">
    <div class="col">align-items-end</div>
    <div class="col">align-items-end</div>
    <div class="col">align-items-end</div>
  </div>
</div>

水平对齐

justify-content-start
justify-content-start
justify-content-center
justify-content-center
justify-content-end
justify-content-end
justify-content-around
justify-content-around
justify-content-between
justify-content-between
水平对齐代码 
<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">justify-content-start</div>
    <div class="col-4">justify-content-start</div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">justify-content-center</div>
    <div class="col-4">justify-content-center</div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">justify-content-end</div>
    <div class="col-4">justify-content-end</div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">justify-content-around</div>
    <div class="col-4">justify-content-around</div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">justify-content-between</div>
    <div class="col-4">justify-content-between</div>
  </div>
</div>

列换行

当一行中的列超过12时，多余的列将换行到新的一行。

列换行示例

.col-9
.col-4
由于9 + 4 = 13 > 12，此列换行。
.col-6
后续列继续换行。
列换行代码 
<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>由于9 + 4 = 13 > 12，此列换行。</div>
    <div class="col-6">.col-6<br>后续列继续换行。</div>
  </div>
</div>

重置偏移量

在特定断点重置偏移量，创建不同的布局。

偏移量重置示例

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
偏移量重置代码 
<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

实践练习

创建响应式布局

尝试使用Bootstrap网格系统创建一个完整的响应式布局：

布局练习 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格布局练习</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 页眉 -->
        <header class="row py-3 mb-4 border-bottom">
            <div class="col-md-6">
                <h1>网站标题</h1>
            </div>
            <div class="col-md-6 text-md-end">
                <nav>
                    <a href="#" class="text-decoration-none me-3">首页</a>
                    <a href="#" class="text-decoration-none me-3">关于</a>
                    <a href="#" class="text-decoration-none">联系</a>
                </nav>
            </div>
        </header>
        
        <!-- 主要内容 -->
        <main class="row">
            <!-- 侧边栏 -->
            <aside class="col-md-3">
                <h3>侧边栏</h3>
                <ul class="list-unstyled">
                    <li><a href="#">链接一</a></li>
                    <li><a href="#">链接二</a></li>
                    <li><a href="#">链接三</a></li>
                </ul>
            </aside>
            
            <!-- 内容区域 -->
            <section class="col-md-9">
                <h2>主要内容</h2>
                <div class="row">
                    <div class="col-sm-6 col-lg-4 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">卡片一</h5>
                                <p class="card-text">卡片内容示例。</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">卡片二</h5>
                                <p class="card-text">卡片内容示例。</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">卡片三</h5>
                                <p class="card-text">卡片内容示例。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        
        <!-- 页脚 -->
        <footer class="row mt-5 pt-3 border-top">
            <div class="col-12 text-center">
                <p>© 2023 版权所有</p>
            </div>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

常见布局模式

以下是一些常见的网格布局模式：

  • 单列布局： 适用于内容为主的页面
  • 两列布局： 主内容区+侧边栏的经典布局
  • 三列布局： 适用于复杂的仪表板或门户网站
  • 卡片网格： 适用于产品展示、博客文章等
  • 杂志布局： 不同大小的内容块组合

下一步学习

现在你已经了解了Bootstrap的网格系统，下一步可以学习：

1

响应式设计

深入学习Bootstrap的响应式设计原理

继续学习
2

工具类

掌握Bootstrap强大的工具类系统

继续学习
3

组件系统

学习使用丰富的UI组件

继续学习