【第二章】WEB前端框架-Foundation之网格系统

在上一篇文章里，我们讲到“WEB前端框架-Foundation之入门篇”，大家应该对Foundation有了一定的了解了，那让我们接着讲吧，这节主要讲“Foundation之网格系统”。

Foundation是一个以移动优先的流行框架。意味着将会加载最少的代码量和减少成本可致使页面渲染速度更快。与一些前端框架一样，Foundation是完全支持响应式的。但不同的是，它只需要用到一个断点即可支持架构的改变。这断点定义viewport的宽度为768px宽。

实际上，这个网格系统本身有3个部分：电脑端网格，移动端网格和块网格。由于Foundation是以移动优先的前端框架，那就从移动端网格开始吧。

如果您刚接触它，请您先看“WEB前端框架-Foundation之入门篇”。

在Foundation网格系统中我们只使用一个主要断点，实现768px宽度的布局。

小型网格

上面代码列出了3个重要的class：第一个class为row（行）,是用来包含列数，就好像由许多列如细胞一般地排列在一行当中。在这个演示中，我们使用到12列网格，默认12是一行当中能有列数的最大值。如果你需要更多列数，Foundation允许你在自定义界面中设置最多为16列。

第二个class是small-12，改变里面的数字就可以定义该列的宽度。small-12只是定义宽度而已，还没有定义该列的存在，因此还需要第三个class为columns。这3个class都是网格系统的基础class。

简单地说，上面的5行代码形成一个由12列组成的，占满父窗口宽度。里面12列所展示的就是我们的内容。让我们使用更复杂的代码来进一步说明。

在上面的例子当中，我们可以看到有两个div包含类名columns，还有搭配另一个class(如：small-4)来定义该列的宽度。Foundation定义这些列在同一个父容器内来保证这些列是在同一层的，占满父容器宽度的。这两大列分别占据了4个（单位）列和8个（单位）列的宽度。刚好占满12个（单位）列，用百分比来说明就是分别占父容器宽度的33.3% 和66.6%。

这也重要地说明：这些div块是可以无限地内嵌套的，因此大大地提高灵活性。见下面代码例子：

可以看到这个sidebar例子用了row（行）内嵌套在column(列)里面，再嵌套column(列)，在第二个row里面嵌套了3列，分别宽度为small-1、small-9和small-2。是不是很方便实现？呵，我们是时候编写些Demo来实践体会一下，享受Foundation带来的方便。

大网格

上面的例子中给每一列额外添加一个class，分别为large-3和large-9,作用就是当网页在大屏幕上浏览时，就会把sidebar原来的33.3%宽扩展为large-3，也就相当于25%(3/12=0.25)父容器宽。内容空间也会随之扩展的。这是个简单方法，但对于适应不同浏览窗口来说，组织自己的内容布局是非常有帮助的。 接下来我们可以使用class为large-centered和small-centered快速地使某列内容居中，但是前提是某行中只有一列。如果有多列呢，又怎么办？我们就可以使用class为push和pull来控制列的位置了。

在此例子中，第二个div本来应该显示在第一个div之后，但现在被pull（拉出到）前面显示，而第一个div却被push（推进到）后面显示。因此当在大屏幕下就可以左边显示列表，右边就显示主要内容，当屏幕变小的时候，内容就会自动地显示在列表下面。

块网格

讲了以上两种网格系统，接下来要讲的是块网格，块网格是在不管屏幕的大小，使得列表元素都可以均匀的分布。特别是对块状的内容来说更为理想，并不要求正确地显示多少行或者多少列。如果你想在电脑端网页和移动端页面上显示相同的布局，你只需要使用以 small-block-grid-为前缀的class。

这也像前面谈到的网格一样。你只需要使用一个small-12来代替small-12和large-12。很容易吧。

总得来说，以上3种网格系统都是Foundation提供的，记住一点就是，从小网格到大网格只改变一次，使用小型网格目标运用在小型设备上，而大型网格则运用在电脑或者更大的屏幕。

Orbit插件

为了更震感的效果，接下来要介绍的是Foundation的一个非常有用的插件：Orbit。

这个方便的插件可以当作滑动门来使用， 可以将图片、video甚至普通的html内容做成滑动效果。用法是使用简单的标记，很容易掌握运用，当使用得当时，效果就会变得无比震撼。

Orbit用到一个列表架构，每个列表项目都当作为一个滑动片。上面代码中可以看到，除了img标签外，还有一个div包含一个class为orbit-caption，作用是可以为每张图片添加一个标题。Orbit还提供显示分页、（左右）控制器甚至（滑动间隔）时间器。

看下面你可以在Orbit中改变参数的例子：

这些参数包含了滑动速度、分页和有选择地在小屏幕上堆栈。值得注意的是，这些参数是需要通过初始化才起作用的，因此你要使用放在body底部的$(document).foundation()标准使用代码：

然后加上Orbit的选择参数：

到目前为止，你就可以使用Orbit的效果了，还有更多的选择（参数）可以Foundation官方文档上查看。

备注：Foundation可以分开下载选择的js文件，要记得把这些文件都放到body的底部，以加快页面渲染速度，如果你更喜欢一个压缩后的js文件的话，那也可以只引入一个js文件。

script src="js/foundation.min.js">

总结

你想不想下载Foundation玩玩呢？或者是想在一个干净的环境来测试你的想法？那就是点击jsfiddle。将可以用上最新版本的Foundation和包含所有的组件。

好啦，今天先讲到这里了，在本文章当中讲解了Foundation的3大基础网格系统，简单介绍了Orbit插件。那么在下一篇文章将学习导航栏和部分插件，伴随着一些有用的工具……期待吧~！