<div> <div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <!-- content --> </div> </div> </div>
让我们继续来看看Foundation。
Foundation的网格和Bootstrap的网格很像，但是它得更简单一点。首先，我们得先定义一个带有row类的元素，这个元素将包含着我们的列。这个类把元素的max-width设为62.5rem（1000px）。下一步，我们添加列。为了达到这个目的，我们指定每个div元素都带有一个column或者columns的类，然后使用相应的栅格类（详见上面Foundation的表）来设置它们的宽度。同样的，对于小型设备来说我们不用定义small-12这个类。
这是基于Foundation栅格的HTML：
<div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <!-- content --> </div> </div>
此时此刻我想你已经开始对这两个框架的网格系统更熟悉了。但或许另外一个例子可以帮你了解的更清晰。
在下一个例子中，我们将构建footer。下面这个图示显示了我们想要的样式：
在这里，我们将选择一个不一样的布局来和之前的例子做比较。对于中屏及中屏以上的屏幕（或者在Bootstrap网格里小屏及小屏以上的屏幕），我们想要显示三个列。然而我们注意到，在最后一列里有一个嵌套行。这由两个列组成。我们将会在所有的设备中把它们的宽度设为行宽度的一半。最后，我们会调整在嵌套行里出现的图片的可视度。
这是Bootstrap中的代码：
<div> <div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <div> <div> <a href="#"> <p>Let's meet and discuss</p> <i></i> </a> </div><!-- .col-xs-6 --> <div> <!-- content --> </div> </div><!-- .row --> </div><!-- .col-sm-4 --> </div><!-- .row --> </div><!-- .container -->
这是Foundation的代码：
<div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <ul> <li> <a href="#"> <p>Let's meet and discuss</p> <i></i> </a> </li> <li> <!-- content --> </li> </ul> </div><!-- .medium-4 .columns --> </div><!-- .row -->
注意：如果想要代替网格块，我们可以使用Foundation默认的网格来创建嵌套行。
结论
如果你想要更多Bootstrap栅格系统的相关信息，你可以去看看这篇文章： 《Bootstrap每天必学之栅格系统（布局）》
最后，在这篇文章里，我介绍了Bootstrap和Foundation的网格结构。然后我们在一个真实的项目中看到了要如何去利用它们的网格。正如你所看到的，所有的网格都是相类似的，都可以进一步的去定义它。
我希望你能喜欢这篇文章，也许你可以把你在这所学到的应用到你的项目中去，更多Bootstrap内容关注：《Bootstrap学习教程》，谢谢大家的阅读。
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：