Shulou(Shulou.com)06/02 Report--

Today, the editor will share with you the relevant knowledge points about the differences between bootstrap4.0 and 3.0. the content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Differences: 1, Bootsrap3 uses float layout, Bootstrap4 uses flex layout; 2, Bootstrap4 grid system does not need to add a specified number of columns, Bootsrap3 is not; 3, Bootstrap3 has 4 grid classes, Bootstrap4 has 5 grid classes.

Operating environment of this tutorial: Windows7 system, bootsrap4 version, DELL G3 computer

The difference between Bootstrap4 and Bootstrap3

Float layout adopted by Bootsrap3 and flex layout adopted by Bootstrap4

The grid system in Bootstrap4 does not need to add a specified number of columns. For example, if there are 2 col in the row, the row will be evenly distributed at any size.

There are only four grid classes in Bootstrap3 (col-xs very small, col-sm small, col-md, medium col-lg large)

There are 5 kinds of grid classes in Bootstrap4 (col- is very small, col-sm- is small, col-md- is large, col-lg- is large, col-xl- is super large)

Bootstrap4 uses rem as a unit

Bootstrap4 sets column offset through offset-sm-4, while Bootstrap3 sets column offset through col-sm-offset-4

Bootstrap4 adds responsive containers such as container-sm, container-md... . when it is smaller than the screen size, it will occupy the whole screen when it is smaller than the grid class

Note:

You cannot use the hidden-xs,visible-xs class in Bootstrap3 in Bootstrap4

If you want to hide under a certain size in Bootstrap4, you should refer to the following table

Bootstrap3Bootstrap4hidden-xsd-sm-blockhidden-smd-sm-none d-md-blockhidden-mdd-md-none d-lg-blockhidden-lgd-lg-none d-xl-blockhidden-xld-xl-nonevisible-xsd-sm-nonevisible-smd-sm-block d-md-nonevisible-mdd-md-block d-lg-nonevisible-lgd-lg-block d-xl-nonevisible-xld-xl-block

It is worth mentioning that using hidden-sm in B3 will only hide under the sm size, while other dimensions will be displayed normally. In B4, if you simply specify d-sm-none, the element will be hidden in the sm size, but the size above sm will also be hidden, and the size under the sm will be displayed normally. This involves the problem of upward compatibility, so you have to set the md size display when you set the sm element hide, such as the table above, and so on.

Hide upward compatibility, show downward compatibility

These are all the contents of this article entitled "what are the differences between bootstrap4.0 and 3. 0". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.