Grid system of Bootstrap

Bootstrap grid system (grip system) divides the page into 12 grids, which can be divided according to the 12 grids, which is very convenient for writing adaptive pages, and only needs to be cooperated with. Row class and. Col class,. col-xs-ultra-small screen cell phone (<768px) ,. col-sm-small Screen Flat panel (≥768px),. col-md-Medium-screen desktop display (≥992px) (raster parameters).

For example, if you want to achieve the results of the following pictures on the page, simply divide the grid into three parts, 4 grids per copy

If you want to select the number of rows to display based on the size of your computer, tablet, or cell phone, you can use the col-*-* written above to assign them, such as <div class= "Col-xs-6 col-sm-4" > This means that the screen grid is divided into 2 parts, each 6 grid, The device is displayed in two columns, and the tablet and computer desktop is divided into 3 parts, each 4 grid, the device displayed as three columns (the following grid view), that is to say. Col is based on col-device Parameters-grid number of control page division.

. Col must be contained in. Row to use, while. Col and. Row must be used in. Container, here are some examples to understand:

<div class= "Container" >