迁移到 v4 版本 | Migrating to v4

Migrating to v4

Bootstrap 4是整个项目的重大改写。下面总结了最显着的变化，随后对相关组件进行了更具体的更改。

Beta 2的变化

While in beta, we aim to have no breaking changes. However, things don’t always go as planned. Below are the breaking changes to bear in mind when moving from Beta 1 to Beta 2.

Breaking

Removed $badge-color variable and its usage on .badge. We use a color contrast function to pick a color based on the background-color, so the variable is unnecessary.

Highlights

Introduced new pointer-events usage on modals. The outer .modal-dialog passes through events with pointer-events: none for custom click handling (making it possible to just listen on the .modal-backdrop for any clicks), and then counteracts it for the actual .modal-content with pointer-events: auto.

Summary

Here are the big ticket items you’ll want to be aware of when moving from v3 to v4.

Browser support

Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3.

Global changes

Flexbox is enabled by default. In general this means a move away from floats and more across our components.

Grid system

Moved to flexbox.

Components

Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.

By component

This list highlights key changes by component between v3.x.x and v4.0.0.

Reboot

New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the box-sizing: border-box change, moving from em to rem units on many elements, link styles, and many form element resets.

Typography

Moved all .text- utilities to the _utilities.scss file.

Images

Renamed .img-responsive to .img-fluid.

Tables

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.

Forms

Moved element resets to the _reboot.scss file.

Buttons

Renamed .btn-default to .btn-secondary.

Button group

Rewrote component with flexbox.

Dropdowns

Switched from parent selectors to singular classes for all components, modifiers, etc.

Grid system

Added a new 576px grid breakpoint as sm, meaning there are now five total tiers (xs, sm, md, lg, and xl).

List groups

Rewrote component with flexbox.

Modal

Rewrote component with flexbox.

Navs

Rewrote component with flexbox.

Navbar

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-expand-{breakpoint} where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.

Pagination

Rewrote component with flexbox.

Breadcrumbs

An explicit class, .breadcrumb-item, is now required on the descendants of .breadcrumbs

Labels and badges

Renamed .label to .badge to disambiguate from the <label> element.

Panels, thumbnails, and wells

Dropped entirely for the new card component.

Panels

.panel to .card, now built with flexbox.

Progress

Replaced contextual .progress-bar-* classes with .bg-* utilities. For example, class="progress-bar progress-bar-danger" becomes class="progress-bar bg-danger".

Carousel

Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.

Tables

Removed support for styled nested tables. All table styles are now inherited in v4 for simpler selectors.

Utilities

Display, hidden, and more:

Vendor prefix mixins

Bootstrap 3’s vendor prefix mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use Autoprefixer, they’re no longer necessary.

Removed the following mixins: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d, user-select

Documentation

Our documentation received an upgrade across the board as well. Here’s the low down:

We’re still using Jekyll, but we have plugins in the mix:

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.

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 or use inline styles like style="display: none;" and style="display: block;".

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-xl-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. 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.

 © 2011–2017 Twitter, Inc.

Code licensed under the MIT License.

Documentation licensed under the Creative Commons Attribution License v3.0.

https://getbootstrap.com/docs/4.0/migration/