diff options
| author | Pierre Vanduynslager <[email protected]> | 2017-04-08 18:43:25 -0400 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-04-08 18:43:25 -0400 |
| commit | fe72daf2b34263d3cfc9bc77e9998cd22adfa34d (patch) | |
| tree | 15dc9fc6fcb513362ba112d52ab01b568b423709 /docs/migration.md | |
| parent | f5cc59145642d78d7abbdf38fee1905786da5367 (diff) | |
| parent | feb35b94a61c4d6016be8d1773a79a6bbe57d856 (diff) | |
| download | bootstrap-fe72daf2b34263d3cfc9bc77e9998cd22adfa34d.tar.xz bootstrap-fe72daf2b34263d3cfc9bc77e9998cd22adfa34d.zip | |
Merge branch 'v4-dev' into dropdown-keyboard
Diffstat (limited to 'docs/migration.md')
| -rw-r--r-- | docs/migration.md | 21 |
1 files changed, 12 insertions, 9 deletions
diff --git a/docs/migration.md b/docs/migration.md index 5e623317e..2584a22e8 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -108,6 +108,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with ### Button group - Rewrote component with flexbox. +- Removed `.btn-group-justified`. - Dropped the `.btn-group-xs` class entirely given removal of `.btn-xs`. - Removed explicit spacing between button groups in button toolbars; use margin utilities now. - Improved documentation for use with other components. @@ -151,7 +152,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization. -- Responsive navbar behaviors are now applied to the `.navbar` class via the **required** `.navbar-toggleable-{breakpoint}` where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling. +- Responsive navbar behaviors are now applied to the `.navbar` class via the **required** `.navbar-expand-{breakpoint}` where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling. - `.navbar-default` is now `.navbar-light`, though `.navbar-inverse` remains the same. **One of these is required on each navbar.** However, these classes no longer set `background-color`s; instead they essentiatlly only affect `color`. - Navbars now require a background declaration of some kind. Choose from our background utilities (`.bg-*`) or set your own with the light/inverse classes above [for mad customization]({{ site.baseurl }}/components/navbar/#color-schemes). - Given flexbox styles, navbars can now use flexbox utilities for easy alignment options. @@ -243,17 +244,19 @@ Our documentation received an upgrade across the board as well. Here's the low d All `@screen-` variables have been removed in v4.0.0. Use the `media-breakpoint-up()`, `media-breakpoint-down()`, or `media-breakpoint-only()` Sass mixins or the `$grid-breakpoints` Sass map instead. -The responsive utility classes have also been overhauled. +Our responsive utility classes have largely been removed in favor of explicit `display` utilities. -- The `.hidden` and `.show` classes have been removed because they conflicted with jQuery's `$(...).hide()` and `$(...).show()` methods. Instead, try toggling the `[hidden]` attribute, use inline styles like `style="display: none;"` and `style="display: block;"`, or toggle the `.invisible` class. -- The old classes (`.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` `.visible-xs-block` `.visible-xs-inline` `.visible-xs-inline-block` `.visible-sm-block` `.visible-sm-inline` `.visible-sm-inline-block` `.visible-md-block` `.visible-md-inline` `.visible-md-inline-block` `.visible-lg-block` `.visible-lg-inline` `.visible-lg-inline-block`) are gone. -- They have been replaced by `.hidden-xs-up` `.hidden-xs-down` `.hidden-sm-up` `.hidden-sm-down` `.hidden-md-up` `.hidden-md-down` `.hidden-lg-up` `.hidden-lg-down`. -- The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or larger (e.g. `.hidden-md-up` hides an element on medium, large, and extra-large devices). -- The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller (e.g. `.hidden-md-down` hides an element on extra-small, small, and medium devices). +- The `.hidden` and `.show` classes have been removed because they conflicted with jQuery's `$(...).hide()` and `$(...).show()` methods. Instead, try toggling the `[hidden]` attribute or use inline styles like `style="display: none;"` and `style="display: block;"`. +- All `.hidden-` classes have been removed, save for the print utilities which have been renamed. + - Removed from v3: `.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` `.visible-xs-block` `.visible-xs-inline` `.visible-xs-inline-block` `.visible-sm-block` `.visible-sm-inline` `.visible-sm-inline-block` `.visible-md-block` `.visible-md-inline` `.visible-md-inline-block` `.visible-lg-block` `.visible-lg-inline` `.visible-lg-inline-block` + - Removed from v4 alphas: `.hidden-xs-up` `.hidden-xs-down` `.hidden-sm-up` `.hidden-sm-down` `.hidden-md-up` `.hidden-md-down` `.hidden-lg-up` `.hidden-lg-down` +- Print utilities no longer start with `.hidden-` or `.visible-`, but with `.d-print-`. + - Old names: `.visible-print-block`, `.visible-print-inline`, `.visible-print-inline-block`, `.hidden-print` + - New classes: `.d-print-block`, `.d-print-inline`, `.d-print-inline-block`, `.d-print-none` -Rather than using explicit `.visible-*` classes, you make an element visible by simply not hiding it at that screen size. You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes (e.g. `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large devices). +Rather than using explicit `.visible-*` classes, you make an element visible by simply not hiding it at that screen size. You can combine one `.d-*-none` class with one `.d-*-block` class to show an element only on a given interval of screen sizes (e.g. `.d-none.d-md-block.d-lg-none` shows the element only on medium and large devices). -Note that the changes to the grid breakpoints in v4 means that you'll need to go one breakpoint larger to achieve the same results (e.g. `.hidden-md` is more similar to `.hidden-lg-down` than to `.hidden-md-down`). The new responsive utility classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases. +Note that the changes to the grid breakpoints in v4 means that you'll need to go one breakpoint larger to achieve the same results. The new responsive utility classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases. ## Misc notes to prioritize |
