Skip to main content

# 升级到 Bootstrap v3.x 版本

这里提供了从 Bootstrap v2.x 版本升级到 v3.x 版本的指南，重点讲解框架的重大改变、新增内容以及被移除的内容。

# 从 Bootstrap 2.x 版本升级到 3.0 版本

Bootstrap 3 版本并不向后兼容 v2.x 版本。下面的章节是一份从 v2.x 版本升级到 v3.0 版本的通用指南。如需查看更版本更新信息，请点击 v3.0 新增内容。

## 主要 class 的变更

下表列举了 v2.0x 版本和 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-error` | `.alert-danger`
`.visible-phone` | `.visible-xs`
`.visible-tablet` | `.visible-sm`
`.visible-desktop` | Split into `.visible-md .visible-lg`
`.hidden-phone` | `.hidden-xs`
`.hidden-tablet` | `.hidden-sm`
`.hidden-desktop` | Split into `.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`

## 新增的内容

我们添加了一些新元素，并且对现有的某些元素就行了修改。下面列出的是新增或修改的样式。

Element | Description
--- | ---
Panels | `.panel .panel-default` `.panel-body` `.panel-title` `.panel-heading` `.panel-footer` `.panel-collapse`
List groups | `.list-group` `.list-group-item` `.list-group-item-text` `.list-group-item-heading`
Glyphicons | `.glyphicon`
Jumbotron | `.jumbotron`
Extra small grid (<768px) | `.col-xs-*`
Small grid (≥768px) | `.col-sm-*`
Medium grid (≥992px) | `.col-md-*`
Large grid (≥1200px) | `.col-lg-*`
Responsive utility classes (≥1200px) | `.visible-lg` `.hidden-lg`
Offsets | `.col-sm-offset-*` `.col-md-offset-*` `.col-lg-offset-*`
Push | `.col-sm-push-*` `.col-md-push-*` `.col-lg-push-*`
Pull | `.col-sm-pull-*` `.col-md-pull-*` `.col-lg-pull-*`
Input height sizes | `.input-sm` `.input-lg`
Input groups | `.input-group` `.input-group-addon` `.input-group-btn`
Form controls | `.form-control` `.form-group`
Button group sizes | `.btn-group-xs` `.btn-group-sm` `.btn-group-lg`
Navbar text | `.navbar-text`
Navbar header | `.navbar-header`
Justified tabs / pills | `.nav-justified`
Responsive images | `.img-responsive`
Contextual table rows | `.success` `.danger` `.warning` `.active` `.info`
Contextual panels | `.panel-success` `.panel-danger` `.panel-warning` `.panel-info`
Modal | `.modal-dialog` `.modal-content`
Thumbnail image | `.img-thumbnail`
Well sizes | `.well-sm` `.well-lg`
Alert links | `.alert-link`

## 删除的内容

下面列出的元素在 v3.0 版本中被删除或改变了。

Element | Removed from 2.x | 3.0 Equivalent
--- | --- | ---
Form actions | `.form-actions` | N/A
Search form | `.form-search` | N/A
Form group with info | `.control-group.info` | N/A
Fixed-width input sizes | `.input-mini` `.input-small` `.input-medium` `.input-large` `.input-xlarge` `.input-xxlarge` | Use `.form-control` and the grid system instead.
Block level form input | `.input-block-level` | No direct equivalent, but forms controls are similar.
Inverse buttons | `.btn-inverse` | N/A
Fluid row | `.row-fluid` | `.row` (no more fixed grid)
Controls wrapper | `.controls` | N/A
Controls row | `.controls-row` | `.row` or `.form-group`
Navbar inner | `.navbar-inner` | N/A
Navbar vertical dividers | `.navbar .divider-vertical` | N/A
Dropdown submenu | `.dropdown-submenu` | N/A
Tab alignments | `.tabs-left` `.tabs-right` `.tabs-below` | N/A
Pill-based tabbable area | `.pill-content` | `.tab-content`
Pill-based tabbable area pane | `.pill-pane` | `.tab-pane`
Nav lists | `.nav-list` `.nav-header` | No direct equivalent, but list groups and `.panel-group`s are similar.
Inline help for form controls | `.help-inline` | No exact equivalent, but `.help-block` is similar.
Non-bar-level progress colors | `.progress-info` `.progress-success` `.progress-warning` `.progress-danger` | Use `.progress-bar-*` on the `.progress-bar` instead.

## 额外注意事项

Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:

- By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the `.form-control` class on the element to style.
- Text-based form controls with the `.form-control` class applied are now 100% wide by default. Wrap inputs inside `<div class="col-*"></div>` to control input widths.
- `.badge` no longer has contextual (-success,-primary,etc..) classes.
- `.btn` must also use `.btn-default` to get the "default" button.
- `.row` is now fluid.
- Images are no longer responsive by default. Use `.img-responsive` for fluid `<img>` size.
- The icons, now `.glyphicon`, are now font based. Icons also require a base and icon class (e.g. `.glyphicon .glyphicon-asterisk`).
- Typeahead has been dropped, in favor of using Twitter Typeahead.
- Modal markup has changed significantly. The `.modal-header`, `.modal-body`, and `.modal-footer` sections are now wrapped in `.modal-content` and `.modal-dialog` for better mobile styling and behavior. Also, you should no longer apply `.hide` to `.modal` in your markup.
- As of v3.1.0, the HTML loaded by the `remote` modal option is now injected into the `.modal-content` (from v3.0.0 to v3.0.3, into the `.modal`) instead of into the `.modal-body`. This allows you to also easily vary the header and footer of the modal, not just the modal body.
- The checkbox and radio features of the button.js plugin now both use `data-toggle="buttons"` instead of `data-toggle="buttons-checkbox"` or `data-toggle="buttons-radio"` in their markup.
- JavaScript events are namespaced. For example, to handle the modal "show" event, use `'show.bs.modal'`. For tabs "shown" use `'shown.bs.tab'`, etc.

For more information on upgrading to v3.0, and code snippets from the community, see Bootply.