Foundation CSS 是由 ZURB 基金会于 2011 年 9 月构建的一个开源且响应式的前端框架，它让我们能够轻松设计出外观精美、适配任何设备且易于访问的响应式网站、应用程序和电子邮件。目前，包括 Facebook、eBay、Mozilla、Adobe 甚至迪士尼在内的许多公司都在使用它。该框架像 Bootstrap 一样构建在 Saas 之上，但它更加精致、灵活且易于定制。它还随附了 CLI，因此我们可以轻松地将其与模块打包工具结合使用。此外，它还提供了 Fastclick.js 工具，以实现移动设备上的更快的渲染速度。
Forms（表单） 允许用户在网页上输入数据，这些数据随后会被发送到服务器进行处理。表单的形式既可以像纸质表格，也可以像数据库表单，它允许用户填写各种类型的输入字段，例如文本类型、密码类型、数字类型、电子邮件类型，或者可能是其他一些类型的输入。通常，当我们希望从用户那里收集数据时，就会使用表单。例如，用户想在线购买一个包，他/她必须首先在地址表单中输入他们的送货地址，然后在付款表单中添加他们的付款详情以完成下单。
使用的变量：
描述
默认值
—
—
该变量用于定义自定义字段集周围的默认边框。
1px solid $medium-gray
该变量用于定义自定义字段集内部的默认内边距。
rem-calc(20)
该变量用于定义自定义字段集周围的默认外边距。
rem-calc(18 0)
该变量用于定义图例文本与字段集边框之间的默认内边距。
rem-calc(0 3)
该变量用于定义表单元素的全局间距。
rem-calc(16)
该变量用于定义帮助文本的默认颜色。
$black
该变量用于定义帮助文本的默认字体大小。
rem-calc(13)
该变量用于定义帮助文本的默认字体样式。
italic
该变量用于定义输入框前缀标签的颜色。
$black
该变量用于定义输入框前缀标签的背景颜色。
$light-gray
该变量用于定义输入框前缀标签周围的边框。
1px solid $medium-gray
该变量用于定义前缀/后缀输入标签的左/右内边距。
1rem
该变量用于定义表单标签的颜色。
$black
该变量用于定义表单标签的字体大小。
rem-calc(14)
该变量用于定义表单标签的字体粗细。
$global-weight-normal
该变量用于定义表单标签的行高。
1.8
该变量用于定义选择菜单的背景颜色。
$white
该变量用于定义选择菜单内部下拉三角形的颜色。
$dark-gray
该变量用于定义选择菜单的默认圆角。
$global-radius
该变量用于定义文本输入框的字体颜色。
$black
该变量用于定义文本输入框内占位符文本的字体颜色。
$medium-gray
该变量用于定义文本输入框的字体族。
inherit
该变量用于定义文本输入框的字体大小。
rem-calc(16)
该变量用于定义文本输入框的字体粗细。
$global-weight-normal
该变量用于定义文本输入框的行高。
$global-lineheight
该变量用于定义文本输入框的背景颜色。
$white
该变量用于定义获得焦点的文本输入框的背景颜色。
$white
该变量用于定义被禁用的文本输入框的背景颜色。
$light-gray
该变量用于定义文本输入框周围的边框。
1px solid $medium-gray
该变量用于定义获得焦点的文本输入框周围的边框。
1px solid $dark-gray
该变量用于定义文本输入框的内边距。