Bootstrap和Foundation是我最喜欢的两个前端框架，尤其是在快速开发网站的原型上。它们都提供了随时可用的组件，加快了我的工作流程。除了一些细小差别，在我看来它们大部分的基本特征都是类似。在这篇文章里，我将介绍它们网格的基本构造。首先，我将会向你展示它们是如何构建的，描述它们的主要部件，以及它们对不同屏幕的大小表现出的差异。然后，我将通过一个真实例子的实践来帮助你增添知识。

在我之前的一篇文章里，我比较了一下Foundation 5 和 Bootstrap 3的栅格系统。然而这一次，我将继续深入到Foundation的基础栅格结构。这就是说，我将给你展示如何利用它预建立的Sass mixins来做出更多语义化栅格。为了说明它，我将重建上述文章中的demo页面。首先，请先让我介绍一下在这篇文章将要使用到的项目。

在本教程我们将学习包含在Foundation前端框架中的灵活的Sass样式以及能够用来做些什么。Sass比CSS版本提供更多自定义特性集合，再加上有快捷方式可以简单又快速地运用在样式项目上，例如顶部工具栏。

如果你需要搭建起Sass的Foundation开发环境，可以参考文章“使用Sass和Compass配置Foundation”（参见上篇译文：初学者学习foundation：使用sass和compass来搭建foundation开发环境）或者是Zurb官方文档。你可以通过在控制台输入命令行方式来搭建环境，然后使用Compass和Bourbon（一个简单却轻量级混合Sass库），或者只是从Github上下载单独Sass文件，然后放置这些文件在你的工程上，然后通过“import”来引用需要的文件。

总的来说，使用Sass是一种很好地加速前端开发的途径，在我的每一个项目中都会使用它。Sass(跟其他预编译器一样)是允许嵌套样式、函数编程和支持混合的。Foundation到目前为止出了几个版本，之前我们都是在使用最常见的HTML/CSS版本，现在我们将讨论如何使用Sass来创建一个版本。Foundation开发团队不但只是使用Sass来开发更加友好和动态的样式，而且还提供更多定制样式在Sass版本上而不是把HTML/CSS版本上。Sass更加适合一些这样的人，就拿我来说，设计第一，编码第二。学习HTML和CSS是很简单的，并且能够很快地实现你想要的效果，但是，要从这些学习衔接到更加高级的jQuery和JavaScript却是很困难的。前面提到，使用Sass允许你使用函数编程、支持变量和重用代码，就像使用高级的、动态语言一样。

在这一部分我们将学习一种样式不定的插件Magellan，这插件可以为你的网站创建出如粘性的导航栏。还会学习可见性class,从右到左的支持、按键、缩略图、灵活的视频功能和zepto的来龙去脉。我将详细解释用到的例子，并且讲解如何更好地在你的项目中实现这些特性。

在此章节中，会涉及到Foundation前端框架大部分内容知识，而且我们依然还需要继续学习下去。现在，让我们来看看一些可以让你在项目快速实现的特性。先从Magellan插件开始，这个插件的主要作用就是添加、创建粘性的导航条（何为粘性？就如当你滚动网页时，一旦要抵触到导航条指定位置，该导航条就站在页面某个位置，一般在页面顶部，状态就如。）

让我们继续为基于Foundation的项目添加更多的功能，如将学习Joyride插件，该插件帮助引导用户来使用你的站点；还会学习价格表格、标准表格和交换功能：一种新奇响应式图片工具。我们通过一些模版示例，你还可以下载源码来学习如何实现这些特性的。

让我们继续学习如何使用其他Foundation技术组件，如进度条、提醒框、提示工具和mega下拉功能，也看看Zurb如何应用在网站上的。我们将添加所有这些组件到上一篇教程的“自定义表单和开关”演示代码中，并且使用一个定制的jQuery，因此你会更加理解这些元素怎样才能运行在自己的工程上的，让我们开始吧！

上节主要学习了Zurb Foundation的按钮制作，现在让我们看看自定义表单和表单开关制作。在本教程中我们主要以联系表单作为一个练习，您可以添加到您的项目或者只是拿来玩玩。一旦我们创建了这样的表单，我们将来可以直接搬到项目表单中使用。

按钮在Web是非常的常见，也是Web页面中重之重的组件。在实际制作中可以运用不同的标签，但对于样式方面，其实也差不多。在Bootstrap提供一套成熟稳定的按钮组件，同样，在Foundation框架中同样为Web开发者提供了类似Bootstrap的一套按钮组件，包括单个按钮、群组按钮、下拉按钮等等。在Foundation框架系列教程中，今天主要向大家介绍Foundation中的按钮使用。

Zurb开发的第4版本Foundation（简称为Foundation 4）使得顶部工具栏表现为非常突出，出色的顶部工具栏差不多成为一个由Foundation搭建起来网站的象征元素。今天我们将学习如何通过不同方式去实现它，把它放置在页面的其他地方，让你拥有自定义样式和响应式的水平导航菜单。