bootstrap栅格系统的示例分析-创新互联

相关推荐：《bootstrap入门教程》

2、列偏移

有时候我们不想让两个相邻的列挨在一起，这时候利用栅格系统的列偏移（offset）功能来实现，而不必再定义 margin 值。对于中等屏幕，可以使用 .col-md-offset-* 形式的样式将列偏移到右侧。

例如，.col-md-offset-2 的意思是将元素向右移动了两个列的宽度。

　 　　　　                            .col-md-4                .col-md-4 .col-md-offset-4                                        .col-md-3 .col-md-offset-3                .col-md-3 .col-md-offset-3                                        .col-md-6 .col-md-offset-3            　　　　

3、列嵌套

栅格系统也支持列嵌套，即在一个列里再声明一个或多个行（row），但是要注意，内部所嵌套的 row 的宽度为 100% 时，就是当前外部列的宽度。被嵌套的行（row）所包含的列（column）的个数不能超过12。

                                                                Level 1：col-md-8                                                                Level 2：col-md-6                        Level 2：col-md-6                                                                                     Level 3：col-md-3                          Level 3：col-md-6                                                     Level 1：col-md-4                    

说明：可以看到，在第一个列(col-md-8)里面，嵌套了一个新行(row)，然后在新行里，又放置了两个等宽的(col-md-6)列，并且两个 col-md-6 加起来是12，但是总宽度和外面的 col-md-8 列的宽度一样，也就是说在  row 里的列宽度是按照百分比分配的。在任何一个嵌套列里，不管宽度是多少，都可以再进行 12 等分，并可以进一步组合。

4、列排序

列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过 .col-md-push-* 和 .col-md-pull-* 来实现这一目的。

　　　                                　　.col-md-9 .col-md-push-3            　　.col-md-3 .col-md-pull-9        　　        

说明：默认情况下，col-md-9 在左边，col-md-3 在右边，如果要互换位置，需要将 col-md-9 列向右移动三个列的距离，也就是推三个列的 offset，样式用 col-md-push-3；而 col-md-3 需要向左移动，也就是拉九个 offset，样式用 col-md-pull-9。

响应式栅格

我们都知道，Bootstrap 可以制作响应式页面。它能为不同屏幕尺寸提供不同栅格样式。在前面的例子中，我们一直都在使用中等屏幕(md)，既然是响应式页面，当然还应该包括超小屏幕(xs)、小型屏幕(sm)、大屏幕(lg)等。

Bootstrap 栅格参数

说明：通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

关于“bootstrap栅格系统的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。