何雨果的知识库

Appearance

Bootstrap 栅格系统 ​

FrameworkLayout System

Bootstrap 的 12 列栅格系统 是其最核心的功能，基于 Flexbox 构建。通过 Container → Row → Col 三层结构，开发者可以快速创建响应式布局，无需手写 CSS。

一、📦 什么是 Bootstrap ​

Bootstrap 是由 Twitter 开发者 Mark Otto 和 Jacob Thornton 于 2010 年创建的 CSS 框架，提供预制的 CSS 类和 JavaScript 组件。

1.1 引入方式（CDN） ​

html
<head>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
        rel="stylesheet" />
</head>
<body>
  <!-- 页面内容 -->

  <!-- Bootstrap JS（按钮交互、下拉菜单等需要） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

1.2 自定义 CSS 覆盖 ​

html
<head>
  <!-- 1. 先引入 Bootstrap -->
  <link href="bootstrap.min.css" rel="stylesheet" />
  <!-- 2. 再引入自定义样式（顺序很重要！） -->
  <link href="custom.css" rel="stylesheet" />
</head>

CSS 优先级

自定义 CSS 文件 必须在 Bootstrap 之后 引入，才能成功覆盖默认样式。也可使用 Internal CSS 或 Inline CSS。

1.3 优缺点 ​

✅ 优点❌ 缺点
快速开发Class 膨胀：HTML 中堆积大量类名
预制组件丰富自定义困难：深度定制需大量覆盖
一致的视觉风格网站容易"千篇一律"
跨浏览器兼容引入框架增加文件体积

二、📊 三层结构：Container → Row → Col ​

html
<div class="container">          <!-- 1. 容器：设定最大宽度 -->
  <div class="row">              <!-- 2. 行：水平排列子元素 -->
    <div class="col">Item 1</div>  <!-- 3. 列：控制比例 -->
    <div class="col">Item 2</div>
    <div class="col">Item 3</div>
  </div>
</div>

2.1 Container 类型 ​

类名行为适用场景
container各断点有 固定最大宽度，两侧留白标准页面布局
container-fluid始终 100% 宽度，无留白全宽布局
container-sm≥576px 时有最大宽度，更小时 100%自定义响应
container-md≥768px 时有最大宽度自定义响应
container-lg≥992px 时有最大宽度自定义响应
container-xl≥1200px 时有最大宽度自定义响应
container-xxl≥1400px 时有最大宽度自定义响应

2.2 Container 宽度一览 ​

断点container 最大宽度
<576px100%
≥576px (sm)540px
≥768px (md)720px
≥992px (lg)960px
≥1200px (xl)1140px
≥1400px (xxl)1320px

三、📐 12 列系统 ​

3.1 基本原理 ​

每行被分为 12 等份，通过 col-N 指定每列占几份：

html
<div class="row">
  <div class="col-2">2/12 = 16.7%</div>
  <div class="col-4">4/12 = 33.3%</div>
  <div class="col-6">6/12 = 50.0%</div>
</div>
|  col-2  |    col-4    |        col-6        |
|▓▓|▓▓|  |  |  |  |  |  |  |  |  |  |  |  |  |
 1   2   3   4   5   6   7   8   9  10  11  12

12 列的灵活性

12 可以被 1、2、3、4、6、12 整除，因此容易创建等分 2 列、3 列、4 列、6 列布局。

3.2 自动均分 ​

不指定数字时，所有 col 自动 均分 可用空间：

html
<div class="row">
  <div class="col">自动 1/3</div>
  <div class="col">自动 1/3</div>
  <div class="col">自动 1/3</div>
</div>

3.3 混合定义 ​

部分列指定大小，其余列自动填充剩余空间：

html
<div class="row">
  <div class="col-2">固定 2/12</div>
  <div class="col-4">固定 4/12</div>
  <div class="col">自动：剩余 6/12</div>
</div>

3.4 超过 12 列时换行 ​

同一行内 col 数字之和超过 12，多余的列会 自动换行：

html
<div class="row">
  <div class="col-8">8/12</div>
  <div class="col-6">6/12（超过12，换到下一行）</div>
</div>

四、📱 响应式断点 ​

4.1 六大断点 ​

断点前缀宽度范围典型设备
X-Small（无）<576px折叠屏/小手机
Smallsm≥576px手机
Mediummd≥768px平板
Largelg≥992px笔记本
X-Largexl≥1200px桌面
XX-Largexxl≥1400px大屏

方向性

断点表示 该宽度及以上。col-lg-6 意味着当屏幕 ≥992px 时占 6/12。低于此断点时，如果没有定义更小的断点，默认为 100% 宽度。

4.2 单断点响应式 ​

html
<!-- 桌面：50% | 移动端：100%（默认） -->
<div class="col-xl-6">...</div>

不需要显式写 col-12，因为低于定义的断点时 默认就是 100%。

4.3 多断点响应式 ​

一个元素可以设置 多个断点：

html
<div class="col-12 col-sm-8 col-lg-4">
  <!-- 手机(<576px)：100%  |  平板(≥576px)：66.7%  |  桌面(≥992px)：33.3% -->
</div>
屏幕宽度生效的类占比
<576pxcol-12100%
≥576pxcol-sm-866.7%
≥992pxcol-lg-433.3%

4.4 实战示例 ​

三卡片布局 ​

html
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Card 1</div>
    <div class="col-12 col-md-6 col-lg-4">Card 2</div>
    <div class="col-12 col-md-12 col-lg-4">Card 3</div>
  </div>
</div>
屏幕布局
手机一列（每卡 100%）
平板两列 + 一列
桌面三列均分

侧边栏 + 主内容 ​

html
<div class="row">
  <div class="col-12 col-lg-3">侧边栏</div>
  <div class="col-12 col-lg-9">主内容</div>
</div>

五、📏 列偏移与对齐 ​

5.1 列偏移（Offset） ​

html
<div class="row">
  <div class="col-4 offset-4">居中的 4 列</div>
</div>

offset-N 在列左侧添加 N/12 的空白，实现偏移。

5.2 行对齐（基于 Flexbox） ​

html
<!-- 水平居中 -->
<div class="row justify-content-center">
  <div class="col-4">居中</div>
</div>

<!-- 水平分散 -->
<div class="row justify-content-between">
  <div class="col-3">左</div>
  <div class="col-3">右</div>
</div>

<!-- 垂直居中 -->
<div class="row align-items-center" style="height: 300px;">
  <div class="col">垂直居中</div>
</div>

5.3 列排序（Order） ​

html
<div class="row">
  <div class="col order-3">视觉上排第三</div>
  <div class="col order-1">视觉上排第一</div>
  <div class="col order-2">视觉上排第二</div>
</div>

六、🔍 DevTools 调试 ​

6.1 检查断点 ​

在 Chrome DevTools 中切换设备模拟器（⌘ + ⇧ + M），拖动宽度观察：

  • 哪个宽度触发了列的比例变化
  • Container 宽度是否符合预期
  • 列是否在正确的断点换行

6.2 检查 Bootstrap 类 ​

选中元素 → Styles 面板 → 搜索类名，可以看到 Bootstrap 为该类定义的具体 CSS 规则。

七、💡 实践要点 ​

#要点说明
1col 数字加和 = 12超过 12 的列会自动换行
2不定义 = 100%低于断点时，未定义的列默认占满整行
3container vs container-fluid有留白 vs 满宽，根据设计选择
4从最小断点开始定义先 col-12，再 col-sm-*、col-md-*...
5用 DevTools 测试断点切换设备模拟器验证各尺寸下的效果
6嵌套 RowRow 内可以再嵌套 Row，内层也按 12 列分

八、📚 参考资源 ​

← 返回 Web 开发研究