diff --git a/getting-started.html b/getting-started.html index 4598135185..30e55299e7 100644 --- a/getting-started.html +++ b/getting-started.html @@ -317,145 +317,336 @@ bootstrap/ {% endhighlight %} - - - + + +

Migration

- -

Bootstrap 3 is a major overhaul, and there are a lot of changes from Bootstrap 2.x. - The following is a summary of changes that is intended to help developers transition to 3.

+

We've put together a helpful guide that outlines some of the key changes from Bootstrap 2.x to 3.0.

-

Major CSS class changes from 2.x to 3.0

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Bootstrap 2.xBootstrap 3.0
.container-fluid.container
.row-fluid.row
.span*.col-md-*
.offset*.col-md-offset-*
.brand.navbar-brand
.hero-unit.jumbotron
.icon-*.glyphicon .glyphicon-*
.btn.btn .btn-default
.btn-mini.btn-xs
.btn-small.btn-sm
.btn-large.btn-lg
.visible-phone.visible-sm
.visible-tablet.visible-md
.visible-desktop.visible-lg
.hidden-phone.hidden-sm
.hidden-tablet.hidden-md
.hidden-desktop.hidden-lg
.input-small.input-sm
.input-large.input-lg
.input-prepend.input-group
.input-append.input-group
.add-on.input-group-addon
.btn-navbar.navbar-btn
.thumbnail.img-thumbnail
ul.inline.list-inline
-
-
+

Major class changes

+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Bootstrap 2.xBootstrap 3.0
.container-fluid.container
.row-fluid.row
.span*.col-md-*
.offset*.col-md-offset-*
.brand.navbar-brand
.hero-unit.jumbotron
.icon-*.glyphicon .glyphicon-*
.btn.btn .btn-default
.btn-mini.btn-xs
.btn-small.btn-sm
.btn-large.btn-lg
.visible-phone.visible-sm
.visible-tablet.visible-md
.visible-desktop.visible-lg
.hidden-phone.hidden-sm
.hidden-tablet.hidden-md
.hidden-desktop.hidden-lg
.input-small.input-sm
.input-large.input-lg
.input-prepend.input-group
.input-append.input-group
.add-on.input-group-addon
.btn-navbar.navbar-btn
.thumbnail.img-thumbnail
ul.inline.list-inline
+ +

What's new

+

We've added a few new elements and changed some existing ones. Here's their new or updated classes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementDescription
Panels.panel .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
Tiny grid (<768 px).col-xs-*
Small grid (>768 px).col-sm-*
Medium grid (>992 px).col-md-*
Large grid (>1200 px).col-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 groups.input-group .input-group-addon .input-group-btn
Form controls.form-control .form-group
Inline controls.checkbox-inline .radio-inline
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
Contextual panels.panel-success .panel-danger .panel-warning .panel-info
Modal.modal-dialog .modal-content
Thumbnail image.img-thumbnail
Well sizes.well-small .well-large
Alert links.alert-link
+ +

What's been removed

+

The following elements have been dropped or changed in v3.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementRemoved from 2.x3.0 Equivalent
Hero Unit.hero-unit.jumbotron
Form actions.form-actions-
Grid.span*.col-md-*
Fluid container.container-fluid.container (no more fixed grid)
Fluid row.row-fluid.row (no more fixed grid)
Icons.icon-*.glyphicon-*
Navbar button.btn-navbar.navbar-btn
Navbar inner.navbar-inner-
Thumbnails.thumbnails.col-* and .thumbnail
Input append / prepend.input-append .input-prepend .add-on.input-group
Dropdown submenu.dropdown-submenu-
Tab alignments.tabs-left .tabs-right .tabs-below-
+ +

Additional notes

+

We've made many underlying changes in v3 that are not immediately apparent without closer inspection. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach.

+ -

New Classes & Elements

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementDescription
Panels.panel .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
Tiny grid (<768 px).col-xs-*
Small grid (>768 px).col-sm-*
Medium grid (>992 px).col-md-*
Large grid (>1200 px).col-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 groups.input-group .input-group-addon .input-group-btn
Form controls.form-control .form-group
Inline controls.checkbox-inline .radio-inline
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
Contextual panels.panel-success .panel-danger .panel-warning .panel-info
Modal.modal-dialog .modal-content
Thumbnail image.img-thumbnail
Well sizes.well-small .well-large
Alert links.alert-link
-
-
- -

Deprecated Classes & Elements

-
-
- - - - - - - - - - - - - - - - - - -
ElementRemoved from 2.x3.0 Equivalent
Hero Unit.hero-unit.jumbotron
Form actions.form-actions-
Grid.span*.col-md-*
Fluid container.container-fluid.container (no more fixed grid)
Fluid row.row-fluid.row (no more fixed grid)
Icons.icon-*.glyphicon-*
Navbar button.btn-navbar.navbar-btn
Navbar inner.navbar-inner-
Thumbnails.thumbnails.col-* and .thumbnail
Input append / prepend.input-append .input-prepend .add-on.input-group
Dropdown submenu.dropdown-submenu-
Tab alignments.tabs-left .tabs-right .tabs-below-
-
-
- -

Additional Migration Notes

-
-
-
-
    -
  • .input-* are 100% width. 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
    • -
  • .container and .row are now fluid (percentage-based)
    • -
  • Images are not responsive by default. Use .img-responsive for fluid IMG size
    • -
  • The icons, now .glyphicon are in a separate CSS file.
    • -
  • Include .glyphicon base class in all icons (ie: .glyphicon .glyphicon-asterisk).
    • -
  • Typeahead has been dropped, in favor of using Twitter Typeahead.
    • -
  • Modal markup has changed .modal-header .modal-body .modal-footer now get wrapped in .modal-content and .modal-dialog
    • -
  • Events are namespaced. For example to handle the modal 'show' event, use 'show.bs.modal'. For tabs 'shown' use 'shown.bs.tab', etc..
    • -
-
-
-
- -

More Tools & Examples

You may also find this upgrade tool and collection of code snippets at Bootply useful for migrating to Bootstrap 3.

-