Bootstrap Learning Speed Table (iv) grid system

The grid system of the bootstrap framework works as follows:

1. The data row (. Row) must be included in the container (. Container) to give it the appropriate alignment and padding (padding). Such as:

2. Columns (. Column) can be added in the row (. Row), but the sum of the columns cannot exceed the total number of columns in the split, such as 12. Such as:

<Divclass= "Container">    <Divclass= "Row">          <Divclass= "Col-md-4"></Div>          <Divclass= "Col-md-8"></Div>    </Div></Div>        

The other, outermost box, with a large white area, is equivalent to the viewable area of the browser. The bootstrap frame's grid system has a responsive effect with four types of browsers ( ultra-small screen, small screen, medium screen and large screen ) with breakpoints (pixel demarcation point) of 768px, 992px and 1220px.

The correspondence is:. col-xs-,. col-sm-,. col-md-,. col-lg-

3. Column offset:

Using column offsets is also straightforward, simply by adding the class name "col-md-offset-*" on the column element (where the asterisk represents the number of column combinations to offset), then the column with that class name will be shifted to the right. For example, you add "col-md-offset-4" on a column element to indicate that the column moves the width of 4 columns to the right.

4, column sort:

Column sorting is actually changing the direction of the column, that is, changing the left and right floats, and setting the floating distance. In the bootstrap framework, the grid system is by adding the class name "col-md-push-*" and "col-md-pull-*" (where the asterisk represents the number of column combinations moved).

Bootstrap Learning Speed Table (iv) grid system