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.rowAnd.col-xs-4This 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 ColumnspaddingAttribute to create the gap (gutter) between columns ). Pass.rowElement setting negative valuemarginTo offset.containerElementpaddingIs 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
