Bootstrap 4

从 Bootstrap 3 迁移到 4

Bootstrap 4 相比 v3 经历了重大重构，从 Less 迁移到 Sass，从像素单位改为 rem，并引入了 Flexbox 网格系统。

注意：Bootstrap 4 与 v3 不向下兼容。升级需要模板代码进行较大范围修改。

重大变化

从 Less 到 Sass

Bootstrap 3 使用 Less 作为 CSS 预处理器，Bootstrap 4 全面迁移到 Sass。如果你之前使用 Less 自定义 Bootstrap，需要将所有自定义代码迁移到 Sass。

从像素到 rem

Bootstrap 3 几乎全部使用像素（px）单位，Bootstrap 4 全面改为 rem 单位，使得全局缩放更加灵活：

font-size 基准从 14px 改为 16px
间距（padding/margin）使用 rem 单位
通过修改 <html> 的 font-size 即可全局缩放

引入 Flexbox

Bootstrap 4 的网格系统从浮动布局改为 Flexbox 布局，带来了更灵活的对齐、排序和自适应宽度功能。

网格系统变化

特性	Bootstrap 3	Bootstrap 4
布局引擎	浮动（Float）	Flexbox
断点	4 个（xs/sm/md/lg）	5 个（xs/sm/md/lg/xl）
列偏移	`.col-md-offset-4`	`.offset-md-4`
列排序	`.col-md-push-4`/`.pull-4`	`.order-md-4`
列宽	`.col-md-4`	`.col-md-4`（名称相同）
容器	`.container`/`.container-fluid`	同前（新增响应式容器）

网格类名变化

<!-- Bootstrap 3 -->
<div class="row">
    <div class="col-sm-8 col-sm-offset-2">
        使用 offset 偏移
    </div>
</div>

<!-- Bootstrap 4 -->
<div class="row">
    <div class="col-sm-8 offset-sm-2">
        使用 offset 前缀
    </div>
</div>

组件变化

已移除的组件

Bootstrap 3	Bootstrap 4 替代
`.panel`	`.card`
`.well`	`.card` 或 `.bg-light .p-3 .rounded`
`.thumbnail`	`.card` 或 `.img-thumbnail`
`.list-group` 内的 `.badge`	Flexbox 工具类 + `.badge`
Glyphicons 图标	Font Awesome 或 Bootstrap Icons

按钮变化

<!-- Bootstrap 3 -->
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-xs">超小按钮</button>

<!-- Bootstrap 4 -->
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-sm">小按钮</button>

表单变化

<!-- Bootstrap 3 -->
<div class="form-group">
    <label for="input">输入框</label>
    <input type="text" class="form-control" id="input">
</div>

<!-- Bootstrap 4（v4 仍保留 .form-group）-->
<div class="form-group">
    <label for="input">输入框</label>
    <input type="text" class="form-control" id="input" placeholder="占位文字">
</div>

导航栏变化

<!-- Bootstrap 3 -->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">品牌</a>
        </div>
        <div class="collapse navbar-collapse" id="nav">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- Bootstrap 4 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">品牌</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">首页</a>
            </li>
        </ul>
    </div>
</nav>

图标变化

Bootstrap 3 内置了 Glyphicons 图标集（约 250 个图标），Bootstrap 4 完全移除了内置图标，推荐使用第三方图标库：

Bootstrap Icons — Bootstrap 官方开源的 SVG 图标库
Font Awesome — 最流行的第三方图标库
Material Icons — Google 出品的 Material Design 图标

CSS 类名变化速查

Bootstrap 3	Bootstrap 4
`.btn-default`	`.btn-secondary`
`.btn-xs`	`.btn-sm`
`.pull-left`	`.float-left`
`.pull-right`	`.float-right`
`.center-block`	`.mx-auto` 或 `.text-center`
`.hidden-*`	`.d-none` + 响应式类
`.visible-*`	`.d-*-block` 等
`.text-hide`	已移除，使用 `.sr-only`
`.caret`	已移除，使用 CSS 箭头
`.img-responsive`	`.img-fluid`
`.table-condensed`	`.table-sm`
`.help-block`	`.form-text` 或 `.text-muted`
`.input-lg`	`.form-control-lg`
`.input-sm`	`.form-control-sm`
`.nav-stacked`	`.flex-column`
`.navbar-right`	`.ml-auto`
`.navbar-left`	`.mr-auto`
`.page-header`	已移除，可自定义
`.list-inline`	保留（用法相同）
`.breadcrumb`	保留（用法相同）
`.pagination`	保留（用法相同）
`.progress`	保留（用法相同）
`.label`	`.badge`
`.alert`	保留（用法相同）
`.modal`	保留（用法相同）
`.dropdown`	保留（用法相同）
`.tooltip`	保留（用法相同）
`.popover`	保留（用法相同）

JavaScript 变化

特性	Bootstrap 3	Bootstrap 4
jQuery 依赖	jQuery 1.9.1+	jQuery 3.x + Popper.js
事件命名空间	`shown.bs.modal`	同前
初始化方式	`$().modal(options)`	同前
data 属性 API	`data-toggle`	同前（v5 才改为 `data-bs-toggle`）

升级步骤

将 Less 自定义代码迁移到 Sass
全局替换 CSS 类名（参考上方表格）
更新网格结构：移除 *-offset-*、*-push-*、*-pull-*
将 .panel、.well、.thumbnail 替换为 .card
移除 Glyphicons 图标，替换为 Bootstrap Icons 或 Font Awesome
更新导航栏结构（使用 .navbar-expand-*）
测试所有组件和交互效果
检查断点行为，确认响应式布局正常

常见迁移问题

使用 .card 替代 .panel。.card 更灵活，支持 .card-header、.card-body、.card-footer，还支持 .bg-* 和 .border-* 工具类组合实现不同的样式。

Bootstrap 4 不再内置 Glyphicons 图标。推荐使用 Bootstrap Icons（开源免费，支持 npm/CDN）或 Font Awesome（v4 推荐使用 font-awesome npm 包）。

最常见的原因是网格类名未更新。检查是否还有 *-offset-*、*-push-*、*-pull-* 等 v3 类名。另外 v4 的容器 padding 和 gutter 尺寸与 v3 不同，可能导致宽度差异。