这两个框架都提供了额外的类让你能够非常灵活的定义它们的网格。

可见的类可以让你在特定大小的屏幕上选择显示或者隐藏内容。偏移类允许你让不完整的列居中或者调整它们之间的间距。当然还有其他的类可以根据不同设备来指定列的顺序。

比较五：网格块

除了默认网格，Foundation还支持另一个栅格特征，即网格块。它允许你使用最小的标记来创建同等大小的列。为了使用它，把行定义成ul元素，行里面的列定义成li元素。然后通过对ul元素应用相关的类（详见上面的第二张表）来指定列的大小。

这个时候你可能会想，规则网格和网格块之间的区别是什么？让我们简要的看一看它们的两点不同之处：

与默认的网格不同，（网格块）每行都应用了最大宽度，所以总是铺满整个浏览器窗口。

网格块只能用在大小相等的项目中。

使用网格

既然我们对这两个框架的网格已经有了很好的理解，让我们来看看我们怎样才能够使用它们来建立一个Bootstrap页面和相应的Foundation页面。

下面的截屏显示了我们将要建立的第一个布局：

先从Bootstrap开始，我们定义了一个带有container类的元素。就像前面讨论的，这个类会根据屏幕的大小给这个元素设置了一个固定的宽度（详见Bootstrap的那个表）。然后，我们给它添加一个带有row这个类的元素。

现在，我们已经准备好设置我们的列了。对于大屏来说，我们想要4个大小一样的列。所以我们定义了4个每个都带有col-lg-3类的div元素。然而，对于中小型设备我们更倾向于每行里面有两个列。出于这个原因，我们使用col-sm-6这个类。最后，对于超小屏来说我们希望列可以堆叠起来。这是移动第一框架的默认行为，因此，这就没必要去定义col-xs-12这个类。

它的HTML是这样子的：

<div class="container">
 <div class="row">
 <div class="col-sm-6 col-lg-3">
  <!-- content -->
 </div>
 <div class="col-sm-6 col-lg-3">
  <!-- content -->
 </div>
 <div class="col-sm-6 col-lg-3">
  <!-- content -->
 </div>
 <div class="col-sm-6 col-lg-3">
  <!-- content -->
 </div>
 </div>
</div>

让我们继续来看看Foundation。

Foundation的网格和Bootstrap的网格很像，但是它得更简单一点。首先，我们得先定义一个带有row类的元素，这个元素将包含着我们的列。这个类把元素的max-width设为62.5rem（1000px）。下一步，我们添加列。为了达到这个目的，我们指定每个div元素都带有一个column或者columns的类，然后使用相应的栅格类（详见上面Foundation的表）来设置它们的宽度。同样的，对于小型设备来说我们不用定义small-12这个类。

这是基于Foundation栅格的HTML：

<div class="row">
 <div class="medium-6 large-3 columns">
 <!-- content -->
 </div>
 <div class="medium-6 large-3 columns">
 <!-- content -->
 </div>
 <div class="medium-6 large-3 columns">
 <!-- content -->
 </div>
 <div class="medium-6 large-3 columns">
 <!-- content -->
 </div>
</div>

此时此刻我想你已经开始对这两个框架的网格系统更熟悉了。但或许另外一个例子可以帮你了解的更清晰。

在下一个例子中，我们将构建footer。下面这个图示显示了我们想要的样式：

在这里，我们将选择一个不一样的布局来和之前的例子做比较。对于中屏及中屏以上的屏幕（或者在Bootstrap网格里小屏及小屏以上的屏幕），我们想要显示三个列。然而我们注意到，在最后一列里有一个嵌套行。这由两个列组成。我们将会在所有的设备中把它们的宽度设为行宽度的一半。最后，我们会调整在嵌套行里出现的图片的可视度。

这是Bootstrap中的代码：

<div class="container">
 <div class="row">
 <div class="col-sm-4">
 <!-- content -->
 </div>
 <div class="col-sm-4">
 <!-- content -->
 </div>
 <div class="col-sm-4">
 <div class="row">
 <div class="col-xs-6">
  <a href="#">
  <p>Let's meet and discuss</p>
  <i class="fa fa-map-marker fa-2x visible-lg"></i>
  </a>
 </div><!-- .col-xs-6 -->
 <div class="col-xs-6">
  <!-- content -->
 </div>
 </div><!-- .row -->
 </div><!-- .col-sm-4 -->
 </div><!-- .row -->
</div><!-- .container -->

这是Foundation的代码：

<div class="row">
 <div class="medium-4 columns">
 <!-- content -->
 </div>
 <div class="medium-4 columns">
 <!-- content -->
 </div>
 <div class="medium-4 columns">
 <ul class="small-block-grid-2">
  <li>
  <a href="#">
  <p>Let's meet and discuss</p>
  <i class="fa fa-map-marker fa-2x show-for-large-up"></i>
  </a>
  </li>
  <li>
  <!-- content -->
  </li>
 </ul>
 </div><!-- .medium-4 .columns -->
</div><!-- .row -->

注意：如果想要代替网格块，我们可以使用Foundation默认的网格来创建嵌套行。

结论

如果你想要更多Bootstrap栅格系统的相关信息，你可以去看看这篇文章： 《Bootstrap每天必学之栅格系统（布局）》

最后，在这篇文章里，我介绍了Bootstrap和Foundation的网格结构。然后我们在一个真实的项目中看到了要如何去利用它们的网格。正如你所看到的，所有的网格都是相类似的，都可以进一步的去定义它。

我希望你能喜欢这篇文章，也许你可以把你在这所学到的应用到你的项目中去，更多Bootstrap内容关注：《Bootstrap学习教程》，谢谢大家的阅读。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。