diff options
Diffstat (limited to 'docs/migration.md')
| -rw-r--r-- | docs/migration.md | 25 |
1 files changed, 21 insertions, 4 deletions
diff --git a/docs/migration.md b/docs/migration.md index c2cc5d4f5..5d14f34a7 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -21,9 +21,8 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to ### Global changes -- Switched from LESS to SCSS for our source CSS files. +- Switched from [Less](http://lesscss.org/) to [SCSS](http://sass-lang.com/) for our source CSS files. - Switched from `px` to `rem` as our primary CSS unit. -- Media queries are now in `em`s instead of `px`s. - Global font-size increased from `14px` to `16px`. - Added a new grid tier for ~`480px` and below. - Replaced the separate optional theme with configurable options via SCSS variables (e.g., `$enable-gradients: true`). @@ -31,8 +30,12 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to ### Components - Dropped panels, thumbnails, and wells for a new all-encompassing component, cards. -- Dropped the Glyphicons icon font. +- Dropped the Glyphicons icon font. If you need icons, some options are: + - the upstream version of [Glyphicons](http://glyphicons.com/) + - [Octicons](https://octicons.github.com/) + - [Font Awesome](https://fortawesome.github.io/Font-Awesome/) - 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. + - If you were using Affix to apply additional, non-`position` styles, the polyfills might not support your use case. One option for such uses is the third-party [ScrollPos-Styler](https://github.com/acch/scrollpos-styler) library. - Refactored nearly all components to use more unnested classes instead of children selectors. ### Misc @@ -70,6 +73,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with ### Forms - Moved element resets to the `_reboot.scss` file. +- Renamed `.control-label` to `.form-control-label`. - Renamed `.input-lg` and `.input-sm` to `.form-control-lg` and `.form-control-sm`, respectively. - Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now. - Horizontal forms overhauled: @@ -77,6 +81,10 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with - `.form-group` no longer mixins the `.row` class, so it's now required for grid layouts. - Added new `.form-control-label` class to vertically center labels with `.form-control`s. +### Buttons + +- Renamed `.btn-default` to `.btn-secondary`. + ### Grid system - Added a new `~480px` grid breakpoint, meaning there are now five total tiers. @@ -94,6 +102,10 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with - Dropped nearly all `>` selectors for simpler styling via un-nested classes. - Instead of HTML-specific selectors like `.nav > li > a`, we use separate classes for `.nav`s, `.nav-item`s, and `.nav-link`s. This makes your HTML more flexible while bringing along increased extensibility. +## Navbar + +- Dropped the `.navbar-form` class entirely. It's no longer necessary. + ### Pager - Renamed `.previous` and `.next` to `.pager-prev` and `.pager-next`. @@ -120,6 +132,11 @@ Dropped entirely for the new card component. - Renamed `.item` to `.carousel-item`. +### Utilities + +- Added `.pull-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats +- Removed `.pull-left` and `.pull-right` since they're redundant to `.pull-xs-left` and `.pull-xs-right` + ## Documentation Our documentation received an upgrade across the board as well. Here's the low down: @@ -179,7 +196,7 @@ Note that the changes to the grid breakpoints in v4 means that you'll need to go ## Misc notes to prioritize - Removed the `min--moz-device-pixel-ratio` typo hack for retina media queries -- Dropped `.hidden` and `.show` because it interferes with jQuery's `$(...).hide()`. +- Dropped `.hidden` and `.show` because they conflict with jQuery's `$(...).hide()` and `$(...).show()` methods. - Change buttons' `[disabled]` to `:disabled` as IE9+ supports `:disabled`. However `fieldset[disabled]` is still necessary because [native disabled fieldsets are still buggy in IE11](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility). TODO: audit list of stuff in v3 that was marked as deprecated |