The initial version of Bootstrap 4 has been released for a long time, and I hope everyone can realize that this is a major and thorough renovation of this popular (probably the most popular) responsive CSS framework. The project founder, Mark Otto, said the release “involved almost every line of code” and that’s not a joke.
1. Lighter file size
There is a saying, "The deleted code must be the debugged code," - the best refactoring will definitely lead to the project deleting a large amount of code and quickly slimming down. If you download the initial version, you will find that the new 4.0.0 initial bootstrap.min.css is only about 88KB compared to the latest stable version of Bootstrap 3 (3.3.5) - about 123KB (bootstrap.min.css file). This may be due to the support of IE8.
2. Switch from LESS to Sass
Community and performance are two main reasons why Bootstrap decided to make this switch in version 4. In particular, the basis for the debate is:
----SaaS projects are faster than LESS iteration
----Switching to Sass improves the performance of the framework
However, LESS still looks like it has a popularity advantage from GitHub’s page, but Bootstrap says Sass is growing very fast. Either way, you can do a lot of CSS encoding in Sass in Bootstrap 3 in the right way. Some people are wondering whether PostCSS - a promising modular tool, has powerful performance for preprocessing, and whether it should replace LESS.
3. Switch Flexbox support
Bootstrap 4 now supports the use of W3C Flexbox function, which can still eliminate the support of all browsers. For this reason, this is an optional feature that can be turned on if needed.
If you need to review Flexbox quickly, I recommend a guide to you - "A Complete Guide to Flexbox". There is also a new video series about Flexbox, if you prefer this method.
4.Readjust the card UI layout mode
Andrew Trice and I both 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 put all its chips on this trend. Bootstrap abandoned wells, thumbnails, and panels, and instead used cards instead.
5. Rewrite JS plugin in ES6
ECMAScript 6 was finally finalized and standardized a few months ago, and Bootstrap follows this latest web technology. They have rewrite all JavaScript plugins to take advantage of ES6, and they have also updated the plugins together, "UMD support, universal teardown method, selection type checking, and so on."
Translation link: http://www.codeceo.com/article/bootstrap-5-cool-things.html
Original English: 5 Cool Things About the Next Version of Bootstrap
Translator: Xiaofeng, Coding Network
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.
If you still want to study in depth, you can click here to learn and attach a wonderful topic to you: Bootstrap learning tutorial