diff --git a/_includes/nav-getting-started.html b/_includes/nav-getting-started.html index 1cba756c35..16cafe9d07 100644 --- a/_includes/nav-getting-started.html +++ b/_includes/nav-getting-started.html @@ -18,6 +18,9 @@
  • Disabling responsiveness
  • +
  • + Migration +
  • Browser support
  • diff --git a/getting-started.html b/getting-started.html index 9b80e266d8..4598135185 100644 --- a/getting-started.html +++ b/getting-started.html @@ -317,6 +317,146 @@ bootstrap/ {% endhighlight %} + + + + +
    + + +

    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.

    + +

    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
    +
    +
    + +

    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.

    +
    +
    +