5 Cool features of next generation Bootstrap

The initial version of Bootstrap 4 was released this week, and I hope you can all realize that this is a major overhaul of this popular (probably most popular) responsive CSS framework. The project's founder, Mark Otto, said the release was "almost every line of code", which was not a joke.

1. More compact File size

There is a saying, "The deleted code must be already debugged code,"--the best refactoring will cause the project to delete a lot of code, quickly slimming. If you download the initial version, then you will find, with the latest stable version Bootstrap 3 (3.3.5)--About 123KB size (bootstrap.min.css file)--compared to The new 4.0.0 initial bootstrap.min.css is only about 88KB. This may be due to the support of IE8.

2. Switch from less to SASS

Community and performance are the two main reasons Bootstrap decided to switch in version 4. In particular, the arguments are based on:

• SaaS projects are faster than less iterations

• Switching to sass improves the performance of the framework

However, from the GitHub page, less still looks like a popular advantage, but Bootstrap says sass is growing at a very fast pace. Either way, you can do a lot of CSS coding in the sass of Bootstrap 3 in the right way. Some people suspect that postcss--a promising modular tool, whether it has a powerful performance to do preprocessing, and whether it should replace less.

3. Toggle Flexbox Support

Bootstrap 4 now supports the use of the Flexbox feature, Flexbox functionality can still eliminate all browser support. For this reason, this is an optional feature that can be opened if needed.

If you need to review Flexbox quickly, then I recommend you a guide-"a complete guides to Flexbox". There's also a new video series on Flexbox, if you prefer this way.

4. Re-adjust the card UI layout mode

Both Andrew Trice and I think this is an important UI layout pattern that should be understood as early as 2013 in Google's material design, and now Bootstrap 4 has all the chips on the trend. Bootstrap abandoned wells, thumbnails and panels, instead using cards.

5. Rewrite the JS plugin in ES6

ECMAScript 6 was finalized and standardized a few months ago, and Bootstrap followed the latest web technology. They have rewritten all the JavaScript plugins to take advantage of the ES6, and they have also updated the plugins together, "UMD support, General disassembly methods, select type checking, and so on." ”

All right! Let's grab a fresh look at its documentation and what it looks like!

English Original: 5 Cool things about the Next Version of Bootstrap translation: Codeceo

5 Cool features of next generation Bootstrap