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'