mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 12:21:35 +02:00
Code Issues Releases Wiki Activity

start to fill in more migration docs

Browse Source
This commit is contained in:
Mark Otto
2015-03-11 19:45:48 +00:00
parent 3f3f4c6420
commit f36aa15bd0
1 changed files with 38 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
docs/migration.md
View File

@@ -3,40 +3,58 @@ layout: page
title: Migrating to v4.x.x title: Migrating to v4.x.x
--- ---
Bootstrap 4 is a major rewrite of almost the entire project. The most notable changes are summarized immediately below, followed by more specific class and behavioral changes to relevant components.
## Summary ## Summary
For a broader overview, see [what's new](http://blog.getbootstrap.com/DEAD-LINK-FIX-ME-PLEASE) in the v4.0.0 release announcement. Here are the big ticket items you'll want to be aware of when moving from v3 to v4.
- Dropped IE8 support—v4 is now only IE9+. For sites needing IE8, use v3. - Dropped IE8 and iOS 6 support. v4 is now only IE9+ and iOS 7+. For sites needing either of those, use v3.
- Dropped iOS 6 support.
- Added official support for Android v5.0 Lollipop's Browser and WebView. Earlier versions of the Android Browser and WebView remain only unofficially supported. - Added official support for Android v5.0 Lollipop's Browser and WebView. Earlier versions of the Android Browser and WebView remain only unofficially supported.
- Switched from `px` to `rem` as our primary unit in CSS. - Switched from `px` to `rem` as our primary CSS unit.
- Media queries are now in `em`s. - Media queries are now in `em`s instead of `px`s.
- Global font-size increased from `14px` to `16px`. - Global font-size increased from `14px` to `16px`.
- Dropped panels, thumbnails, and wells for a new component, cards. - Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.
- Switched from LESS to SCSS for our source CSS files. - Switched from LESS to SCSS for our source CSS files.
- Added a new grid tier for ~`480px` and below. - Added a new grid tier for ~`480px` and below.
- Dropped Glyphicons icon font. - Dropped the Glyphicons icon font.
- Dropped the Affix jQuery plugin. We recommend using a `position: sticky` polyfill instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations. - Dropped the Affix jQuery plugin. We recommend using a `position: sticky` polyfill instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations.
- Refactored nearly all components to use more unnested classes instead of children selectors. - Refactored nearly all components to use more unnested classes instead of children selectors.
- Non-responsive usage of Bootstrap is no longer supported. - Non-responsive usage of Bootstrap is no longer supported.
- Images are now responsive (via `max-width`) by default.
- Dropped the online Customizer in favor of more extensive setup documentation. - Dropped the online Customizer in favor of more extensive setup documentation.
- Replaced the separate optional theme with... - Replaced the separate optional theme with configurable options via SCSS variables (e.g., `@enable-gradients: true`).
## Major class changes ## By component
This table shows the style changes between v3.x.x and v4.0.0. This table shows the style changes between v3.x.x and v4.0.0.
| Bootstrap 3.x.x | Bootstrap 4.0.0 | ### Tables
| --- | --- |
| Pager's `.previous` | `.pager-prev` | - Nearly all instances of the `>` selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.
| Pager's `.next` | `.pager-next` | - Responsive tables no longer require a wrapping element. Instead, just put the `.table-responsive` right on the `<table>`.
| Carousel's `.item` | `.carousel-item` | - Changed `.table-condensed` to `.table-sm` for consistency.
| Tabs | | - Added a new `.table-inverse` option.
| Pills | |
| Buttons | | ### Pager
- Changed `.previous` and `.next` to `.pager-prev` and `.pager-next`.
### Carousel
- Changed `.item` to `.carousel-item`.
## Documentation
Our documentation has received an upgrade across the board as well. Here's the low down:
- We're still using Jekyll, but we've got a custom plugin in the mix (`example.rb`) for easier example-code handling.
- All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
- Pages have been reorganized for simpler content and a more approachable hierarchy.
- We moved from regular CSS to SCSS to take full advantage of Bootstrap's variables, mixins, and more.
## What's new ## What's new
We've added new components and changed some existing ones. Here are the new or updated styles. We've added new components and changed some existing ones. Here are the new or updated styles.
| Component | Description | | Component | Description |
@@ -61,7 +79,10 @@ The following components have been removed in v4.0.0.
TODO: audit classes in v4 that aren't present in v4 TODO: audit classes in v4 that aren't present in v4
### Responsive utilities
The following deprecated Less/SCSS variables have been removed in v4.0.0: The following deprecated Less/SCSS variables have been removed in v4.0.0:
* `@screen-phone`, `@screen-tablet`, `@screen-desktop`, `@screen-lg-desktop`. Use the more abstract `$screen-{xs,sm,md,lg,xl}-*` variables instead. * `@screen-phone`, `@screen-tablet`, `@screen-desktop`, `@screen-lg-desktop`. Use the more abstract `$screen-{xs,sm,md,lg,xl}-*` variables instead.
* `@screen-sm`, `@screen-md`, `@screen-lg`. Use the more clearly named `$screen-{xs,sm,md,lg,xl}-min` variables instead. * `@screen-sm`, `@screen-md`, `@screen-lg`. Use the more clearly named `$screen-{xs,sm,md,lg,xl}-min` variables instead.
* `@screen-xs`, `@screen-xs-min`. The extra small breakpoint has no lower bound, so these variables were logically absurd. Reformulate your expression in terms of `$screen-xs-max` instead. * `@screen-xs`, `@screen-xs-min`. The extra small breakpoint has no lower bound, so these variables were logically absurd. Reformulate your expression in terms of `$screen-xs-max` instead.