Original Address: http://www.work100.net/training/monolithic-frameworks-bootstrap-grid-system.html
More Tutorials: beam cloud - free course

Grid System

No.	Article section	video
1	Outline	-
2	What is Grid (Grid)	-
3	What is the Bootstrap grid system	-
4	working principle	-
5	Grid Options	-

Please refer above 章节导航to read

1 Overview

Bootstrap provides a responsive, mobile device priority streaming grid system, with the increase of the screen or viewport (the viewport) size, the system will automatically be divided into a maximum of 12.

2. What is the Grid (Grid)

In the graphic design, the grid is a series of straight intersecting for organizing content (vertical, horizontal) structures (usually two-dimensional). It is widely used in the design layout and content structure print design. In web design, it is a used to quickly create a consistent layout and method effectively using HTML and CSS.

Simply put, web design grid for organizing content, make your site easy to navigate, and reduce the load on the user side.

3. What is the Bootstrap grid system

Bootstrap official description of the document grid system:

Bootstrap contains a priority responsive mobile device, not fixed grid system, apparatus, or may increase the size of the viewport appropriately extended to 12. It includes predefined classes for easy layout options, also includes powerful features for generating more semantic layouts mixed classes.

Let us understand how the above statement. Bootstrap is a priority of the mobile device, in this sense, the code Bootstrap small screen devices (such as mobile, tablet) and then extended to large screen devices (such as laptops, desktop computers) on the component and the grid.

Mobile-first strategy

content
- Decide what is most important
- layout
Priority design smaller width
- CSS-based mobile devices is a priority, media queries are directed to tablet computers, desktop computers
- Progressive Enhancement
With the increase in screen size and adding elements

Responsive grid system increases as the screen or viewport (the viewport) size, the system will automatically be divided into a maximum of 12.

4. Works

A grid system to create page layouts through a series of rows and columns containing content. Listed below are the Bootstrap grid system is how it works:

Row must be placed in .containerthe class, in order to obtain proper alignment (Alignment) and padding (padding).
Use lines to create horizontal group of columns.
Content should be placed within the column, and the column can only be a direct child of the line.
Predefined grid classes, such as .rowand .col-xs-4, can be used to quickly create a grid layout. LESS mixing can be used to more semantic class layout.
Column to create a gap between the column contents by padding (padding). This is achieved by padding .rowsoutside the pitch (margin) taking the negative, and the last row and first column represents an offset.
Grid systems are created by specifying twelve available across the columns you want. For example, to create three equal columns, use three .col-xs-4.

5. Grid Options

The following table summarizes the Bootstrap grid system how to work across multiple devices:

Expression	Ultra-small mobile phone devices (<768px)	Small devices tablet (≥768px)	Medium-sized desktop computer equipment (≥992px)	Large equipment desktop computers (≥1200px)
Grid behavior	It has been the level of	Begins to collapse, the breakpoint level is above	Begins to collapse, the breakpoint level is above	Begins to collapse, the breakpoint level is above
The maximum width of the vessel	None (auto)	750px	970px	1170px
Class Prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
And the number of columns	12	12	12	12
The maximum column width	Auto	60px	78px	95px
Gap width	30px (on each side of a column respectively 15px)	30px (on each side of a column respectively 15px)	30px (on each side of a column respectively 15px)	30px (on each side of a column respectively 15px)
Nestable	Yes	Yes	Yes	Yes
Offset	Yes	Yes	Yes	Yes
Column sorting	Yes	Yes	Yes	Yes

The basic grid structure

Below is the basic structure Bootstrap grid:

<div class="container" style="border: 1px solid green;">
    <div class="row">
        <div class="col-md-6" style="border: 1px solid red;">左</div>
        <div class="col-md-6" style="border: 1px solid red;">右</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="border: 1px solid blue;">左</div>
        <div class="col-md-6" style="border: 1px solid blue;">右</div>
    </div>
</div>

Operating results are as follows: