从 2.x 迁移到 3.0

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

大类变化

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

引导程序 2.x 引导程序 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
字形 .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-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 的可选项卡区域窗格 .pill-pane .tab-pane
导航列表 .nav-list .nav-header 没有直接的等价物,但list groups.panel-groups是相似的。
表单控件的内联帮助 .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以实现更好的移动样式和行为。此外,您不应再在标记中应用to 。.modal-body.modal-footer.modal-content.modal-dialog.hide.modal
  • 从 v3.1.0 开始,由remotemodal 选项加载的 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.bs.tab'等。

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