What is the difference between bootstrap v4 v3

Difference: 1. bootstrap v4 is written in Sass language, v3 is written in Less language; 2. v4 has 5 grid classes, v3 has 4 grid classes; 3. v3 uses px as the unit, v4 Use rem and em as units; 4. v3 uses float layout and v4 uses flexbox layout.

The operating environment of this tutorial: Windows7 system, Bootstrap3&&Bootstrap4 version, DELL G3 computer

Differences

##LessSass language writing4 types of grid classes5 types of grid classesUse px as unitUse rem and em is the unit (except for some margins and padding that use px) Use push and pull to move left and rightOffset columns are set by the offset-classUse the float layout methodSelect the flexible box model (flexbox)

Bootstrap3	Bootstrap4

The four grids of Bootstrap3:

• Extra small (col-xs-) Adapted to mobile phones (<768px)

• Small (col-sm-) Adapted to tablets (≥768px)

• Medium (col-md-) Suitable for computers (≥992px)

##Large (col-lg-) Suitable For widescreen computers (≥1200px)
5 grids for Bootstrap4:

Extra small (col-)(<576px)
small（col-sm-）(≥576px)

• ##中（col-md-）(≥768px)

• Large (col-lg-) (≥992px)

• Extra large (col-xl-) (≥1200px)
Bootstrap4 Features

The new grid layer is adapted to the mobile terminal;

• Comprehensive introduction of ES6 new Features (rewrite all JavaScript plugins);

• css files reduced by at least 40%;

• All documents rewritten with Markdown editor ;

• Abandon support for IE8
Note:

Bootstrap3 cannot be used in Bootstrap4 The hidden-xs, visible-xs classes in

If you want to hide at a certain size in Bootstrap 4, you should refer to the following table

It’s worth mentioning What's more, using hidden-sm in B3 will only hide the sm size, and other sizes 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 be hidden. It will also be hidden, and the size under sm will be displayed normally. This involves the issue of upward compatibility, so when you set the sm element to be hidden, you must also set the md size display, as shown in the table above, and so on for others.

Hide upward compatibility , showing downward compatibility

Bootstrap3 and Bootstrap4 vertical and horizontal centering:

Bootstrap3 horizontal centering

// 文本：
class ="text-center"
// 图片居中：
class = "center-block"

bootstrap4 Horizontal centering:

Under flex: For example, p.row

align-items-center can center the internal elements vertically

justify-content-center can center the internal elements vertically Elements are centered horizontally

align-self-center Elements are centered

Pictures are centered: .d-block .mx-auto

Recommended learning: "

bootstrap usage tutorial

》

The above is the detailed content of What is the difference between bootstrap v4 v3. For more information, please follow other related articles on the PHP Chinese website!