bootstrap3-Grid System 网格系统

以下是bootstrap2.x中网格的说明，bootstrap3.0版本有不同的地方。

只是为了理解bootstrap网格基本概念。

 

Explaining it in a simple way, in web design, we create rows and columns using HTML and CSS to achieve a grid. And columns contain the actual content.

Bootstrap基于HTML和CSS创建行和列来实现网格，具体内容放到各列中进行展现。

 

Twitter Bootstrap offers two types of Grids.

提供2种类型的网格：

默认网格940px，12列；通过样式设置可以让其支持724px和1170px的布局。

The default Grid System is 940px wide and 12 column.

You can add the responsive stylesheet to it and then it will become adaptable to 724px and 1170px wide with respect to the viewport it is rendered on.

流式布局网格，基于百分比，与默认网格一样，可以进行扩展，以支持不同屏幕大小的设备。

There is also a fluid grid system.

This is a percentage based one instead of pixel based.

And can be extended to the responsiveness same as the default fixed grid.

 

Bootstrap uses CSS class "row" for creating horizontal rows and CSS class "spanx" (where value of x is 1 through 12) for creating vertical columns.

通过class="row"创建行，class="spanx"创建列

 

1.如何通过网格创建行与列

2.添加响应式布局（自动与屏幕大小适应，对页面进行调整，以达到最佳显示效果）

3.对列设置偏移量（偏移量也要与其它列一起计算总数不超过12列）

4.网格嵌套（被嵌套的列数不能超过父列所占的列数）

 Following is a summary of what we have discussed in this tutorial:

• Twitter Bootstrap's default grid sytem is 940px wide and can hold 12 columns.
• 默认网格系统的配置：940px，网格分为12列
• In the Grid, rows are created with 'class="row"' and columns are created with 'class="spanx"', where x is a positive integer. Sum of x for all columns used must not exceed 12.
• 通过class="row"创建行，class="spanx"创建列，所有列的x之和不能超过12
• By adding responsive css of Bootstrap, you can add responsive features to the deafult grid.
• 可以添加响应式功能到默认网格系统中
• You can use offsets to create additional space to a column. For doing that 'class="offsetx"' is used, where x is a positive integer.if you are using offsets, then total number of columns, including number of offsets used, can not exceed 11.
• 通过class="offsetx"可以为一列额外空出区域，总的列数（包括偏移列）不超过11？
• Columns can be nested. If nested columns are used, while counting total number of columns in the grid (in a row directly under container), nested columns are also counted with columns up in the hierarchy.
• 列可以嵌套，在计算网格列总数时，被嵌套列也要一起计算，即遵守总列数<12的规定
• Offsetting can be performed on nested columns also.
• 偏移属性同样可以使用在嵌套网格中