[Bootstrap] grid system and layout

Source: Internet
Author: User

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


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

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.