Raster System
Bootstrap provides a responsive, mobile device-first streaming raster system. With the increase of the screen or viewport size, the system automatically dividesUp to 12 Columns. It contains easy-to-use predefined classes and powerful Mixin for generating more semantic la S.
The raster system is used to create a page layout by combining a series of rows and columns. Your content can be placed in the created layout. How the bootstrap raster system works:
1. Rows must be included in.container
(Fixed width) or.container-fluid
(100% in width) to give it an appropriate arrangement (aligment) and inner padding (padding ).
2. Create a group of columns in the horizontal direction using rows ).
3. The content should be placed in the column, and only the column can be used as a direct sub-element of the row.
4. Similar.row
And.col-xs-4
This predefined class can be used to quickly create a grid layout. The Mixin defined in Bootstrap source code can also be used to create semantic la S.
5. Set Columnspadding
Attribute to create the gap (gutter) between columns ). Pass.row
Element setting negative valuemargin
To offset.container
Elementpadding
Is indirectly offset by the column contained in the row.padding
.
6. If a row contains more than 12 columns, the elements of the extra columns will be arranged as a whole in another row.
Sample Code
Example 1:
<! Doctype HTML> <HTML lang = "ZH-CN">
Is:
Use Bootstrap's pre-defined class to change it to one row and three columns. The code is:
<! Doctype HTML> <HTML lang = "ZH-CN">
Note that the. col-xs-4 here refers to the four grids, not the columns (12 more grids)Is:
Raster System for bootstrap learning notes