1. Introduction
Grid System (Grid systems), also known as the "grid system", uses a fixed grid design layout, neat and concise style. Evolved from a planar grid system. The bootstrap is built on a 12-column grid system, layout, and components. rule-based grid arrays to guide and standardize layout and distribution of information in Web pages
The bootstrap incorporates a responsive, mobile-first streaming grid system that is automatically divided into up to 12 columns as the screen device or viewport (viewport) size increases. It contains easy-to-use pre-defined classe.
2. Design principle
http://ued.taobao.org/blog/2008/09/grid_systems/
3. Grid system in Web design
(1The default raster system bootstrap The default raster system to 12 columns, creating a 940px wide container that does not have the responsive layout feature enabled by default. If you add a responsive layout css file, the grid system automatically adjusts dynamically from 724px to 1170px depending on the width of the viewable window. In cases where the visual window is less than 767px wide, the columns will no longer be fixed and will be stacked in the vertical direction. Basic code<divclass="Row"> <divclass="Span4">...</div> <divclass="span8">...</div> </div>1column assignment for a simple two-column layout, create a. Row container and add the appropriate number of. span to the container.* Column can be. Since the default is 12 columns of rasters, all. span*The sum of the number of rasters spanned by the column is 12 (or equal to the number of rasters of its parent container). <divclass="Row"> <divclass="Span4">...</div> <divclass="span8">...</div> </div>The code above shows the. Span4 and. Span8 two columns, with two columns and a total of 12 rasters. 2The column offset moves the column to the right to use. Offset*class. Each class adds columns for the specified units to the left margin of the column. For example,. OFFSET4 moves the. Span4 to the right of the 4-column width. <divclass="Row"> <divclass="Span4">...</div> <divclass="span3 Offset2">...</div> </div>3nested columns in the default grid system, in the existing. Span* Add a new. Row inside and join the. span*column, you can implement nesting. The sum of columns in each column in the nested column is equal to the parent column. <divclass="Row"> <divclass="Span9"> Level1column<divclass="Row"> <divclass="span6">level2</div> <divclass="span3">level2</div> </div> </div> </div>(2streaming Raster System The flow raster system uses percentages instead of pixels for the width of each column. It has the same responsive layout as a fixed grid system, ensuring that it can make the right adjustments to different resolutions and devices. The base code replaces the. row with the. row-fluid can make any line "flow" up. The classes applied to each column do not have to be changed, so it is convenient to switch between streaming and fixed rasters. <divclass="Row-fluid"> <divclass="Span4">...</div> <divclass="span8">...</div> </div>1The offset is defined in the same way as the fixed grid system: Add to any column that you want to offset. Offset*can be. <divclass="Row-fluid"> <divclass="Span4">...</div> <divclass="Span4 Offset2">...</div> </div>2Nested and fixed rasters have a different nesting point: The total number of columns per row of fixed rasters equals the parent column. The sum of the number of columns nested in each row of the streaming layout is equal to 12. This is because the streaming raster uses percentages to set the width of each column. <divclass="Row-fluid"> <divclass="Span12">Fluid A<divclass="Row-fluid"> <divclass="span6">Fluid6<divclass="Row-fluid"> <divclass="span6">fluid6</div> <divclass="span6">fluid6</div> </div> </div> <divclass="span6">fluid6</div> </div> </div> </div>
4. Layout
（1The fixed layout provides a common, fixed-width (and can also become responsive) layout, with only<divclass="Container">can be. <body> <divclass="Container"> ... </div> </body>(2) Flow-through layout utilization<divclass="Container-fluid">The code can create a streaming, two-column page-well suited for application and document class pages. <divclass="Container-fluid"> <divclass="Row-fluid"> <divclass="span2"> <!--Sidebar content--> </div> <divclass="Span10"> <!--Body content--> </div> </div> </div>
5. Start-Up responsive design
Enable responsive CSS <meta name= "viewport by adding the appropriate meta tag to the " content="width=device-width, initial-scale=1.0"> <link href= "assets/css/bootstrap-responsive.css" rel="stylesheet" >
Bootstrap does not introduce a responsive feature by default, because it is not required in any case. We do not encourage developers to remove this feature, but to enable it when it is needed.
6. Device and screen resolution
Type layout width column width gap width large screen greater than or equal to 1200px 70px 30px default greater than or equal to 980px 60px 20px flat panel is equal to 768px 42px 20px phone to tablet less than equals 767px streaming column, no fixed width phone less than equals 480px flow column, no fixed width
[Bootstrap] grid system and layout
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
