On Bootstrap's fourth anniversary (August 19), Bootstrap 4 alpha was released. Now let's take a look at what updates Bootstrap 4 has made!!

  • Migrated from Less to Sass: Now, Bootstrap has joined the Sass family. Thanks to Libsass, Bootstrap's compilation speed is faster than before;
  • Improved grid system: Added a new grid tier for mobile devices, and reorganized semantic mixins.
  • Support for choosing the flexbox model: This is an epoch-making feature—just modify a Boolean variable to leverage the advantages of flexbox for rapid layout.
  • Deprecated wells, thumbnails, and panels, replaced by cards: Cards are a brand-new concept, but they work much like wells, thumbnails, and panels, and are even more convenient.
  • Consolidated all HTML reset style sheets into Reboot: You can use Reboot where Normalize.css cannot be used; it provides more options. For examplebox-sizing: border-box, margin tweaks, etc. are stored in a separate Sass file.
  • New customization options: Unlike the previous version, gradients, fades, shadows, and other effects are no longer placed in separate stylesheets. Instead, all options have been moved into a single Sass variable. Want to define a default effect globally or for corners you haven't considered? It's simple: just update the variable value and recompile.
  • No longer supports IE8, uses rem and em units: Dropping support for IE8 means developers can confidently take advantage of CSS without having to research CSS hacks or fallback mechanisms. Using rem and em instead of px units is better suited for responsive layouts and controlling component sizes. If you need to support IE8, you can only continue using Bootstrap 3.
  • Rewrote all JavaScript plugins: To take advantage of new JavaScript features, Bootstrap 4 rewrote all plugins in ES6. It now provides UMD support, generic destructuring methods, option type checking, and other features.
  • Improved automatic positioning for tooltips and popovers: This is thanks to the help of the Tether tool.
  • Improved documentation: All documentation has been rewritten in Markdown, with some convenient plugins added to organize examples and code snippets. The documentation will be more convenient to use, and search optimization is also underway.
  • More changes: Support for custom form controls, spacing and padding classes, as well as new utility classes, among others.

Support v3

When Bootstrap 3 was released, Bootstrap dropped support for the 2.x version, causing trouble for many users. The same mistake will not be made a second time. In the near future, the development team will continue to fix v3 bugs and improve documentation. After v4 is finally released, the v3 documentation will not be taken offline.

In addition to releasing the Bootstrap 4 alpha, the official team also released Bootstrap themes. However, they are all paid.

In the future, Example will continue to follow Bootstrap 4 developments. When the stable version is released, we will update the Chinese tutorial as soon as possible.

Related Links

Bootstrap 4 official website:http://v4-alpha.getbootstrap.com/

Bootstrap 3 tutorial:http://www.example.com/bootstrap/bootstrap-tutorial.html

Bootstrap online tools:http://www.example.com/try/bootstrap/layoutit/