Bootstrap 3.0网格说明

Question

有人可以解释Bootstrap 3.0网格系统.我一直在使用Bootstrap v2网格,它具有简单的span1到span12的列.现在Bootstrap 3.0有不同类型的列大小,如.col- .col-sm- .col-lg-

我找到了这个例子:http://examples.getbootstrap.com/grid/index.html,但它有许多不同的方式,比如我无法理解"混合:移动和桌面"网格,其中.col-12 .col- lg-8在一起.

我希望将我的Bootstrap v2网站迁移到Bootstrap v3,但是发现这些更改太多了.

请解释.

编辑:还有这篇很好的文章解释Bootstrap 3网格(这篇文章是在我在这里提出我的问题之后发现的.希望它能帮助未来的读者):http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained /

Answer 1

在bootstrap 3中查看关于新Grid系统的这个优秀教程

http://www.helloerik.com/bootstrap-3-grid-introduction

Answer 2

它的基本要点是.col类的不同迭代允许您为不同的设备(手机,平板电脑,台式机)指定网格行为.因此,在示例中,您询问.col-lg-8指定div应占用桌面上的8列,同时.col-12指定div应占用移动设备上的12列(整行).这种特殊性使您能够以不同于Bootstrap 2的方式精确控制内容在不同屏幕尺寸上的布局方式.

总的来说,我发现了理解这些在实践中意味着什么是在不同设备类型上调出示例页面或重新调整浏览器窗口大小并简单比较结果的最佳方法.

此外,正如您的问题的评论中所述,从Bootstrap 2迁移到3的想法不一定是目标.您可以尝试通过将现有.span*类更新为新.col-*类来执行此操作,但还有其他注意事项,例如现有项目是固定宽度还是流量可能导致此问题.除了网格布局之外,两个版本之间还有许多其他更改,这些更改也可能会给您带来问题.