Bootstrap 3.0网格说明 [英] Bootstrap 3.0 Grid Explanation

问题描述

有人可以解释Bootstrap 3.0 Grid系统。我一直在使用Bootstrap v2网格，它具有简单的span1跨度为12的列。现在Bootstrap 3.0具有不同类型的列大小，例如.col- .col-sm- .col-lg -

我发现这个例子： http://examples.getbootstrap.com/grid/index.html ，但它有很多不同的方式，比如我可以不明白.col-12 .col-lg-8在一起的Mixed：mobile and desktop网格。

我希望将我的Bootstrap v2网站迁移到Bootstrap v3，但发现这些变化太多。

请解释。

编辑：
还有这篇不错的文章解释了Bootstrap 3 Grid（这篇文章来自于我在这里问了我的问题，希望它对未来的读者有所帮助）： http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/

解决方案

它的基本要点是.col类的不同迭代允许你指定y网格行为适用于不同设备（手机，平板电脑，台式机）。因此，在示例中，您询问 .col-lg-8 指定div在桌面上占用8列，而 .col- 12 指定div应占用移动设备上的12列（整行）。这种特异性使您可以精确地控制内容在不同屏幕尺寸上的布局方式，而Bootstrap 2并不那么简单。

通常我已经找到了理解这些实际意义的最好方法，即在不同的设备类型上调出示例页面，或重新调整浏览器窗口的大小并简单比较结果。

另外，正如您对问题的评论所述，从Bootstrap 2迁移到3并不一定是目标。您可以尝试将现有的 .span * 类更新为新的 .col - * 类，但在那里还有其他一些考虑因素，比如你的现有项目是固定宽度还是流体，这会导致问题。除了网格布局之外，还有许多其他更改可能会给您带来问题。

Can someone explain Bootstrap 3.0 Grid system. I have been using Bootstrap v2 grid which had simple span1 to span12 for columns. Now Bootstrap 3.0 has different types of columns sizes like .col- .col-sm- .col-lg-

I found this example: http://examples.getbootstrap.com/grid/index.html, but It has many different ways, like I could not understand the "Mixed: mobile and desktop" grid where .col-12 .col-lg-8 are together.

I hope to migrate my Bootstrap v2 website to Bootstrap v3, but finding these changes too much.

Please explain.

EDIT: Also got this nice article explaining Bootstrap 3 Grid (this article came after I asked my question here. Hope it helps future readers): http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/

解决方案

The basic gist of it is that the different iterations of the .col class allow you to specify grid behavior for different devices (phones, tablets, desktops). So, in the example you are asking about the .col-lg-8 specifies that the div should take up 8 columns on desktop while .col-12 specifies that the div should take up 12 columns (the entire row) on a mobile device. This level of specificity gives you precise control over how your content will be laid out on different screen sizes in a way that was not as straightforward with Bootstrap 2.

In general I've found the best way to understand what these mean in practice is to bring up the example pages on the different device types or re-size your browser window and simply compare the results.

Also, as stated in the comments to your question the idea of migrating from Bootstrap 2 to 3 is not necessarily the goal. You can attempt to do it by updating your existing .span* classes to the new .col-* classes but there are other considerations like whether your existing project is fixed width or fluid that can cause problems with this. There are many other changes between the two versions outside of grid layout that could give you problems as well.

这篇关于Bootstrap 3.0网格说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！