Last year, August 19th was a special day for Bootstrap - not only the fourth anniversary of the project, but also the day when the internal beta version of Bootstrap 4 was released after a year of intensive development. Bootstrap 4 is a major update that involves almost every line of code.
1. New features
There are too many major updates in Bootstrap 4, and this article cannot cover everything. Here are some highlights that have attracted much attention:
Migrating from Less to Sass: Bootstrap is now joining the Sass family. Thanks to Libsass, Bootstrap compiles faster than before;
Improve the grid system: Add a new grid layer to adapt to mobile devices and reorganize semantic mixing.
Supports the selection of elastic box model (flexbox): This is an epoch-making function - as long as a Boolean variable is modified, you can quickly layout the advantages of flexbox.
Wells, thumbnails and panels are abandoned and cards are used instead: Cards is a brand new concept, but it is very similar to wells, thumbnails and panels, and is more convenient.
Integrate all HTML reset stylesheets into Reboot: Reboot can be used wherever Normalize.css is not available, it provides more options. For example, box-sizing: border-box, margin tweaks, etc. are stored in a separate Sass file.
New customization options: no longer separate effects such as gradients, fades, shadows, etc. in a separate style sheet like in the previous version. Instead, move all options into a Sass variable. Want to define a default effect for global or unconsidered corners? It's very simple, just update the variable value and recompile it.
IE8 is no longer supported, using rem and em units: giving up support for IE8 means that developers can use the advantages of CSS with confidence, and there is no need to study css hack skills or fallback mechanisms. Rem and em instead of px units are more suitable for responsive layouts and controlling component sizes. If you want to support IE8, you can only continue to use Bootstrap 3.
Rewrite all JavaScript plugins: To take advantage of the new features of JavaScript, Bootstrap 4 rewrites all plugins with ES6. Now we provide UMD support, generic teardown methods, option type checking and other features.
Improve tooltips and popovers automatic positioning: This part is thanks to the help of the Tether tool.
Improved documentation: All documents are rewritten in Markdown format, and some convenient plug-in organization examples and code snippets are added. The documentation will be more convenient to use, and the search optimization work is also in progress.
More changes : Supports custom form controls, blanks and fill classes, and includes new utility classes, etc.
The above updates are just the tip of the iceberg. The v4 version has more than 1,100 commits and 120,000 lines of code updates. These updates can be viewed in the v4-alpha document.
2. Development plan
All source code for v4 version is open source on the v4-dev branch of Github. In addition, there is a v4 development and tracking pr, publishing the changes list and list to be developed for master. You can contribute your own code to make this project better.
The overall development and release plan is as follows:
Several alpha versions will also be released in continuous improvements; two beta versions will be released after the new features and new functions are frozen for full testing; 2 candidate versions will be released to test whether they can be used in the production environment; and the final version will be released.
There is also a channel on Slack that specifically discusses v4, and Bootstrapers can be added here.
3. Support v3
When Bootstrap 3 was released, Bootstrap gave up its support for version 2.x, causing trouble for many users, and 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, v3's documentation will not be offline.
4. One more thing...
In addition to releasing Bootstrap 4 alpha, the official also released the Bootstrap theme.
These themes take a lot of energy and they have many toolsets themselves, just like Bootstrap itself.
To start, the published topics include: dashboard, application, and marketing, using the multiple-use license protocol.
Click here to view more topic information.
5. Feedback
1) Someone mentioned that in v3.5.5 (the last stable version), bootstrap.min.css is 123KB, while in the new 4.0.0alpha bootstrap.min.css, it is worth celebrating.
2) Someone reported that the dashboard theme is not completely responsive, such as in tables->order history.
3) Bootstrap has changed to using Sass by default, which has caused widespread discussion.
4) Some people also said that an organization is willing to give up old technology (no longer support IE8) and rewrite the library with new technology (ES6), which is worthy of respect.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
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.