BOOTSTRAP_-Response Grid system

First add a CSS style:

    [Class *= col-]{      background-color: #eee;       Border: 1px solid #ccc;    } {background-color: #f36;                  Border:1px dashed #fff;       color: #fff;    }

First, Introduction

The principle of grid system is very simple, simply by defining the size of the container, split 12 parts (also flat into 24 or 32 parts, but 12 is the most common), and then adjust the internal and external margins, and finally combined with media query, the system made a powerful response grid system. The grid system in the bootstrap framework is to divide the container into 12 parts.

Second, the principle of work

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

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

3, the specific content should be placed in the column container (columns), and only columns (column) can be used as a direct child element of the row container (. Row).

4. Create the spacing between columns by setting the padding (padding). The effect of the padding (padding) is then offset by setting a negative margin (margin) for the first column and the last column.

<Divclass= "Container">  <Divclass= "Row">    <Divclass= "Col-md-4">. col-md-4</Div>    <Divclass= "Col-md-8">. col-md-8</Div>  </Div>  <Divclass= "Row">    <Divclass= "Col-md-4">. col-md-4</Div>    <Divclass= "Col-md-4">. col-md-4</Div>    <Divclass= "Col-md-4">. col-md-4</Div>  </Div>  <Divclass= "Row">    <Divclass= "Col-md-3">. col-md-3</Div>    <Divclass= "Col-md-6">. col-md-6</Div>    <Divclass= "Col-md-3">. col-md-3</Div>  </Div></Div>

Three, screen size

There are four basic uses in the grid system of the bootstrap framework.

Four, column offset
Sometimes we don't want the next two columns to be close together, but we don't want to use margin or other technical means.

You can do this at this time using the column shift (offset) feature. 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 this class name will be shifted to the right.

<Divclass= "Container">  <Divclass= "Row">    <Divclass= "Col-xs-4">. col-xs-4</Div>    <Divclass= "Col-xs-2 col-xs-offset-2">Move 2 columns to the right</Div>    <Divclass= "Col-xs-2">. col-xs-2</Div>  </Div>  <Divclass= "Row">    <Divclass= "Col-xs-4">. col-xs-4</Div>    <Divclass= "Col-xs-4 col-xs-offset-4">Column to the right moves the spacing of four columns</Div>  </Div></Div>

Five, 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 grid system of the bootstrap framework is by adding the class name ". col-md-push-*" and ". col-md-pull-*" (where the asterisk represents the number of column combinations moved)

<Divclass= "Container">  <Divclass= "Row">    <Divclass= "Col-md-4 col-md-push-8">. col-md-4</Div>    <Divclass= "Col-md-8 col-md-pull-4">. col-md-8</Div>  </Div></Div>

Vi. Nesting of columns
The grid system of the bootstrap framework also supports nesting of columns.

You can add one or more row containers to a column, and then insert columns in the row container (using columns as described earlier).

But the row container in the column container, with a width of 100%, is the width of the current outer column.

<Divclass= "Container">  <Divclass= "Row">    <Divclass= "Col-md-8">I have a grid nested inside.<Divclass= "Row">        <Divclass= "Col-md-6">Col-md-6</Div>        <Divclass= "Col-md-6">Col-md-6</Div>      </Div>    </Div>    <Divclass= "Col-md-4">Col-md-4</Div>  </Div>  <Divclass= "Row">    <Divclass= "Col-md-4">. col-md-4</Div>    <Divclass= "Col-md-8">I have a grid nested inside.<Divclass= "Row">        <Divclass= "Col-md-4">Col-md-4</Div>        <Divclass= "Col-md-4">Col-md-4</Div>        <Divclass= "Col-md-4">Col-md-4</Div>      </Div>    </Div>  </Div></Div>

BOOTSTRAP_-Response Grid system