mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-02 16:04:07 +03:00
Merge branch 'v4-dev' into v4-docs-streamlined
This commit is contained in:
Mark Otto
+55
-42
@@ -16,20 +16,21 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to
|
||||
|
||||
### Browser support
|
||||
|
||||
- Dropped IE8 and iOS 6 support. v4 is now only IE9+ and iOS 7+. For sites needing either of those, use v3.
|
||||
- Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3.
|
||||
- Added official support for Android v5.0 Lollipop's Browser and WebView. Earlier versions of the Android Browser and WebView remain only unofficially supported.
|
||||
|
||||
### Global changes
|
||||
|
||||
- Flexbox is enabled by default. In general this means a move away from floats and more across our components.
|
||||
- Switched from [Less](http://lesscss.org/) to [Sass](http://sass-lang.com/) for our source CSS files.
|
||||
- Switched from `px` to `rem` as our primary CSS unit, though pixels are still used for media queries and grid behavior as viewports are not affected by type size.
|
||||
- Global font-size increased from `14px` to `16px`.
|
||||
- Added a new grid tier for ~`480px` and below.
|
||||
- Added a new grid tier for smaller devices at `576px` and below (our new `xs` tier).
|
||||
- Replaced the separate optional theme with configurable options via SCSS variables (e.g., `$enable-gradients: true`).
|
||||
|
||||
### Grid system
|
||||
|
||||
- Added support for flexbox (set `$enable-flex: true` and recompile) in the grid mixins and predefined classes.
|
||||
- Added support for flexbox in the grid mixins and predefined classes.
|
||||
- As part of flexbox, included support for vertical and horizontal alignment classes.
|
||||
- Overhauled grid mixins to merge `make-col-span` into `make-col` for a singular mixin.
|
||||
- Added a new `sm` grid tier below `768px` for more granular control. We now have `xs`, `sm`, `md`, `lg`, and `xl`. This also means every tier has been bumped up one level (so `.col-md-6` in v3 is now `.col-lg-6` in v4).
|
||||
@@ -41,7 +42,7 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to
|
||||
|
||||
- Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.
|
||||
- Dropped the Glyphicons icon font. If you need icons, some options are:
|
||||
- the upstream version of [Glyphicons](http://glyphicons.com/)
|
||||
- the upstream version of [Glyphicons](https://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.
|
||||
@@ -64,7 +65,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
|
||||
### Typography
|
||||
|
||||
- Moved all `.text-` utilities to the `_utilities.scss` file.
|
||||
- Dropped `.page-header` as, aside from the border, all it's styles can be applied via utilities.
|
||||
- Dropped `.page-header` as, aside from the border, all its styles can be applied via utilities.
|
||||
- `.dl-horizontal` has been dropped. Instead, use `.row` on `<dl>` and use grid column classes (or mixins) on its `<dt>` and `<dd>` children.
|
||||
- Custom `<blockquote>` styling has moved to classes—`.blockquote` and the `.blockquote-reverse` modifier.
|
||||
- `.list-inline` now requires that its children list items have the new `.list-inline-item` class applied to them.
|
||||
@@ -72,6 +73,8 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
|
||||
### Images
|
||||
|
||||
- Renamed `.img-responsive` to `.img-fluid`.
|
||||
- Renamed `.img-rounded` to `.rounded`
|
||||
- Renamed `.img-circle` to `.rounded-circle`
|
||||
|
||||
### Tables
|
||||
|
||||
@@ -94,17 +97,21 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
|
||||
- Dropped the `.form-horizontal` class requirement.
|
||||
- `.form-group` no longer applies styles from the `.row` via mixin, so `.row` is now required for horizontal grid layouts (e.g., `<div class="form-group row">`).
|
||||
- Added new `.form-control-label` class to vertically center labels with `.form-control`s.
|
||||
- Added custom forms support (for checkboxes, radios, selects, and file inputs).
|
||||
|
||||
### Buttons
|
||||
|
||||
- Renamed `.btn-default` to `.btn-secondary`.
|
||||
- Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's.
|
||||
- The [stateful button](http://getbootstrap.com/javascript/#buttons-methods) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
|
||||
- The [stateful button](https://getbootstrap.com/javascript/#buttons-methods) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
|
||||
- Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
|
||||
|
||||
### Button group
|
||||
|
||||
- Rewrote component with flexbox.
|
||||
- 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.
|
||||
|
||||
### Dropdowns
|
||||
|
||||
@@ -118,30 +125,44 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
|
||||
|
||||
### Grid system
|
||||
|
||||
- Added a new `~480px` grid breakpoint, meaning there are now five total tiers.
|
||||
- Added a new `576px` grid breakpoint as `sm`, meaning there are now five total tiers (`xs`, `sm`, `md`, `lg`, and `xl`).
|
||||
- Renamed the responsive grid modifier classes from `.col-{breakpoint}-{modifier}-{size}` to `.{modifier}-{breakpoint}-{size}` for simpler grid classes. For example, instead of `.col-md-3.col-md-push-9` it's `col-md-3.push-md-9`.
|
||||
- Overhauled the grid mixins to merge `make-col` and `make-col-span` into a single `make-col` mixin, thereby ensuring mixins and predefined classes utilize the same float/flex behaviors.
|
||||
- Added flexbox utility classes for grid system and components.
|
||||
|
||||
### List groups
|
||||
|
||||
- Rewrote component with flexbox.
|
||||
- Replaced `a.list-group-item` with an explicit class, `.list-group-item-action`, for styling link and button versions of list group items.
|
||||
|
||||
### Modal
|
||||
|
||||
- The `remote` option (which could be used to automatically load and inject external content into a modal) and the corresponding `loaded.bs.modal` event were removed. We recommend instead using client-side templating or a data binding framework, or calling [jQuery.load](http://api.jquery.com/load/) yourself.
|
||||
- Rewrote component with flexbox.
|
||||
- Given move to flexbox, alignment of dismiss icons in the header is likely broken as we're no longer using floats. Floated content comes first, but with flexbox that's no longer the case. Update your dismiss icons to come after modal titles to fix.
|
||||
- The `remote` option (which could be used to automatically load and inject external content into a modal) and the corresponding `loaded.bs.modal` event were removed. We recommend instead using client-side templating or a data binding framework, or calling [jQuery.load](https://api.jquery.com/load/) yourself.
|
||||
|
||||
### Navs
|
||||
|
||||
- Rewrote component with flexbox.
|
||||
- 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.
|
||||
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.
|
||||
- `.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.
|
||||
- `.navbar-toggle` is now `.navbar-toggler` and has different styles and inner markup (no more three `<span>`s).
|
||||
- Dropped the `.navbar-form` class entirely. It's no longer necessary; instead, just use `.form-inline` and apply margin utilities as necessary.
|
||||
- Navbars no longer include `margin-bottom` or `border-radius` by default. Use utilities as necessary.
|
||||
- All examples featuring navbars have been updated to include new markup.
|
||||
|
||||
### Pagination
|
||||
|
||||
- Rewrote component with flexbox.
|
||||
- Explicit classes (`.page-item`, `.page-link`) are now required on the descendants of `.pagination`s
|
||||
- Dropped the `.pager` component entirely as it was little more than customized outline buttons.
|
||||
|
||||
@@ -161,11 +182,11 @@ Dropped entirely for the new card component.
|
||||
|
||||
#### Panels
|
||||
|
||||
- `.panel` to `.card`
|
||||
- `.panel-default` removed and no replacement
|
||||
- `.panel` to `.card`, now built with flexbox.
|
||||
- `.panel-default` removed and no replacement.
|
||||
- `.panel-group` removed and no replacement. `.card-group` is not a replacement, it is different.
|
||||
- `.panel-heading` to `.card-header`
|
||||
- `.panel-title` to `.card-header`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{ site.baseurl }}/components/utilities/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
|
||||
- `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{ site.baseurl }}/utilities/typography/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
|
||||
- `.panel-body` to `.card-block`
|
||||
- `.panel-footer` to `.card-footer`
|
||||
- `.panel-primary` to `.card-primary` and `.card-inverse` (or use `.bg-primary` on `.card-header`)
|
||||
@@ -174,15 +195,33 @@ Dropped entirely for the new card component.
|
||||
- `.panel-warning` to `.card-warning` and `.card-inverse` (or use `.bg-warning` on `.card-header`)
|
||||
- `.panel-danger` to `.card-danger` and `.card-inverse` (or use `.bg-danger` on `.card-header`)
|
||||
|
||||
### Tooltips
|
||||
|
||||
- Removed support for `auto` placement options.
|
||||
|
||||
### Popovers
|
||||
|
||||
- Removed support for `auto` placement options.
|
||||
|
||||
### Carousel
|
||||
|
||||
- Renamed `.item` to `.carousel-item`.
|
||||
- Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.
|
||||
- All CSS has been un-nested and renamed, ensuring each class is prefixed with `.carousel-`.
|
||||
- For carousel items, `.next`, `.prev`, `.left`, and `.right` are now `.carousel-item-next`, `.carousel-item-prev`, `.carousel-item-left`, and `.carousel-item-right`.
|
||||
- `.item` is also now `.carousel-item`.
|
||||
- For prev/next controls, `.carousel-control.right` and `.carousel-control.left` are now `.carousel-control-right` and `.carousel-control-left`, meaning they no longer require a specific base class.
|
||||
- Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
|
||||
- Removed image overrides for images in carousel items, deferring to utilities.
|
||||
- Tweaked the Carousel example to include the new markup and styles.
|
||||
|
||||
### Utilities
|
||||
|
||||
- Added `.pull-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.pull-xs-left` and `.pull-xs-right`.
|
||||
- Added responsive variations to our text alignment classes `.text-{xs,sm,md,lg,xl}-{left,center,right}` and removed the redundant `.text-{left,center,right}` utilities as they are the same as the `xs` variation.
|
||||
- Dropped `.center-block` for the new `.m-x-auto` class.
|
||||
- Made display utilities responsive (e.g., `.d-none` and `d-{sm,md,lg,xl}-none`).
|
||||
- Added `.float-{sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-left` and `.float-right`.
|
||||
- Added responsive variations to our text alignment classes `.text-{sm,md,lg,xl}-{left,center,right}`.
|
||||
- Added new margin auto utilities for all sides, plus vertical and horizontal shorthands.
|
||||
- Added boatload of flexbox utilities.
|
||||
- Dropped `.center-block` for the new `.mx-auto` class.
|
||||
|
||||
### Vendor prefix mixins
|
||||
Bootstrap 3's [vendor prefix](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm) mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use [Autoprefixer](https://github.com/postcss/autoprefixer), they're no longer necessary.
|
||||
@@ -200,32 +239,6 @@ Our documentation received an upgrade across the board as well. Here's the low d
|
||||
- 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
|
||||
|
||||
We've added new components and changed some existing ones. Here are the new or updated styles.
|
||||
|
||||
| Component | Description |
|
||||
| --- | --- |
|
||||
| Cards | New, more flexible component to replace v3's panels, thumbnails, and wells. |
|
||||
| New navbar | Replaces the previous navbar with a new, simpler component. |
|
||||
| New progress bars | Replaces the old `.progress` `<div>` with a real `<progress>` element. |
|
||||
| New table variants | Adds `.table-inverse`, table head options, replaces `.table-condensed` with `.table-sm`, and `.table-reflow`. |
|
||||
| New utility classes | |
|
||||
|
||||
TODO: audit new classes that didn't exist in v3
|
||||
|
||||
## What's removed
|
||||
The following components have been removed in v4.0.0.
|
||||
|
||||
| Component | Removed from 3.x.x | 4.0.0 Equivalent |
|
||||
| --- | --- | --- |
|
||||
| Panels | | Cards |
|
||||
| Thumbnails | | Cards |
|
||||
| Wells | | Cards |
|
||||
| Justified navs | | |
|
||||
|
||||
TODO: audit classes in v3 that aren't present in v4
|
||||
|
||||
### Responsive utilities
|
||||
|
||||
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.
|
||||
|
||||
Reference in New Issue
Block a user