bootstrap~ Layout of pages

Bootstrap as a front-end plug-in that supports responsive layout, does play an important role, whether you are on the phone, tablet or PC Browsing Web page, can achieve a good result, all of this is bootstrap brought to us!

Today mainly the layout of the page, which is the most basic thing, when we design a site, we should design a Global Unified Specification page, this page we call it layout page, and on the page reflects the things, is the layout of the elements, in the bootstrap is certainly indispensable things.

The layout of bootstrap is a raster system, which consists of rows and columns that need to wrap a container for page content and raster systems when used .container .

A .container class of containers that are fixed-width and support responsive layouts.

<class= "container">  ... </ Div >

.container-fluidThe viewport class is used for containers with a width of 100% that occupy all viewports.

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

The rows and columns of a two-grid system, in Bootstrap, row and column use row and col, and a row of up to 12 column cells, col-md-1 represents the width of 1 cells, and col-md-7 represents the width of 7 cells. They add up to a maximum of 12 units

<Divclass= "Row">  <Divclass= "Col-md-1">. col-md-1</Div>  <Divclass= "Col-md-1">. col-md-1</Div>  <Divclass= "Col-md-1">. col-md-1</Div>  <Divclass= "Col-md-1">. col-md-1</Div>  <Divclass= "Col-md-1">. col-md-1</Div>  <Divclass= "Col-md-1">. col-md-1</Div>  <Divclass= "Col-md-1">. col-md-1</Div>  <Divclass= "Col-md-1">. col-md-1</Div>  <Divclass= "Col-md-1">. col-md-1</Div>  <Divclass= "Col-md-1">. col-md-1</Div>  <Divclass= "Col-md-1">. col-md-1</Div>  <Divclass= "Col-md-1">. col-md-1</Div></Div><Divclass= "Row">  <Divclass= "Col-md-8">. col-md-8</Div>  <Divclass= "Col-md-4">. col-md-4</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>

The second and third lines show a similar effect.

Three nested columns, which can also have columns, which we need to change MD to SM

<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>

The effect is similar to this

Today, this is mainly the basic knowledge of the general layout.

bootstrap~ Layout of pages