August 19 last year was a special day for bootstrap-not only the four-year anniversary of the project,It is also the day when bootstrap 4 beta is released after a year of intensive development.bootstrap 4 is a major update,It involves almost every line of code.

1.New features

There are too many major updates in bootstrap 4,This article cannot be exhaustive,Here are some highlights:

Migrating from less to sass:Bootstrap has now joined the sass family.Thanks to libsass, bootstrap compiles faster than before;

Improve the grid system:Add a grid layer to adapt to mobile devices,And rectify semantic mixing.

Support selection of flexbox model:This is an epoch-making feature-as long as you modify a boolean variable, you can use the advantages of flexbox to quickly layout.

Wells, thumbnails, and panels are deprecated and cards are used instead:cards is a new concept.But it is similar to wells, thumbnails and panels, and more convenient to use.

Integrate all html reset style sheets into reboot:You can use reboot where normalize.css is not needed, 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 like the previous version,Separate effects like gradients, fades, and shadows into separate style sheets.Instead, move all options into a sass variable. Want to define a default effect for global or unexpected corners?It's easy, just update the value of the variable,Then recompile it.

Ie8 is no longer supported, rem and em units are used:Abandoning support for ie8 means that developers can safely use the advantages of css without having to study css hacks or fallback mechanisms.Using rem and em instead of px units is more suitable for responsive layout.Controls component size.If i want to support ie8, you can only continue to use bootstrap 3.

Rewrite all javascript plugins:To use the new features of javascript,bootstrap 4 rewrites all plugins with es6.Features such as umd support, generic disassembly methods, and option type checking are now available.

Improved automatic tooltip and popovers positioning:Thanks for the help of the tether tool.

Improve documentation:All documents are rewritten in markdown format,Added some handy plugin organization examples and code snippets,The documentation will be more convenient to use,Search optimization is also ongoing.

More changes:Supports custom form controls, blank and fill classes,Also includes new utility classes and more.

The above update is 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 documentation.

2. Development plan

All source code of the v4 version is open source on the v4-dev branch of github.In addition, there is a v4 development and tracking pr that publishes the master's changes list and the to-be-developed list.Everyone can contribute their 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 improvement;two beta versions will be released for full testing after new features and new functions are frozen; 2 release candidate releases,Test whether it can be used in a production environment; Release the final version.

3.Support v3

When bootstrap 3 was released, bootstrap dropped its support for 2.x version,Caused 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 the documentation.After the final release of v4,The v3 documentation will not go offline.

4, one more thing ...

In addition to the release of bootstrap 4 alpha, the official release of the bootstrap theme.

As a start,The topics released are:dashboard, application, and marketing, using multiple-use license agreements.


1) Someone mentioned,In v3.5.5 (the last stable version), bootstrap.min.css is 123kb, and in the new 4.0.0alpha bootstrap.min.css it is only 88kb, which is worth celebrating.

2) Some people report that the theme of the dashboard is not completely responsive,For example, in tables->order history.

3) Bootstrap was changed to use sass by default, which caused widespread discussion.

4) Someone also said,An organization is willing to give up the old technology (no longer support ie8) to rewrite the library with new technology (es6),honourable.

If i want to learn more,Can clickHereTo learn,Attached 3 exciting topics for everyone:

  • Previous On the similarities and differences between Bootstrap3 and Foundation5 grid systems
  • Next Fifty-one in manipulating data in ASPNET 20: inserting new records from the footer of the GridView