Bootstrap 2 basic CSS grid system

One: 12 lattice structure

Two:

<Divclass= "Container">        <H1>Hello, world!.</H1>        <Divclass= "Row">            <Divclass= "Col-xs-4">                <H2class= "Page-header">Area One</H2>                <P>Bootstrap have a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</P>            </Div>            <Divclass= "Col-xs-4">                <H2class= "Page-header">Region II</H2>                <P>If you work with Bootstrap's uncompiled source code, you need to compile the less files to produce usable CSS files. For compiling less files to CSS, we only officially the recess, which is Twitter's CSS hinter based on Less.js.</P>            </Div>            <Divclass= "Col-xs-4">                <H2class= "Page-header">Area Three</H2>                <P>Within the download you ' ll find the following directories and files, logically grouping common resources and providing bot H compiled and minified variations.</P>            </Div>        </Div>    </Div>

Three:

. col-xs-	Ultra small screen phone	None (Auto)
. col-sm-	Small screen tablet	750px
. col-md-	Mid-screen desktop display	970px
. col-lg-	Large screen large desktop display	1170px

. col-xs when the screen becomes an hour, it is always the state of the vertical column

The rest is changed to a horizontal state when it is less than the rightmost value.

<Divclass= "Row">  <Divclass= "col-xs-12 col-sm-6 col-md-8">. col-xs-12. col-sm-6. col-md-8</Div>  <Divclass= "Col-xs-6 col-md-4">. col-xs-6. col-md-4</Div></Div><Divclass= "Row">  <Divclass= "Col-xs-6 col-sm-4">. col-xs-6. col-sm-4</Div>  <Divclass= "Col-xs-6 col-sm-4">. col-xs-6. col-sm-4</Div>  <!--Optional:clear the XS cols if their content doesn ' t match in height -  <Divclass= "Clearfix visible-xs-block"></Div>  <Divclass= "Col-xs-6 col-sm-4">. col-xs-6. col-sm-4</Div></Div>

Need clear when height is inconsistent

<Divclass= "Row">  <Divclass= "Col-xs-6 col-sm-3">. col-xs-6. col-sm-3</Div>  <Divclass= "Col-xs-6 col-sm-3">. col-xs-6. col-sm-3</Div>  <!--ADD the extra clearfix for only the required viewport -  <Divclass= "Clearfix visible-xs-block"></Div>  <Divclass= "Col-xs-6 col-sm-3">. col-xs-6. col-sm-3</Div>  <Divclass= "Col-xs-6 col-sm-3">. col-xs-6. col-sm-3</Div></Div

IV: Flow layout container

Modify the outermost layout element .container to make .container-fluid it possible to convert a fixed-width raster layout to a 100%-width layout

<class= "Container-fluid">  <class  = "Row">   ... </ Div > </ Div >

Five: Column offset

Use .col-md-offset-* a class to offset a column to the right. These classes actually * add the left margin (margin) to the current element by using the selector. For example, .col-md-offset-4 .col-md-4 a class offsets an element to the right by a width of 4 columns (column).

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

Six: Nested columns

In order to use the built-in raster system to nest content again, you can add a new .row element and a series of .col-sm-* elements to an already existing .col-sm-* element. The number of columns (column) contained in a nested row cannot exceed 12 (in fact, you do not need to fill 12 columns).

<Divclass= "Row">  <Divclass= "Col-sm-9">Level 1:. col-sm-9<Divclass= "Row">      <Divclass= "Col-xs-8 col-sm-6">Level 2:. col-xs-8. col-sm-6</Div>      <Divclass= "Col-xs-4 col-sm-6">Level 2:. col-xs-4. col-sm-6</Div>    </Div>  </Div></Div>

Seven: Column sorting

By using the .col-md-push-* and .col-md-pull-* classes, you can easily change the order of columns (column).

Push (push) right (pull) left

<Divclass= "Row">  <Divclass= "Col-md-9 col-md-push-3">. col-md-9. col-md-push-3</Div>  <Divclass= "Col-md-3 col-md-pull-9">. col-md-3. col-md-pull-9</Div></Div>