迁移到 v3.x
有关如何从 Bootstrap v2.x 升级到 v3.x 的指南，重点是主要更改、新增内容和删除的内容。
从 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。