迁移到 v3.x
有关如何从 Bootstrap v2.x 升级到 v3.x 的指南,重点是主要更改、新增内容和删除的内容。
有关如何从 Bootstrap v2.x 升级到 v3.x 的指南,重点是主要更改、新增内容和删除的内容。
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-group s是相似的。 |
表单控件的内联帮助 | .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
)。.modal-header
以实现更好的移动样式和行为。此外,您不应再在标记中应用to 。.modal-body
.modal-footer
.modal-content
.modal-dialog
.hide
.modal
remote
modal 选项加载的 HTML 现在被注入.modal-content
(从 v3.0.0 到 v3.0.3,注入.modal
)而不是注入.modal-body
. 这使您还可以轻松地更改模式的页眉和页脚,而不仅仅是模式主体。data-toggle="buttons"
而不是data-toggle="buttons-checkbox"
或data-toggle="buttons-radio"
在其标记中使用。'show.bs.modal'
. 对于“显示”的标签,请使用'shown.bs.tab'
等。有关升级到 v3.0 的更多信息以及来自社区的代码片段,请参阅Bootply。