The difference between bootstrap3 and bootstrap4

Foreword: After the emergence of bootstrap4, the inconveniences of bootstrap3 were modified to make it more convenient for front-end developers using the framework. (bootstrap is referred to as bs below)

1. Grid system

Compared with the original bs3, bs4 has a wider adaptation range. Among the xs sm md lg in the past bs3, bs4 added an xl range to adapt to the ultra-large screen.

#The original version all used float layout, and the new version uses flex layout. And in the new version, the grid system col does not need to add a specified number of columns. For example, if there are 2 cols in a row, they will be automatically divided into -6 and -6. If one of the three cols specifies its column number, but the other two do not, that is (12-x/)2.

2.img-circle and rounded-circle in the new version

In the old version, img-circle only takes effect on pictures, while in the new version, rounded-circle takes effect on all All the elements are in effect. You won’t know until you use it or not.

Related recommendations: "bootstrap Getting Started Tutorial"

3. Media Object

Removed media-left, media- Right only media-body will be adaptive in it. If you write an image before the body, it will be left, and after the body, it will be right.

Four.display series/offset/margin/padding

Offset: col-[size]-offset-[x] is no longer used instead Is offset-[size]-[x]

Margins: ml left margin mr right margin, mt top margin, mb bottom margin mx-horizontal direction my- vertical direction

ml- 1

Padding: pl,pr,pt,pb, px,py

5. Color

primary secondary info success warning danger light dark

bg- [Color]

text -[Color]

btn -[]

badge - [] corresponds to bs3 label

The above is the detailed content of The difference between bootstrap3 and bootstrap4. For more information, please follow other related articles on the PHP Chinese website!