Bootstrap page layout 3-BS Layout

1,

<H1 class = 'page-head'> layout <small> use the bootstrap grid system to layout webpages </small>

Get:

　　　　　　　　

2. Add a container to the required element so that it is displayed in the center.

<Div class = 'Container'>

<H1 class = 'page-head'> layout <small> use the bootstrap grid system to layout webpages </small>

</Div>

Expected result: If you need more accurate results, set border for the above Div to check whether the. iner container centers the elements in the center.

　　　　　　　　

3. Set 3 text segments to display the three segments in the same line.

<Div class = 'Container'>

<H1> layout <small> Bootstrap layout </small>

<H2> column 1 </H2>

<P> section 1 </P>

<H2> Column 2 </H2>

<P> section 2 </P>

<H2> column 3 </H2>

<P> section 3 </P>

</Div>

The above labels are displayed.

　　　　　　

　

First, understand the BS raster system:Http://wrongwaycn.github.io/bootstrap/docs/scaffolding.html

<Div class = 'Container'>

<H1> layout <small> Bootstrap layout </small>

　　　　<! -- Enclose a class position 'row' Div outside the element to be adjusted -->

　　　　<Div class = 'row'>

<Div class = 'span4'>

<H2> column 1 </H2>

<P> section 1 </P>

　　　　　　</Div>

　　　　　　<Div class = 'span4'>

<H2> Column 2 </H2>

<P> section 2 </P>

　　　　　　</Div>

　　　　　　<Div class = 'span4'>

<H2> column 3 </H2>

<P> section 3 </P>

　　　　　　</Div>

　　　　</Div>

</Div>

Note: ViewClass = 'span4 ',In this example, the three paragraphs "column 1", "column 2", and "column 3" are displayed in one row, first, enclose a div and class = 'row' in the periphery of the three elements, and then set a proper value for each "column, class in spann, which is surrounded by the perimeter of each section, N, but n + N + n = 12 must be ensured. Here, 4 + 4 + 4 = 12;

Effect (divide the layout of each topic into four parts equally, so you can set the class = 'span4' according to your needs or preferences, but make sure you are in a row, the sum of N in all specified spann values is 12;

　　　　　　

 

Fixed layout: The layout will not change as the browser window size changes

The class used in the application is the class = 'Container' and class = 'row'

Flow layout: The layout will change with the size of the browser window

If it is applied to class, it should be class = 'iner iner-fluid', class = 'row-fluid'