Back to Details

bootstrap-v4-v6-migration

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Bootstrap v4 to v6 Migration

Bootstrap v4 至 v6 迁移

There is no direct v4 to v6 path. Migrate in two stages — v4 to v5 first (this skill), then v5 to v6 (the 
bootstrap-v5-v6-migration
skill). Skipping the middle stage doesn't work, because many v4 names were renamed in v5 and renamed again in v6: 
.text-primary
becomes 
.fg-primary
only after passing through v5, and 
.badge-primary
becomes 
.badge.theme-primary
by way of 
.badge.bg-primary
.
不存在从v4直接升级到v6的路径。需要分两个阶段迁移——先从v4升级到v5（即本技能），再从v5升级到v6（
bootstrap-v5-v6-migration
技能）。跳过中间阶段是行不通的，因为很多v4的命名在v5中被重命名，到v6又会再次被重命名：
.text-primary
要先经过v5的过渡才会变成 
.fg-primary
，而 
.badge-primary
则要经由 
.badge.bg-primary
最终变为 
.badge.theme-primary
。

Workflow

工作流程

Work through each step in order. After each step, search the codebase for remaining v4 patterns before moving on.
  • Step 1: Plan the two-stage migration
  • Step 2: v4 to v5 — dependencies, build, and Sass
  • Step 3: v4 to v5 — JavaScript
  • Step 4: v4 to v5 — classes and attributes
  • Step 5: v5 to v6 — hand off to the v6 migration skill
  • Step 6: Verify
请按顺序完成每个步骤。每完成一步后，先在代码库中搜索残留的v4模式，再继续下一步。
  • 步骤1：规划两阶段迁移
  • 步骤2：v4 到 v5 —— 依赖、构建与Sass
  • 步骤3：v4 到 v5 —— JavaScript
  • 步骤4：v4 到 v5 —— 类名与属性
  • 步骤5：v5 到 v6 —— 移交至v6迁移技能
  • 步骤6：验证

Step 1: Plan the two-stage migration

步骤1：规划两阶段迁移

  1. Get the project onto Bootstrap 5 and working — build passing, pages rendering, tests green — before touching v6. Landing the v5 stage as its own commit (or PR) keeps the two rename waves separable when something breaks.
  2. Inventory what you're dealing with first. The v4 features that cost the most time are custom forms, 
    .input-group-append
    / 
    .input-group-prepend
    , jumbotrons, 
    .media
    objects, 
    .card-deck
    / 
    .card-columns
    , and any jQuery that calls Bootstrap plugins.
  3. Decide about jQuery separately. Bootstrap 5 dropped it, but your app may use it for other things; removing Bootstrap's dependency on it does not require removing jQuery itself.
  4. Note the browser floor. Bootstrap 5 drops IE. Bootstrap 6 requires Chrome and Edge 130, Firefox 132, and Safari 18 on macOS and iOS.
  1. 先让项目升级到Bootstrap 5并正常运行——构建通过、页面正常渲染、测试全部通过——再开始处理v6的升级。将v5阶段的改动作为单独的提交（或PR）提交，这样当出现问题时，可以将两次重命名的改动分开排查。
  2. 先清点你需要处理的内容。v4中最耗时的特性包括自定义表单、
    .input-group-append
    / 
    .input-group-prepend
    、jumbotron组件、
    .media
    对象、
    .card-deck
    / 
    .card-columns
    ，以及所有调用Bootstrap插件的jQuery代码。
  3. 单独决定jQuery的去留。Bootstrap 5不再依赖jQuery，但你的应用可能还在其他地方使用它；移除Bootstrap对jQuery的依赖并不意味着必须完全移除jQuery。
  4. 注意浏览器最低版本要求。Bootstrap 5不再支持IE。Bootstrap 6要求Chrome和Edge版本≥130、Firefox版本≥132，macOS和iOS端的Safari版本≥18。

Step 2: v4 to v5 — dependencies, build, and Sass

步骤2：v4 到 v5 —— 依赖、构建与Sass

  1. Update the dependency and drop the jQuery/Popper v1 pair:
    sh
    npm i --save bootstrap@5 @popperjs/core
npm uninstall popper.js
    popper.js
    (v1) is replaced by 
    @popperjs/core
    (v2). Bootstrap 5's bundle includes Popper; the standalone 
    bootstrap.js
    does not.
  2. Switch the Sass compiler to Dart Sass (
    npm i --save-dev sass
    ). Node Sass / LibSass is not supported. Keep using 
    @import
    for now — v5 still uses it; the move to 
    @use
    happens in the v6 stage.
  3. Sass maps no longer merge automatically. In v4, adding one key to 
    $theme-colors
    was enough; in v5 you must define the complete map, including the keys you're keeping.
  4. Update renamed functions and mixins:
    v4v5
    color-yiq()
    color-contrast()
    theme-color()
    , 
    gray()
    		Removed — reference 
    $theme-colors
    / 
    $grays
    directly
    theme-color-level()
    tint-color()
    / 
    shade-color()
    lighten()
    / 
    darken()
    tint-color()
    / 
    shade-color()
    media-breakpoint-down(md)
    media-breakpoint-down(lg)
    — takes the breakpoint itself, not the next one down
    media-breakpoint-between(sm, md)
    media-breakpoint-between(sm, lg)
    — same shift on the upper bound
    The breakpoint parameter change is silent: nothing errors, your media queries just apply one breakpoint off. Audit every call.
  5. Print styles, 
    $enable-*
    flags, and the utility API all changed shape in v5. If you generated custom utilities with v4 mixins, rewrite them through v5's 
    $utilities
    map.
  1. 更新依赖，移除jQuery/Popper v1组合：
    sh
    npm i --save bootstrap@5 @popperjs/core
npm uninstall popper.js
    popper.js
    （v1）已被 
    @popperjs/core
    （v2）取代。Bootstrap 5的打包版本包含Popper；但独立的 
    bootstrap.js
    不包含。
  2. 将Sass编译器切换为Dart Sass（执行 
    npm i --save-dev sass
    ）。不再支持Node Sass / LibSass。目前继续使用 
    @import
    ——v5仍然支持该语法；迁移到 
    @use
    的工作会在v6阶段进行。
  3. Sass映射（map）不再自动合并。在v4中，只需向 
    $theme-colors
    添加一个键即可；但在v5中，你必须定义完整的映射，包括你想要保留的原有键。
  4. 更新被重命名的函数和混入（mixin）：
    v4v5
    color-yiq()
    color-contrast()
    theme-color()
    , 
    gray()
    		已移除——直接引用 
    $theme-colors
    / 
    $grays
    theme-color-level()
    tint-color()
    / 
    shade-color()
    lighten()
    / 
    darken()
    tint-color()
    / 
    shade-color()
    media-breakpoint-down(md)
    media-breakpoint-down(lg)
    —— 参数是断点本身，而非下一级断点
    media-breakpoint-between(sm, md)
    media-breakpoint-between(sm, lg)
    —— 上限参数同样偏移
    断点参数的变化不会报错：不会有任何错误提示，只是你的媒体查询会偏移一个断点。请逐一检查所有调用。
  5. 打印样式、
    $enable-*
    标志位以及工具类API在v5中都有变化。如果你之前用v4的混入生成自定义工具类，请通过v5的 
    $utilities
    映射重写。

Step 3: v4 to v5 — JavaScript

步骤3：v4 到 v5 —— JavaScript

  1. Namespace every data attribute with 
    bs
    . This is a mechanical but wide-reaching change:
    v4v5
    data-toggle
    data-bs-toggle
    data-target
    data-bs-target
    data-dismiss
    data-bs-dismiss
    data-parent
    data-bs-parent
    data-ride
    data-bs-ride
    data-slide
    , 
    data-slide-to
    data-bs-slide
    , 
    data-bs-slide-to
    data-spy
    data-bs-spy
    data-backdrop
    , 
    data-keyboard
    data-bs-backdrop
    , 
    data-bs-keyboard
    data-content
    , 
    data-placement
    , 
    data-trigger
    data-bs-content
    , 
    data-bs-placement
    , 
    data-bs-trigger
    Any option passed as an attribute follows the same rule: 
    data-<option>
    becomes 
    data-bs-<option>
    .
  2. Replace jQuery plugin calls with constructors or static getters:
    js
    // v4
$('#myModal').modal('show')
$('#myTooltip').tooltip()

// v5
const modal = new bootstrap.Modal(document.querySelector('#myModal'))
modal.show()

bootstrap.Tooltip.getOrCreateInstance(document.querySelector('#myTooltip'))
  3. Replace jQuery event handlers with native listeners. Bootstrap 5 dispatches native 
    CustomEvent
    s, so 
    $(el).on('shown.bs.modal', …)
    stops firing:
    js
    // v5
document.querySelector('#myModal').addEventListener('shown.bs.modal', event => {
  // event.relatedTarget replaces event.relatedTarget from the jQuery event
})
  4. Smaller API renames:
    • _getInstance()
      → 
      getInstance()
      , and prefer the new 
      getOrCreateInstance()
      .
    • The sanitizer option 
      whiteList
      → 
      allowList
      .
    • Tooltip and Popover 
      title
      / 
      content
      still accept functions, but 
      this
      is no longer the jQuery element.
  5. If you relied on jQuery's 
    noConflict
    or on 
    $.fn.button('toggle')
    -style calls, rewrite them against the class API — there is no jQuery interface left to shim.
  1. 为所有数据属性添加 
    bs
    命名空间。这是一项机械但影响范围很广的改动：
    v4v5
    data-toggle
    data-bs-toggle
    data-target
    data-bs-target
    data-dismiss
    data-bs-dismiss
    data-parent
    data-bs-parent
    data-ride
    data-bs-ride
    data-slide
    , 
    data-slide-to
    data-bs-slide
    , 
    data-bs-slide-to
    data-spy
    data-bs-spy
    data-backdrop
    , 
    data-keyboard
    data-bs-backdrop
    , 
    data-bs-keyboard
    data-content
    , 
    data-placement
    , 
    data-trigger
    data-bs-content
    , 
    data-bs-placement
    , 
    data-bs-trigger
    任何作为属性传递的选项都遵循同样的规则：
    data-<option>
    变为 
    data-bs-<option>
    。
  2. 用构造函数或静态获取方法替换jQuery插件调用：
    js
    // v4
$('#myModal').modal('show')
$('#myTooltip').tooltip()

// v5
const modal = new bootstrap.Modal(document.querySelector('#myModal'))
modal.show()

bootstrap.Tooltip.getOrCreateInstance(document.querySelector('#myTooltip'))
  3. 用原生监听器替换jQuery事件处理器。Bootstrap 5派发原生的 
    CustomEvent
    事件，因此 
    $(el).on('shown.bs.modal', …)
    会失效：
    js
    // v5
document.querySelector('#myModal').addEventListener('shown.bs.modal', event => {
  // event.relatedTarget replaces event.relatedTarget from the jQuery event
})
  4. 其他较小的API重命名：
    • _getInstance()
      → 
      getInstance()
      ，推荐使用新增的 
      getOrCreateInstance()
      。
    • sanitizer配置项 
      whiteList
      → 
      allowList
      。
    • Tooltip和Popover的 
      title
      / 
      content
      仍然支持函数，但函数内的 
      this
      不再指向jQuery元素。
  5. 如果你之前依赖jQuery的 
    noConflict
    或者 
    $.fn.button('toggle')
    风格的调用，请基于类API重写——v5已经没有jQuery接口可以兼容了。

Step 4: v4 to v5 — classes and attributes

步骤4：v4 到 v5 —— 类名与属性

Directional utilities become logical (RTL support)

方向类工具变为逻辑属性（支持RTL）

v4v5
.ml-*
, 
.mr-*
.ms-*
, 
.me-*
.pl-*
, 
.pr-*
.ps-*
, 
.pe-*
.float-left
, 
.float-right
.float-start
, 
.float-end
.text-left
, 
.text-right
.text-start
, 
.text-end
.border-left
, 
.border-right
.border-start
, 
.border-end
.rounded-left
, 
.rounded-right
.rounded-start
, 
.rounded-end
.dropleft
, 
.dropright
.dropstart
, 
.dropend
The responsive variants follow the same rename (
.ml-md-3
→ 
.ms-md-3
).
v4v5
.ml-*
, 
.mr-*
.ms-*
, 
.me-*
.pl-*
, 
.pr-*
.ps-*
, 
.pe-*
.float-left
, 
.float-right
.float-start
, 
.float-end
.text-left
, 
.text-right
.text-start
, 
.text-end
.border-left
, 
.border-right
.border-start
, 
.border-end
.rounded-left
, 
.rounded-right
.rounded-start
, 
.rounded-end
.dropleft
, 
.dropright
.dropstart
, 
.dropend
响应式变体也遵循同样的重命名规则（例如 
.ml-md-3
→ 
.ms-md-3
）。

Typography and helpers

排版与辅助类

v4v5
.font-weight-bold
, 
-normal
, 
-light
, 
-bolder
, 
-lighter
.fw-bold
, 
.fw-normal
, 
.fw-light
, 
.fw-bolder
, 
.fw-lighter
.font-italic
.fst-italic
.text-monospace
.font-monospace
.sr-only
, 
.sr-only-focusable
.visually-hidden
, 
.visually-hidden-focusable
.embed-responsive
, 
.embed-responsive-16by9
.ratio
, 
.ratio-16x9
.text-justify
, 
.text-hide
, 
.pre-scrollable
Removed
.rounded-sm
, 
.rounded-lg
.rounded-1
, 
.rounded-3
v4v5
.font-weight-bold
, 
-normal
, 
-light
, 
-bolder
, 
-lighter
.fw-bold
, 
.fw-normal
, 
.fw-light
, 
.fw-bolder
, 
.fw-lighter
.font-italic
.fst-italic
.text-monospace
.font-monospace
.sr-only
, 
.sr-only-focusable
.visually-hidden
, 
.visually-hidden-focusable
.embed-responsive
, 
.embed-responsive-16by9
.ratio
, 
.ratio-16x9
.text-justify
, 
.text-hide
, 
.pre-scrollable
已移除
.rounded-sm
, 
.rounded-lg
.rounded-1
, 
.rounded-3

Forms

表单

This is the largest v4 to v5 rewrite: custom form controls were merged into the standard classes.
v4v5
.custom-select
.form-select
.custom-range
.form-range
.custom-file
, 
.form-control-file
.form-control
(on 
<input type="file">
)
.form-control-range
.form-range
.custom-control.custom-checkbox
.form-check
.custom-control.custom-radio
.form-check
.custom-control.custom-switch
.form-check.form-switch
.custom-control-input
.form-check-input
.custom-control-label
.form-check-label
.custom-control-inline
.form-check-inline
.form-group
Spacing utilities, e.g. 
.mb-3
.form-row
.row
plus gutter utilities (
.g-*
)
.form-inline
Grid or flex utilities (
.row .row-cols-lg-auto
, 
.d-flex
)
<label>
with no class
<label class="form-label">
Input groups lose their wrappers: delete 
.input-group-append
and 
.input-group-prepend
and place 
.input-group-text
, buttons, and controls as direct children of 
.input-group
. Validation feedback moves out of the removed wrappers too.
这是v4到v5改动最大的部分：自定义表单控件已合并到标准类中。
v4v5
.custom-select
.form-select
.custom-range
.form-range
.custom-file
, 
.form-control-file
.form-control
（用于 
<input type="file">
）
.form-control-range
.form-range
.custom-control.custom-checkbox
.form-check
.custom-control.custom-radio
.form-check
.custom-control.custom-switch
.form-check.form-switch
.custom-control-input
.form-check-input
.custom-control-label
.form-check-label
.custom-control-inline
.form-check-inline
.form-group
间距工具类，例如 
.mb-3
.form-row
.row
加上 gutter 工具类（
.g-*
）
.form-inline
栅格或flex工具类（
.row .row-cols-lg-auto
, 
.d-flex
）
无类名的 
<label>
<label class="form-label">
输入组不再需要包裹层：删除 
.input-group-append
和 
.input-group-prepend
，将 
.input-group-text
、按钮和控件直接作为 
.input-group
的子元素。校验反馈内容也需要从已移除的包裹层中移出来。

Components dropped or restructured

被移除或重构的组件

v4v5
.jumbotron
Removed — compose with 
.bg-*
, 
.p-*
, 
.rounded-*
.media
Removed — use 
.d-flex
and gap/margin utilities
.card-deck
, 
.card-columns
Removed — use the grid, or CSS columns for masonry
.close
.btn-close
(drop the 
&times;
child; the icon is a background image)
.badge-primary
and friends
.badge
plus 
.bg-primary
.badge-pill
.rounded-pill
.btn-block
A 
.d-grid
wrapper (add 
.gap-*
for stacked buttons)
.thead-light
, 
.thead-dark
.table-light
, 
.table-dark
on 
<thead>
.arrow
(tooltip/popover)
.tooltip-arrow
, 
.popover-arrow
.carousel-item-left
, 
-right
.carousel-item-start
, 
-end
Badges also lost their link styling — a 
<a class="badge">
no longer gets hover/focus states.
v4v5
.jumbotron
已移除——用 
.bg-*
、
.p-*
、
.rounded-*
组合实现
.media
已移除——使用 
.d-flex
和间距/边距工具类
.card-deck
, 
.card-columns
已移除——使用栅格，或CSS columns实现瀑布流
.close
.btn-close
（移除 
&times;
子元素；图标为背景图）
.badge-primary
等同类类名
.badge
加上 
.bg-primary
.badge-pill
.rounded-pill
.btn-block
外层包裹 
.d-grid
（堆叠按钮可添加 
.gap-*
）
.thead-light
, 
.thead-dark
在 
<thead>
上使用 
.table-light
, 
.table-dark
.arrow
（tooltip/popover）
.tooltip-arrow
, 
.popover-arrow
.carousel-item-left
, 
-right
.carousel-item-start
, 
-end
Badge组件也不再自带链接样式——
<a class="badge">
不再有hover/focus状态。

Grid, navbars, and navs

栅格、导航栏与导航

  • .no-gutters
    → 
    .g-0
    , and gutters are now controlled by the 
    .g-*
    , 
    .gx-*
    , 
    .gy-*
    utilities.
  • A new 
    xxl
    breakpoint (1400px) exists; existing 
    xl
    classes keep their meaning.
  • Navbars now require a container inside 
    .navbar
    (
    <nav class="navbar"><div class="container">…
    ).
  • For tabs and pills, 
    .active
    moves from 
    .nav-item
    to 
    .nav-link
    . 
    .nav-item
    is optional as a wrapper.
  • .dropdown-menu
    items can be 
    <button>
    or 
    <a>
    ; 
    .dropdown-item-text
    was added for plain text.
  • .no-gutters
    → 
    .g-0
    ，现在栅格间距由 
    .g-*
    、
    .gx-*
    、
    .gy-*
    工具类控制。
  • 新增了 
    xxl
    断点（1400px）；原有的 
    xl
    类含义保持不变。
  • 导航栏现在要求在 
    .navbar
    内部有一个container元素（
    <nav class="navbar"><div class="container">…
    ）。
  • 对于标签页和胶囊导航，
    .active
    类从 
    .nav-item
    移到了 
    .nav-link
    上。
    .nav-item
    作为包裹元素现在是可选的。
  • .dropdown-menu
    的子项可以是 
    <button>
    或 
    <a>
    ；新增了 
    .dropdown-item-text
    用于纯文本项。

Step 5: v5 to v6 — hand off to the v6 migration skill

步骤5：v5 到 v6 —— 移交至v6迁移技能

Once the project builds and renders on Bootstrap 5, switch to the 
bootstrap-v5-v6-migration
 skill and work through its steps. Do not attempt those renames while v4 patterns are still present — its find-and-replace steps assume v5 names.
That stage covers, among other things:
  • @import
    to 
    @use
    , and the move from Sass scalars to CSS token maps (
    defaults()
    merges theme maps again in v6)
  • Popper to Floating UI, plus Vanilla Calendar Pro for Datepicker. The bundled build includes both peers; the standalone build leaves them external.
  • The 
    md:
    responsive prefix syntax replacing 
    -md-
    infixes
  • Modal to Dialog, Offcanvas to Drawer, Dropdown to Menu. Dialog and Drawer use native 
    <dialog>
    elements.
  • .btn-primary
    to 
    .btn-solid .theme-primary
    , and 
    .text-*
    to 
    .fg-*
  • ESM-only JavaScript with no 
    window.bootstrap
    global
  • Container-query contexts for responsive stacks, CSS Grid, navbars, list groups, card groups, and stacked tables
Two v4-era details worth flagging before you start it: the 
.close
→ 
.btn-close
element you produced in Step 4 keeps that name in v6 (but must stay empty, with no child SVG), and the 
.form-check
markup you just wrote gets rebuilt again into v6's 
.check
/ 
.radio
/ 
.switch
structure.
当项目在Bootstrap 5下能够正常构建和渲染后，切换到**
bootstrap-v5-v6-migration
** 技能并按其步骤操作。在还存在v4模式的情况下不要尝试进行这些重命名——该技能的查找替换步骤默认代码已经是v5命名规范。
该阶段主要涵盖以下内容：
  • 从 
    @import
    迁移到 
    @use
    ，以及从Sass标量迁移到CSS token映射（v6中 
    defaults()
    会再次合并主题映射）
  • 从Popper迁移到Floating UI，以及Datepicker改用Vanilla Calendar Pro。打包版本包含这两个依赖；独立版本则将它们作为外部依赖。
  • md:
    响应式前缀语法取代 
    -md-
    中缀
  • Modal改为Dialog，Offcanvas改为Drawer，Dropdown改为Menu。Dialog和Drawer使用原生 
    <dialog>
    元素。
  • .btn-primary
    改为 
    .btn-solid .theme-primary
    ，
    .text-*
    改为 
    .fg-*
  • JavaScript仅支持ESM，不再提供 
    window.bootstrap
    全局变量
  • 为响应式堆叠、CSS Grid、导航栏、列表组、卡片组和堆叠表格提供容器查询上下文
在开始v6迁移之前，有两个v4时代的细节需要提醒：你在步骤4中修改得到的 
.close
→ 
.btn-close
元素在v6中保留该名称（但必须保持为空，不能有子SVG元素）；而你刚写好的 
.form-check
标记在v6中会被再次重构为 
.check
/ 
.radio
/ 
.switch
结构。

Step 6: Verify

步骤6：验证

  1. Build the project and fix compilation errors before looking at the rendered output.
  2. Search for leftover v4 patterns: 
    • data-toggle=
      , 
      data-target=
      , 
      data-dismiss=
      , 
      data-ride=
      , 
      data-slide
      , 
      data-spy=
      (should all be 
      data-bs-*
      )
    • class="close"
      , 
      &times;
      inside a close button (should be 
      .btn-close
      )
    • badge-
      , 
      badge-pill
      (should be 
      .badge .bg-*
      / 
      .rounded-pill
      )
    • custom-select
      , 
      custom-control
      , 
      custom-switch
      , 
      custom-range
      , 
      custom-file
    • form-group
      , 
      form-row
      , 
      form-inline
      , 
      input-group-append
      , 
      input-group-prepend
    • \bm[lr]-
      , 
      \bp[lr]-
      , 
      float-left
      , 
      float-right
      , 
      text-left
      , 
      text-right
      , 
      border-left
      , 
      border-right
    • font-weight-
      , 
      font-italic
      , 
      text-monospace
    • no-gutters
      , 
      sr-only
      , 
      embed-responsive
      , 
      jumbotron
      , 
      media-body
      , 
      card-deck
      , 
      card-columns
      , 
      btn-block
      , 
      thead-light
      , 
      thead-dark
      , 
      pre-scrollable
      , 
      text-justify
    • \$(
      , 
      jQuery(
      near Bootstrap plugin names (
      .modal(
      , 
      .tooltip(
      , 
      .collapse(
      )
    • theme-color(
      , 
      color-yiq(
      , 
      theme-color-level(
      , 
      media-breakpoint-down(
  3. Click through every interactive component — the data attribute renames fail silently, so a missed 
    data-toggle
    looks like a dead button rather than an error.
  4. Check forms especially closely: custom controls, input groups, and validation feedback all changed structure.
  5. Then move to Step 5 and repeat this discipline for the v6 stage.
  1. 先构建项目并修复所有编译错误，再检查渲染输出。
  2. 搜索残留的v4模式： 
    • data-toggle=
      、
      data-target=
      、
      data-dismiss=
      、
      data-ride=
      、
      data-slide
      、
      data-spy=
      （都应该是 
      data-bs-*
      格式）
    • class="close"
      、关闭按钮内的 
      &times;
      （应该使用 
      .btn-close
      ）
    • badge-
      、
      badge-pill
      （应该是 
      .badge .bg-*
      / 
      .rounded-pill
      ）
    • custom-select
      、
      custom-control
      、
      custom-switch
      、
      custom-range
      、
      custom-file
    • form-group
      、
      form-row
      、
      form-inline
      、
      input-group-append
      、
      input-group-prepend
    • \bm[lr]-
      、
      \bp[lr]-
      、
      float-left
      、
      float-right
      、
      text-left
      、
      text-right
      、
      border-left
      、
      border-right
    • font-weight-
      、
      font-italic
      、
      text-monospace
    • no-gutters
      、
      sr-only
      、
      embed-responsive
      、
      jumbotron
      、
      media-body
      、
      card-deck
      、
      card-columns
      、
      btn-block
      、
      thead-light
      、
      thead-dark
      、
      pre-scrollable
      、
      text-justify
    • Bootstrap插件名附近的 
      \$(
      、
      jQuery(
      （例如 
      .modal(
      、
      .tooltip(
      、
      .collapse(
      ）
    • theme-color()
      、
      color-yiq()
      、
      theme-color-level()
      、
      media-breakpoint-down()
  3. 逐个点击所有交互组件——数据属性的重命名不会报错，因此漏掉的 
    data-toggle
    只会表现为按钮点击无反应，而不会抛出错误。
  4. 要特别仔细检查表单：自定义控件、输入组和校验反馈的结构都发生了变化。
  5. 之后进入步骤5，在v6迁移阶段重复同样的验证流程。