Bootstrap Grid Layout System Instance

First, the Basic principles:

1. Consider the screen as a sequence of grids/rasters/cells, arranged in a horizontal and vertical direction;

2. All data must be placed in the grid;

3. Using responsive layout, mobile settings first

Second, screen resolution is divided according to

1. (Screen < 768PX): Ultra-small Col-xs-x

2. (768px <= < 992px): Small screen Col-sm-x

3. (992px <= < 1200): Medium screen Col-md-x

4. (<= Screens): Large screen Col-lg-x

Second, the realization principle

1. First step: You must create a container, class= "container"

2. Step two: You must create a row, class= "Row"

3. Step three: You must create a grid, class= "Col-md-x", take the medium screen for example, the critical point is 992px

<! DOCTYPE html>