From d1519400f283fe4c850ce323196c4bc80c9a7604 Mon Sep 17 00:00:00 2001 From: iatek Date: Sun, 18 Aug 2013 07:19:53 -0400 Subject: updates to migration --- getting-started.html | 140 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 140 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 9b80e266d..459813518 100644 --- a/getting-started.html +++ b/getting-started.html @@ -317,6 +317,146 @@ 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.

+ +

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.

+
+
+
-- cgit v1.2.3 From 6496ffb7d4fc042983882af8dadce39b1d7affac Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 18 Aug 2013 10:26:50 -0700 Subject: reformat all the things --- getting-started.html | 447 ++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 319 insertions(+), 128 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 459813518..30e55299e 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.

- -

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

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

+ +

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.

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

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.

-
-- cgit v1.2.3 From 5e2569f15bec7303a77f48a7dd079de8a8d4fa15 Mon Sep 17 00:00:00 2001 From: thgh Date: Sun, 18 Aug 2013 19:54:28 +0200 Subject: Fix well class names in migration section of getting-started.html --- getting-started.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 30e55299e..83c2583ce 100644 --- a/getting-started.html +++ b/getting-started.html @@ -545,7 +545,7 @@ bootstrap/ Well sizes - .well-small .well-large + .well-sm .well-lg Alert links -- cgit v1.2.3 From 776fb435c54c016966f2125115d832797868d777 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 18 Aug 2013 11:13:56 -0700 Subject: update nav for getting started migration --- getting-started.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 83c2583ce..a0dcddd14 100644 --- a/getting-started.html +++ b/getting-started.html @@ -324,11 +324,11 @@ bootstrap/ ================================================== -->
-

Migration

+

Migrating from 2.x to 3.0

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

-

Major class changes

+

Major class changes

@@ -441,6 +441,7 @@ bootstrap/
+

What's new

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

@@ -554,7 +555,7 @@ bootstrap/
-

What's been removed

+

What's removed

The following elements have been dropped or changed in v3.

-- cgit v1.2.3 From 2ca46ff97e8a5eab7f652cd2e318bc201012b4ab Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 18 Aug 2013 16:36:49 -0700 Subject: add angle brackets --- getting-started.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index a0dcddd14..8aafce369 100644 --- a/getting-started.html +++ b/getting-started.html @@ -676,7 +676,7 @@ bootstrap/

In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

IE Compatibility modes

-

Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate meta tag in your pages:

+

Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <meta> tag in your pages:

{% highlight html %} {% endhighlight %} -- cgit v1.2.3 From ed3e870da827cb7031b333a2c62212ad6912d670 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 18 Aug 2013 16:39:08 -0700 Subject: tweak formatting of additional migration notes --- getting-started.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 8aafce369..9d4d46a78 100644 --- a/getting-started.html +++ b/getting-started.html @@ -634,14 +634,14 @@ bootstrap/
  • .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
    • +
  • .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
    • +
  • 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).
    • +
  • Include .glyphicon base class in all icons (e.g. .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..
    • +
  • Events are namespaced. For example, to handle the modal "show" event, use 'show.bs.modal'. For tabs "shown" use 'shown.bs.tab', etc..
-- cgit v1.2.3