Raster System for bootstrap learning notes

Source: Internet
Author: User

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



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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.