从 2.x 迁移到 3.0

Bootstrap 3 与 v2.x 不向后兼容。使用本节作为从 v2.x 升级到 v3.0 的一般指南。如需更广泛的概述，请参阅 v3.0 发布公告中的 新增内容。

主要类名变更

此表格显示了 v2.x 和 v3.0 之间的样式变更。

Bootstrap 2.x Bootstrap 3.0
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.navbar .nav .navbar-nav
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.alert .alert .alert-warning
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop 拆分为 .visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop 拆分为 .hidden-md .hidden-lg
.input-block-level .form-control
.control-group .form-group
.control-group.warning .control-group.error .control-group.success .form-group.has-*
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.img-polaroid .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline
.muted .text-muted
.label .label .label-default
.label-important .label-danger
.text-error .text-danger
.table .error .table .danger
.bar .progress-bar
.bar-* .progress-bar-*
.accordion .panel-group
.accordion-group .panel .panel-default
.accordion-heading .panel-heading
.accordion-body .panel-collapse
.accordion-inner .panel-body

新增内容

我们添加了新元素并更改了一些现有元素。以下是新的或更新的样式。

元素 描述
面板 .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
列表组 .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons 图标 .glyphicon
巨幕 .jumbotron
超小网格 (<768px) .col-xs-*
小网格 (≥768px) .col-sm-*
中等网格 (≥992px) .col-md-*
大网格 (≥1200px) .col-lg-*
响应式工具类 (≥1200px) .visible-lg .hidden-lg
偏移 .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
推送 .col-sm-push-* .col-md-push-* .col-lg-push-*
拉取 .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
输入高度尺寸 .input-sm .input-lg
输入组 .input-group .input-group-addon .input-group-btn
表单控件 .form-control .form-group
按钮组尺寸 .btn-group-xs .btn-group-sm .btn-group-lg
导航栏文本 .navbar-text
导航栏标题 .navbar-header
两端对齐的标签页/胶囊式导航 .nav-justified
响应式图片 .img-responsive
情境表格行 .success .danger .warning .active .info
情境面板 .panel-success .panel-danger .panel-warning .panel-info
模态框 .modal-dialog .modal-content
缩略图 .img-thumbnail
Well 尺寸 .well-sm .well-lg
警告框链接 .alert-link

移除内容

以下元素在 v3.0 中已被删除或更改。

元素 从 2.x 中移除 3.0 等效项
表单操作 .form-actions 无
搜索表单 .form-search 无
带信息的表单组 .control-group.info 无
固定宽度输入尺寸 .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge 改为使用 .form-control 和 网格系统。
块级表单输入 .input-block-level 无直接等效项，但 表单控件 类似。
反色按钮 .btn-inverse 无
流式行 .row-fluid .row（不再有固定网格）
控件包装器 .controls 无
控件行 .controls-row .row 或 .form-group
导航栏内部 .navbar-inner 无
导航栏垂直分隔线 .navbar .divider-vertical 无
下拉菜单子菜单 .dropdown-submenu 无
标签页对齐 .tabs-left .tabs-right .tabs-below 无
基于胶囊式导航的可切换区域 .pill-content .tab-content
基于胶囊式导航的可切换区域面板 .pill-pane .tab-pane
导航列表 .nav-list .nav-header 无直接等效项，但 列表组 和 .panel-group 类似。
表单控件的内联帮助 .help-inline 无完全等效项，但 .help-block 类似。
非条形进度条颜色 .progress-info .progress-success .progress-warning .progress-danger 改为在 .progress-bar 上使用 .progress-bar-*。

其他注意事项

v3.0 中的其他变更并不明显。基础类、关键样式和行为已针对灵活性和我们的「移动优先」方法进行了调整。以下是部分列表：

  • 默认情况下，基于文本的表单控件现在只接收最小样式。要获取焦点颜色和圆角，请在要设置样式的元素上应用 .form-control 类。
  • 应用了 .form-control 类的基于文本的表单控件现在默认宽度为 100%。将输入框包装在 <div class="col-*"></div> 中来控制输入宽度。
  • .badge 不再有情境（-success,-primary 等）类。
  • .btn 必须同时使用 .btn-default 才能获得「默认」按钮。
  • .row 现在是流式的。
  • 图片默认不再响应式。使用 .img-responsive 实现流式 <img> 尺寸。
  • 图标现在是 .glyphicon，基于字体。图标还需要基础类和图标类（例如 .glyphicon .glyphicon-asterisk）。
  • Typeahead 已被删除，建议使用 Twitter Typeahead。
  • 模态框标记已显著更改。.modal-header、.modal-body 和 .modal-footer 部分现在包装在 .modal-content 和 .modal-dialog 中，以获得更好的移动样式和行为。此外，您不应再在标记中对 .modal 应用 .hide。
  • 从 v3.1.0 开始，由 remote 模态框选项加载的 HTML 现在注入到 .modal-content 中（从 v3.0.0 到 v3.0.3，注入到 .modal 中），而不是注入到 .modal-body 中。这允许您也可以轻松更改模态框的头部和底部，而不仅仅是模态框主体。
  • button.js 插件的复选框和单选按钮功能现在在其标记中都使用 data-toggle="buttons"，而不是 data-toggle="buttons-checkbox" 或 data-toggle="buttons-radio"。
  • JavaScript 事件是命名空间的。例如，要处理模态框的 "show" 事件，请使用 'show.bs.modal'。对于标签页的 "shown" 事件，请使用 'shown.bs.tab' 等。

有关升级到 v3.0 的更多信息，以及来自社区的代码片段，请参阅 Bootply。