Bootstrap record two (about grid layout)

A raster system creates a page layout with a combination of rows (. row) and Columns (column), so only columns (column) can be used as direct child elements of rows (row), and what we want to write can be placed in joins (column), but the outer layers of the line need to define a layer to contain the row (. row), which is (. Container) or (. container-fluid), this layer is defined to facilitate the proper arrangement (aligment) and inner complement (padding) of the row (. Row).

(. Container) represents a fixed width, the width of the row is fixed, and the horizontal center, even if the element of the line is a block-level element, it will not occupy a row, the fixed width is how much, Bootstrap has been stipulated, that is, as follows:

	Ultra small screen phone (< 768px)	small screen tablet (≥768px)	medium-screen Desktop Monitor (≥992px)	big screen large desktop display (≥1200px) /small>
. Container maximum width	none (Auto)	750px	970px	1170px

(. Container-fluid) 100% width, 100% width, full line

The interval between columns and columns is set by setting the Padding property of the element that contains the column, and if the number of columns contained in a row is greater than 12, the remaining columns will be another row as a whole.

Depending on the screen size, the class prefixes for the columns are:      

	Ultra small screen phone (<768px)	small screen tablet (≥768px)	medium screen desktop display (≥992px)	big screen large desktop display (≥1200px)
	. col-xs-	. col-sm-	. col-md-	. col-lg-

After that you can write the size you want, as long as the <= 12 can be.

You can use (. col-md-offset-*) to offset columns to the right, for example. Col-md-offset-3 is to offset columns to the right by 3 columns.

You can also define a row (. row) and columns in a column to implement a raster layout.

Note:

In this section of the column, if you have a custom class, you need to put it in the back, that is, after the class of the definition column, the code is as follows:

<class= "col-md-3  col-sm-6  col-xs-12"  class= "Li_style"  >

Of course, you can just use one class and put them together, so you can put them anywhere. Like, put it in the back.

<class= "col-md-3  col-sm-6  col-xs-12  li_style">

Bootstrap record two (about grid layout)