Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。
Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。
Foundation 是一个以移动优先的流行框架。
本教程包含了上百个 Foundation 实例。
你可以直接使用我们的在线编辑器，并点击"提交运行"按钮查看结果：
点击"尝试一下"按钮查看在线实例。
以下效果为在 iframe 标签中的演示，可以点击"尝试一下"查看在线实例：
 | 什么是响应式网页设计？ 响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 |
|---|
你可以通过以下两种方式来获取 Foundation：
1、从官网下载最新版本：http://foundation.zurb.com/。
2、使用W3Cschool在线教程官网提供的CDN（推荐）：
<!-- css 文件 --><link rel="stylesheet" href="http://statics.51coolma.cn/assets/foundation-5.5.3/foundation.min.css"><!-- jQuery 库 --><script src="http://statics.51coolma.cn/assets/jquery/2.0.3/jquery.min.js"></script><!-- JavaScript 文件 --><script src="http://statics.51coolma.cn/assets/foundation-5.5.3/js/foundation.min.js"></script><!-- modernizr 文件 --><script src="http://statics.51coolma.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
本站静态 CDN 基于阿里云服务。
 | Foundation 使用 CDN 的优势: Foundation 使用 CDN 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性 为什么使用 modernizr? Some Foundation 的组件使用了比较前前沿的 HTML5 和 CSS3 特性，但不是所有浏览器都支持。 Modernizr 是一个用于检测用户浏览器HTML5和CSS3特性的 JavaScript库 - 让组件能在所有浏览器上正常运行。 |
|---|
1. 添加 HTML5 doctype
Foundation 使用 HTML 元素和 CSS 属性，所以需要添加 HTML5 doctype 文档类型声明。
同时我们可以设置文档的语言属性 lang 及字符编码：
2. Foundation 5 移动优先
Foundation 5 为移动设备的响应式设计。框架的核心是移动优先。
为了确保页面可自由缩放可以在 <head> 元素中添加以下 <meta> 标签:
3. 初始化组件
一些 Foundation 组件是基于 jQuery 开放的，如：模态框、下拉菜单等。你可以使用以下脚本来初始化组件：
如何创建一个基本的 foundation 页面:
<!DOCTYPE html><html><head> <title>Foundation Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- css 文件 --> <link rel="stylesheet" href="http://statics.51coolma.cn/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://statics.51coolma.cn/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://statics.51coolma.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://statics.51coolma.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script></head><body> <div class="row"> <div class="medium-12 columns"> <div class="panel"> <h1>Foundation 页面</h1> <p>重置窗口大小，查看效果！</p> <button type="button" class="button small">I Like It!</button> </div> </div></div><div class="row"> <div class="medium-4 columns"> <h3>Column 1</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> <div class="medium-4 columns"> <h3>Column 2</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> <div class="medium-4 columns"> <h3>Column 3</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div></div></body></html>
Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说，字体默认为 16px。对于大多数移动端浏览器来说，字体默认为 12px。默认的字体为 "Helvetica Neue"， line-height 默认为 1.5。
以上默认的设置均是针对 <body> 元素。
本章节我们将讨论 Foundation 的文字排列设计。
以下实例的真实样式请通过点击"尝试一下"按钮查看。
Foundation 渲染的 HTML 标题 (<h1> 到<h6>) 如下所示:
提示： 如果需要创建一个浅色的标题，可以在元素上添加 .subheader 类:
在 Foundation 中， HTML <small> 元素用于创建一个浅色的副标题：
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
Foundation <a> 元素的样式如下所示：
Foundation <abbr> 元素的样式如下所示：
Foundation <blockquote> 元素的样式如下所示：
Foundation <dl> 元素的样式如下所示：
Foundation <code> 元素的样式如下所示：
Foundation <kbd> 元素的样式如下所示：
Foundation <hr> 元素的样式如下所示：
Foundation 的 <table> 元素样式为灰色斑马条纹且包含四个边框：
使用 CSS 让表格支持响应式设计：在表格外添加 <div> 元素，样式为 overflow-x:hidden:
Foundation 提供了 6 种按钮样式。 .button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为： .secondary, .success, .info, .warning 或 .alert:
按钮类可以使用在 <a>, <button>, 或 <input> 元素:
 | 为什么将 a 标签的 href 设置为 # ? 当我们不希望链接点击跳转并得到 "404" 页面时，我们可以将 a 标签的 href 设置为 #。 |
|---|
我们可以使用 .large, .small 或 .tiny 类来设置按钮大小：
可以使用 .radius 和 .round 类来设置圆角按钮：
可以使用 .expand 类来设置按钮的宽带为 100%:
可以使用 .disabled 类来设置按钮不可点击:
Foundation 可以在同一行内创建一系列的按钮。
可以使用 <ul> 元素并添加 .button-group 类来创建按钮组：
垂直按钮组使用 .stack 类来创建。注意，按钮会跨越父元素的整个宽度:
.stack-for-small 类用于小尺寸的屏幕，按钮有水平排列变为垂直排列：
按钮组中使用 .radius 和 .round 类为按钮添加圆角效果：
.even-num 类用于在按钮组中均匀的分配按钮的宽度并跨越父元素 100% 宽度。
num 为按钮组中按钮的数量，从 1 到 8：
下拉菜单按钮可以让用户选取设定好的值：
.dropdown 类创建一个下拉菜单按钮。
使用带有 data-dropdown="id" 属性的按钮或链接打开下拉菜单。
id 值需要与下拉菜单的内容 (id01) 匹配。
在 <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。
最后初始化 Foundation JS。
我们也可以创建一个分割按钮的下拉菜单。只需要在按钮中添加 .split 类并使用 span 元素生成一个方向箭的按钮：
 | 提示:后面的教程中我们将学到更多关于下拉菜单是知识。 |
|---|
Foundation 提供了 283 个图标，你可以使用css来定义它的样式尺寸。
图标可用于文本，按钮，工具条，导航栏，表单等。
以下是 Foundation 图标的实例：
刷新按钮: 
检测图标: 
主页图标: 
创建图标语法格式如下:
<i class="fi-name"></i>
name 部分替换为图标的名字。
要使用图标我们需要在 <head> 部分添加图标的样式文件：
<link rel="stylesheet" href="http://statics.51coolma.cn/assets/foundation-icons/foundation-icons.css">
以下演示了使用图标的实例:
我们可以使用 .icon-bar 类来创建一个指定数量的工具栏图标:
图标描述使用 <label> 元素:
.disabled 类可以让图标变成不可点击状态：
.vertical 类用于创建一个垂直的工具栏：
更多关于图标的内容，可以参考我们的Foundation 图标手册。
.label 类用于提供一些附加信息:
以下类可以设置标签的颜色: .secondary, .success, .info, .warning 或 .alert:
.radius 与 .round 类可以为标签添加圆角：
可以使用 CSS 来修改标签的大小:
Foundation 可以很简单的创建一个提醒框：
提醒框可以使用 .alert-box 类创建, 可以添加可选的类： .secondary, .success, .info, .warning 或 .alert:
 | 提醒框的宽度为容器的 100%。 |
|---|
.radius 和 .round 类用于为提醒框添加圆角：
要关闭提醒框，可以在连接或按钮元素上添加 class="close" 类，并初始化 Foundation JS:
 | × (×) 是一个 HTML 字符实体表示一个关闭按钮的图标，而不是字母 "x"。 |
|---|
Foundation 进度条可以作为程序处理的程度来显示：
我们可以在 <div> 元素中使用 .progress 类来创建进度条，.meter 类用于子元素(<span>)。我们可以在 <span> 元素中设置进度百分比，如下所示：
默认情况下，进度条颜色为蓝色。不同颜色的类为：.secondary, .success, 或 .alert:
.radius 和 .round 类用于为进度条添加圆角效果：
可以使用 .small-num 或 .large-num 来修改进度条的宽度，num 是一个数字在 1(8.33%) 和 12(default (100%)) 之间:
可以使用 CSS 为进度条添加标签。以下实例中我们添加了<span> 元素来显示百分比：
Foundation 面板是一个灰色边框，内容含有内边距的模块。可以使用 .panel 类来创建:
使用 .callout 类将面板颜色修改为浅蓝：
使用 .radius 类将面板设置为圆角：
可以使用 CSS 来自定义面板，以下实例中我们将面板作为一个卡片：
Foundation 提供了响应式的图片，可以创建缩略图喝图片弹窗：
在 <img> 元素外添加 <a> 元素将图片作为一个锚链接。
在 <a> 标签中添加 .th 类将图片设置为缩略图。 鼠标移动到上面会显示一个浅蓝色外框:
 | 响应式图片 Foundation 中图片默认是响应式的。我们可以在实例页面重置浏览器大小来查看图片缩放效果。 |
|---|
我们可以在 .th 类添加 .radius 类来设置圆角缩略图：
Foundation 可以很容易实现图片弹窗。
要创建一个弹窗可以在 <ul> 元素上添加 .clearing-thumbs 类及 data-clearing 属性。在 <ul> 内添加图片列表。
注意: 图片弹窗需要 JavaScript。所以使用它前需要初始化 Foundation JS。
可以添加 data-caption 属性到每个图片来设置图片的描述:
 | 提示： 你可以在 data-caption 属性中添加 HTML 元素，如 data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p>" |
|---|
当你需要实现只显示一张缩略图时你可以在 <ul> 中使用 .clearing-feature 类并在<li> 中使用 .clearing-featured-img 类。
Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值：
.dropdown 类为按钮添加一个向下的箭头符号"图标。
使用按钮或链接的 data-dropdown="id" 属性来打开下拉菜单。
id 值需要与下拉菜单的内容 (id01) 匹配。
在 <div>, <nav>, <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。
最后初始化 Foundation JS。
注意: 在小屏幕上，所有的下拉菜单的宽度是100%。
使用 .tiny, .small, .medium, .large 或 .mega 来修改下拉菜单的宽度。
注意: 在小屏幕上，所有的下拉菜单的宽度是100%。
可以使用 .content 类为下拉菜单添加内边距：
<div> 下拉菜单中添加多媒体元素：
默认情况下下拉菜单在底部，可以通过添加 data-options="align:left|right|top" 来修改其方向：
默认情况下，下拉菜单在点击按钮后显示。如果你需要在鼠标移动上去后显示，可以在按钮上使用 data-options="is_hover:true" 属性:
我们可以在按钮上添加 .split 类来设置一个分割效果的按钮，分割后会在<span> 元素上生成一个方向向下的图标按钮:
在你想隐藏部分内容的显示时，可以使用折叠列表。
.accordion 类和 data-accordion 属性用于创建一个可折叠的元素。 .accordion-navigation 类用于渲染可折叠元素。实际的内容在 .content 类 (<div class="content") 中，点击按钮既可以显示。
我们在列表项中添加 <a> 元素来控制（显示/隐藏）可折叠的内容。然后锚链接使用与可折叠内容内容相同的id (<a href=#demo" 与 <div id="demo"> 相关联)。
注意： 可折叠的效果需要初始化 Foundation JS。
默认情况下，可折叠内容是隐藏的。我们可以通过在 <div> 上添加 .active 类让其默认是显示的：
手风琴效果用于延展与设置可折叠内容。
手风琴效果通过使用多个不同的锚链接与id来创建：
默认情况下，手风琴列表项有一个是打开的。如果你想关闭所有可以使用 data-options="multi_expand:true;" 属性:
在 HTML 中，无序列表 (<ul>) 实例如下:
结果:
在 Foundation 中，无序列表 (<ul>) 的前缀符号为圆圈，使用 .circle 类，实例如下:
方块标识符前缀使用 .square 类:
如果你不需要标识符，你可以使用 .no-bullet 类：
如果你需要添加一个水平的列表，可以在 <ul> 上添加 .inline-list 类:
一些 Web 页面可能需要列表菜单。
在 HTML 中，列表菜单同无序列表 <ul> 来定义，例如:
选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。
选项卡使用 <ul class="tabs" data-tab> 来创建, 各个选项使用 <li> 元素并加上 .tab-title 类来创建。
提示: 当前选中项可以使用 .active 类。
垂直选项卡可以使用 .vertical 类:
如果要设置切换标签，可以使用 <div> 元素加上 .content 类。每个选项卡上加上唯一的 ID, 并连接到列表项 (<a href="#menu1" 将打开 id="menu1" 的选项内容)。最后将所有的选项内容放在 <div> 元素上，该 <div> 元素需要添加 .tabs-content 类，并初始化 Foundation JS。
注意 .active 类会自动添加到当前选中的选项卡上：
使用 CSS 来自定义选项卡淡入的效果：
如果你的网页有很多内容，就需要使用分页功能。
要创建一个基础的分页功能需要在 <ul> 元素上加上 .pagination 类:
可以在 <li> 加上 .current 类来标注当前页面：
如果需要设置某个分页不可点击需要使用 .unavailable 类：
在第一个和最后一个 code><li> 元素上添加.arrow 类插入 HTML 实体符号 « 和 » 来创建分页方向符号：
我们可以在 <ul> 外层添加 <div> 元素，并在 <div> 上添加.pagination-centered 类来实现分页居中显示 :
面包屑导航用于展示当前页面的导航结构。
在 <ul> 元素上添加 .breadcrumbs 类来实现面包屑导航。你可以在 <li> 上添加 .current 或 .unavailable 类设置当前页与不可点击效果:
在页面切换上，子导航是非常有用的。
在 <dl> 元素上添加 .sub-nav 类来创建子导航。在<dt> 元素上添加标题，为选中的选项 <dd> 添加 .active 类:
价格表可用于展示企业产品:
ul.pricing-table - 定义价格表li.title - 定义产品标题 (黑色背景)li.price - 定义价格 (灰色背景字体大个项)li.description - 定义产品描述 (如果需要)li.bullet-item - 定义产品特点li.ca-button - 按钮文本 (如 "Buy", "Join", "Sign Up", 等)注意: 表格会 100% 填充容器的宽度，所有的项都有边框且是居中的。
以下实例显示了三个企业产品的价格（三项是均等划分宽度的）：
顶部导航栏放在页面头部：
使用 <nav class="top-bar" data-topbar> 创建标准工具条。.title-area 类定义了网站logo区域 (必须防止li.name 内) 。屏幕变小后你就可以看到一个 "menu" 按钮。 Foundation 的菜单会根据屏幕尺寸自动折叠喝延展：
小屏幕上，由于尺寸的原因很多选项会被隐藏。 li.toggle-topbar menu.icon 类创建了一个菜单的按钮，点击它可以显示被隐藏的选项。
提示: 重置浏览器窗口查看效果。
.top-bar-section 定义了导航的链接部分。 .left 类指定链接左对齐。 .active 类用于显示选中的项，背景为蓝色。
提示: 如果你想导航链接右对齐可以将 .left 修改为 .right :
你可以同时设置左边对齐与右边对齐：
导航栏可以通过 .divider 类来添加分割线 (大屏幕上是垂直的线，小屏幕上是水平线):
顶部导航栏可以设置下拉菜单。
可以通过在 <li> 元素上添加 .has-dropdown 类来设置下拉菜单:
使用 .divider 类来设置下拉菜单的分割线:
在 <li> 内添加 <label> 元素来设置下拉菜单的标签(标题):
下拉菜单可以再嵌入一个下拉菜单：
默认情况下导航栏的下拉菜单在鼠标移动过去后显示，我们可以使用 data-options="is_hover: false" 属性来设置导航栏在鼠标在点击后显示:
你可以在导航栏上放置图标和按钮：
你可以在导航栏上放上图标，更多图片样式可以查看Foundation 图标教程:
导航栏可以固定在页面顶部。
页面滚动时导航栏在顶部是不会动的。
要固定导航栏只需要将导航栏放在 <div class="fixed"> 内即可:
我们可以将导航栏放在 <div class="sticky"> 内来设置导航栏的绝对定位，当滚动条滚到到该区域时，该导航栏就像固定导航栏一样在顶部不动:
当你使用 .sticky 类时，顶部导航栏在所有屏幕尺寸上将固定不动。如果你需要在指定屏幕上设定只需要在 <nav> 上添加 data-options="sticky_on: small|medium|large" 属性即可：
或者通过数组设置多个屏幕尺寸：
Foundation 使用 <ul class="side-nav"> 创建侧边栏:
已点击的链接可以在 <li> 上使用 .active 类来标识，使用 .divider 类添加水平分割线：
我们可以使用网格设计模式来设置侧边导航栏，实例如下：
Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了(点击菜单按钮菜单从左侧滑出):
创建滑动导航实例如下：
麦哲伦导航就是一个导航索引，创建方式如下:
在 <div> 元素上添加 data-magellan-expedition="fixed" 属性来创建麦哲伦导航。
然后在 <dd> 或 <li> 上添加 data-magellan-arrival="value" 属性，后面添加一个与该属性值一样的链接(page1)。
使用 data-magellan-destination="value" 属性来控制麦哲伦导航的目标, 后面紧跟的 <a> 元素添加 name="value" 属性。两个属性的值必须与 data-magellan-arrival 的值一致 (page1)。
最后，初始化 Foundation JS ，用户在滚动页面时导航就会根据当前显示的内容自动切换。
麦哲伦导航使用头部工具条实例：
默认情况下，麦哲伦导航的 <div> 元素有 10px 的内边距。可以使用 CSS 移除它：
使用 data-options 属性修改麦哲伦导航的设置, 例如 <div data-magellan-expedition="fixed" data-options="destination_threshold:60">:
| 名称 | 类型 | 默认 | 描述 | 实例 |
|---|---|---|---|---|
| active_class | string | active | 指定激活链接的类 | 尝试一下 |
| threshold | number | 0 | 指定导航在什么时候需要固定位置。会根据滚动条滚动计算，默认为 0 (auto)。 | 尝试一下 |
| destination_threshold | number | 20 | 设该值设定了导航链接显示为激活（蓝色背景）时导航列表距离顶部的值。 | 尝试一下 |
| fixed_top | number | 0 | 指定了导航条距离头部的像素值 | 尝试一下 |
Foundation 表单控制会自动设置为全局样式:
所有 <textarea>, <select> 及 <input> 元素宽度都为 100%，且带有外边距、内边距、阴影喝鼠标移动效果。
在表单中使用 <label> 元素来设置标签，标签可以添加 for 属性和 id 属性。用户在点击标签或输入域时获取输入框焦点：
如果需要设置标签右对齐，可以使用 .right 类:
Foundation 渲染 <fieldset> 元素的样式如下：
使用 .error 类来设置错误的标签、输入框、文本框样式:
 | 你需要使用 JavaScript 来更新用户输入的错误状态。 |
|---|
使用网格的列来设置输入框的大小，如 .large-6, .medium-6, 等。
更多网格系统知识，可以点击 网格系统 教程。
以下演示了相等大小列的实例:
如果你希望你的标签内容显示在左边（不是上边），可以将标签元素 label 放在输入框左边的不同的列上，并使用 .inline 类来设置垂直居中:
你可以在 <div class="row collapse"> 中添加前置和后置标签，元素为： <element class="postfix"> 或 <element class="prefix">。可以使用网格系统来设置前置和后置标签的大小：
可以使用 <a> 元素添加 .button 类来设置前置和后置按钮:
开关是在鼠标点击(手指敲击)下在 "On" 和 "Off" 状态下切换：
切换开关使用 <div class="switch"> 创建。<div> 内添加带有唯一 id 的 <input type="checkbox"> ，<label> 元素的 for 属性需要与 <input type="checkbox"> 的 id 相匹配：
使用 .large, .small 或 .tiny 类来设置开关大小：
使用 .radius 和 .round 类来设置圆角切换开关：
可以通过设置单选按钮(radio)来设置单个选项。注意: 注意各个选项的 name 属性必须一致 (实例中为 "myGroup" )。
Foundation 滑块允许用户通过拖动来选取区间值:
滑块可以通过使用 <div class="range-slider" data-slider> 创建。在<div> 内, 添加两个 <span> 元素: <span class="range-slider-handle"> 创建矩形滑块（蓝色背景），<span class="range-slider-active-segment"> 是在滑块后的灰色横条，是滑块拖动区域。
注意: 滑块需要使用 JavaScript。所以你需要初始化oundation JS:
使用 .radius 和 .round 类来添加圆角滑块。使用 .disabled 类来禁用滑块：
使用 .vertical-range 类和 data-options="vertical: true;" 来创建垂直滑块:
默认情况下，滑块放在横条的中间 (数值为 "50")。可以通过添加 data-options="initial: num" 属性来修改默认值:
如果我们需要在滑块拖动时实时显示值，可以通过在 <div> 中添加 data-options="display_selector:#id" 属性且元素 id 值与滑块的 id 匹配，如下实例：
以下实例使用了 display_selector 和 initial 数据选项:
默认情况下，滑块滑动的增加减少的数量为 "1"。可以通过添加 data-options="step: num;" 属性来修改步长值。实例中设置为 25:
默认情况下，区间值在 "0" 到 "100"。可以通过添加 data-options start 和 end 来设置区间值。以下实例设置区间值为 "1" 到 "20":
以下使用为在网格中使用滑块：
以下实例使用 <input> 取代 <span> 来显示滑块的值:
提示框在鼠标移动到元素上后显示：
我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。
注意: 滑块需要使用 JavaScript。所以你需要初始化oundation JS:
.has-tip 类可以加粗鼠标移动的文本:
默认情况下，提示框会出现在元素的底部。
可以使用 .tip-top, .tip-left, .tip-right or .tip-bottom (默认) 来设置提示框的位置。
注意: 在小尺寸的屏幕上，提示框的宽带是 100%。
.radius 和 .round 类用于设置圆角提示框：
模态框是一个显示在页面头部的弹窗。
我们可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id="id" 属性阿里打开模态框。 id 必须与容器 id 一致(实例为 "myModal")。
如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮 <a> 标签上添加 .close-reveal-modal 类来实现。
注意: 滑块需要使用 JavaScript。所以你需要初始化oundation JS:
可以在模态框容器上添加以下类来设置模态框的大小：
.tiny: 30% 宽度.small: 40% 宽度.medium: 60% 宽度.large: 70% 宽度.xlarge: 95% 宽度.full: 100% 宽度和高度注意: 在平板、笔记本、PC 电脑上默认为 80% 宽度，在小屏幕设备上是 100% 宽度。
你可以在模态框内嵌入模态框，可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id：
第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时，不关闭第一个模态框。可以在第二个模态框上添加 data-options="multiple_opened:true;" 属性：
Joyride 是一个功能向导的 JavaScript 效果，创建实例如下：
以上实例中，我们创建了两个元素，每个元素都有独立的 ID。 两个元素设置了 joyride 开始和结束的位置。
我们在 <ol> 或 <ul> 元素上添加 data-joyride 属性和 .joyride-list 类来创建 joyride。你需要在文档头部定义它 (在 <body> 内的头部)。在每个列表上使用 <li> 元素，每个元素添加data-id="value" 属性。属性的 value 必须与之前元素的 id 相同。所以第一个功能导航<h3> 元素使用 id="first" 必须与 <li> 元素的 data-id="first" 值一致。
如果你没有管理停止的 id，将显示一个模态框。
最后，Joyride 需要使用 JavaScript 初始化它，代码为： $(document).foundation('joyride', 'start');
我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。
注意: 滑块需要使用 JavaScript。所以你需要初始化oundation JS:
在均衡器上通过添加 data-equalizer-mq="value" 属性为不同屏幕尺寸设置相同高度。值可以是以下之一：
| 值 | 描述 | 实例 |
|---|---|---|
medium-up | 默认。 创建相同高度的容器，宽度大于 40.063em | |
large-up | 创建相同高度的容器，宽度大于 64.063em | 尝试一下 |
xlarge-up | 创建相同高度的容器，宽度大于 90.063em | 尝试一下 |
xxlarge-up | 创建相同高度的容器，宽度大于 120.063em | 尝试一下 |
为 data-equalizer 和 data-equalizer-watch 属性添加相同的值。 这会一起连接到均衡器容器。重复多次嵌套均衡器，确保他们是匹配的：
Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。
Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。
Foundation 是一个以移动优先的流行框架。
本教程包含了上百个 Foundation 实例。
你可以直接使用我们的在线编辑器，并点击"提交运行"按钮查看结果：
点击"尝试一下"按钮查看在线实例。
以下效果为在 iframe 标签中的演示，可以点击"尝试一下"查看在线实例：
| 什么是响应式网页设计？ 响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 |
|---|
你可以通过以下两种方式来获取 Foundation：
1、从官网下载最新版本：http://foundation.zurb.com/。
2、使用W3Cschool在线教程官网提供的CDN（推荐）：
<!-- css 文件 --><link rel="stylesheet" href="http://statics.51coolma.cn/assets/foundation-5.5.3/foundation.min.css"><!-- jQuery 库 --><script src="http://statics.51coolma.cn/assets/jquery/2.0.3/jquery.min.js"></script><!-- JavaScript 文件 --><script src="http://statics.51coolma.cn/assets/foundation-5.5.3/js/foundation.min.js"></script><!-- modernizr 文件 --><script src="http://statics.51coolma.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
本站静态 CDN 基于阿里云服务。
| Foundation 使用 CDN 的优势: Foundation 使用 CDN 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性 为什么使用 modernizr? Some Foundation 的组件使用了比较前前沿的 HTML5 和 CSS3 特性，但不是所有浏览器都支持。 Modernizr 是一个用于检测用户浏览器HTML5和CSS3特性的 JavaScript库 - 让组件能在所有浏览器上正常运行。 |
|---|
1. 添加 HTML5 doctype
Foundation 使用 HTML 元素和 CSS 属性，所以需要添加 HTML5 doctype 文档类型声明。
同时我们可以设置文档的语言属性 lang 及字符编码：
2. Foundation 5 移动优先
Foundation 5 为移动设备的响应式设计。框架的核心是移动优先。
为了确保页面可自由缩放可以在 <head> 元素中添加以下 <meta> 标签:
3. 初始化组件
一些 Foundation 组件是基于 jQuery 开放的，如：模态框、下拉菜单等。你可以使用以下脚本来初始化组件：
如何创建一个基本的 foundation 页面:
<!DOCTYPE html><html><head> <title>Foundation Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- css 文件 --> <link rel="stylesheet" href="http://statics.51coolma.cn/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://statics.51coolma.cn/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://statics.51coolma.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://statics.51coolma.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script></head><body> <div class="row"> <div class="medium-12 columns"> <div class="panel"> <h1>Foundation 页面</h1> <p>重置窗口大小，查看效果！</p> <button type="button" class="button small">I Like It!</button> </div> </div></div><div class="row"> <div class="medium-4 columns"> <h3>Column 1</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> <div class="medium-4 columns"> <h3>Column 2</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> <div class="medium-4 columns"> <h3>Column 3</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div></div></body></html>
Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说，字体默认为 16px。对于大多数移动端浏览器来说，字体默认为 12px。默认的字体为 "Helvetica Neue"， line-height 默认为 1.5。
以上默认的设置均是针对 <body> 元素。
本章节我们将讨论 Foundation 的文字排列设计。
以下实例的真实样式请通过点击"尝试一下"按钮查看。
Foundation 渲染的 HTML 标题 (<h1> 到<h6>) 如下所示:
提示： 如果需要创建一个浅色的标题，可以在元素上添加 .subheader 类:
在 Foundation 中， HTML <small> 元素用于创建一个浅色的副标题：
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
Foundation <a> 元素的样式如下所示：
Foundation <abbr> 元素的样式如下所示：
Foundation <blockquote> 元素的样式如下所示：
Foundation <dl> 元素的样式如下所示：
Foundation <code> 元素的样式如下所示：
Foundation <kbd> 元素的样式如下所示：
Foundation <hr> 元素的样式如下所示：
Foundation 的 <table> 元素样式为灰色斑马条纹且包含四个边框：
使用 CSS 让表格支持响应式设计：在表格外添加 <div> 元素，样式为 overflow-x:hidden:
Foundation 提供了 6 种按钮样式。 .button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为： .secondary, .success, .info, .warning 或 .alert:
按钮类可以使用在 <a>, <button>, 或 <input> 元素:
| 为什么将 a 标签的 href 设置为 # ? 当我们不希望链接点击跳转并得到 "404" 页面时，我们可以将 a 标签的 href 设置为 #。 |
|---|
我们可以使用 .large, .small 或 .tiny 类来设置按钮大小：
可以使用 .radius 和 .round 类来设置圆角按钮：
可以使用 .expand 类来设置按钮的宽带为 100%:
可以使用 .disabled 类来设置按钮不可点击:
Foundation 可以在同一行内创建一系列的按钮。
可以使用 <ul> 元素并添加 .button-group 类来创建按钮组：
垂直按钮组使用 .stack 类来创建。注意，按钮会跨越父元素的整个宽度:
.stack-for-small 类用于小尺寸的屏幕，按钮有水平排列变为垂直排列：
按钮组中使用 .radius 和 .round 类为按钮添加圆角效果：
.even-num 类用于在按钮组中均匀的分配按钮的宽度并跨越父元素 100% 宽度。
num 为按钮组中按钮的数量，从 1 到 8：
下拉菜单按钮可以让用户选取设定好的值：
.dropdown 类创建一个下拉菜单按钮。
使用带有 data-dropdown="id" 属性的按钮或链接打开下拉菜单。
id 值需要与下拉菜单的内容 (id01) 匹配。
在 <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。
最后初始化 Foundation JS。
我们也可以创建一个分割按钮的下拉菜单。只需要在按钮中添加 .split 类并使用 span 元素生成一个方向箭的按钮：
| 提示:后面的教程中我们将学到更多关于下拉菜单是知识。 |
|---|
Foundation 提供了 283 个图标，你可以使用css来定义它的样式尺寸。
图标可用于文本，按钮，工具条，导航栏，表单等。
以下是 Foundation 图标的实例：
刷新按钮:
检测图标:
主页图标:
创建图标语法格式如下:
<i class="fi-name"></i>
name 部分替换为图标的名字。
要使用图标我们需要在 <head> 部分添加图标的样式文件：
<link rel="stylesheet" href="http://statics.51coolma.cn/assets/foundation-icons/foundation-icons.css">
以下演示了使用图标的实例:
我们可以使用 .icon-bar 类来创建一个指定数量的工具栏图标:
图标描述使用 <label> 元素:
.disabled 类可以让图标变成不可点击状态：
.vertical 类用于创建一个垂直的工具栏：
更多关于图标的内容，可以参考我们的Foundation 图标手册。
.label 类用于提供一些附加信息:
以下类可以设置标签的颜色: .secondary, .success, .info, .warning 或 .alert:
.radius 与 .round 类可以为标签添加圆角：
可以使用 CSS 来修改标签的大小:
Foundation 可以很简单的创建一个提醒框：
提醒框可以使用 .alert-box 类创建, 可以添加可选的类： .secondary, .success, .info, .warning 或 .alert:
| 提醒框的宽度为容器的 100%。 |
|---|
.radius 和 .round 类用于为提醒框添加圆角：
要关闭提醒框，可以在连接或按钮元素上添加 class="close" 类，并初始化 Foundation JS:
| × (×) 是一个 HTML 字符实体表示一个关闭按钮的图标，而不是字母 "x"。 |
|---|
Foundation 进度条可以作为程序处理的程度来显示：
我们可以在 <div> 元素中使用 .progress 类来创建进度条，.meter 类用于子元素(<span>)。我们可以在 <span> 元素中设置进度百分比，如下所示：
默认情况下，进度条颜色为蓝色。不同颜色的类为：.secondary, .success, 或 .alert:
.radius 和 .round 类用于为进度条添加圆角效果：
可以使用 .small-num 或 .large-num 来修改进度条的宽度，num 是一个数字在 1(8.33%) 和 12(default (100%)) 之间:
可以使用 CSS 为进度条添加标签。以下实例中我们添加了<span> 元素来显示百分比：
Foundation 面板是一个灰色边框，内容含有内边距的模块。可以使用 .panel 类来创建:
使用 .callout 类将面板颜色修改为浅蓝：
使用 .radius 类将面板设置为圆角：
可以使用 CSS 来自定义面板，以下实例中我们将面板作为一个卡片：
Foundation 提供了响应式的图片，可以创建缩略图喝图片弹窗：
在 <img> 元素外添加 <a> 元素将图片作为一个锚链接。
在 <a> 标签中添加 .th 类将图片设置为缩略图。 鼠标移动到上面会显示一个浅蓝色外框:
| 响应式图片 Foundation 中图片默认是响应式的。我们可以在实例页面重置浏览器大小来查看图片缩放效果。 |
|---|
我们可以在 .th 类添加 .radius 类来设置圆角缩略图：
Foundation 可以很容易实现图片弹窗。
要创建一个弹窗可以在 <ul> 元素上添加 .clearing-thumbs 类及 data-clearing 属性。在 <ul> 内添加图片列表。
注意: 图片弹窗需要 JavaScript。所以使用它前需要初始化 Foundation JS。
可以添加 data-caption 属性到每个图片来设置图片的描述:
| 提示： 你可以在 data-caption 属性中添加 HTML 元素，如 data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p>" |
|---|
当你需要实现只显示一张缩略图时你可以在 <ul> 中使用 .clearing-feature 类并在<li> 中使用 .clearing-featured-img 类。
Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值：
.dropdown 类为按钮添加一个向下的箭头符号"图标。
使用按钮或链接的 data-dropdown="id" 属性来打开下拉菜单。
id 值需要与下拉菜单的内容 (id01) 匹配。
在 <div>, <nav>, <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。
最后初始化 Foundation JS。
注意: 在小屏幕上，所有的下拉菜单的宽度是100%。
使用 .tiny, .small, .medium, .large 或 .mega 来修改下拉菜单的宽度。
注意: 在小屏幕上，所有的下拉菜单的宽度是100%。
可以使用 .content 类为下拉菜单添加内边距：
<div> 下拉菜单中添加多媒体元素：
默认情况下下拉菜单在底部，可以通过添加 data-options="align:left|right|top" 来修改其方向：
默认情况下，下拉菜单在点击按钮后显示。如果你需要在鼠标移动上去后显示，可以在按钮上使用 data-options="is_hover:true" 属性:
我们可以在按钮上添加 .split 类来设置一个分割效果的按钮，分割后会在<span> 元素上生成一个方向向下的图标按钮:
在你想隐藏部分内容的显示时，可以使用折叠列表。
.accordion 类和 data-accordion 属性用于创建一个可折叠的元素。 .accordion-navigation 类用于渲染可折叠元素。实际的内容在 .content 类 (<div class="content") 中，点击按钮既可以显示。
我们在列表项中添加 <a> 元素来控制（显示/隐藏）可折叠的内容。然后锚链接使用与可折叠内容内容相同的id (<a href=#demo" 与 <div id="demo"> 相关联)。
注意： 可折叠的效果需要初始化 Foundation JS。
默认情况下，可折叠内容是隐藏的。我们可以通过在 <div> 上添加 .active 类让其默认是显示的：
手风琴效果用于延展与设置可折叠内容。
手风琴效果通过使用多个不同的锚链接与id来创建：
默认情况下，手风琴列表项有一个是打开的。如果你想关闭所有可以使用 data-options="multi_expand:true;" 属性:
在 HTML 中，无序列表 (<ul>) 实例如下:
结果:
在 Foundation 中，无序列表 (<ul>) 的前缀符号为圆圈，使用 .circle 类，实例如下:
方块标识符前缀使用 .square 类:
如果你不需要标识符，你可以使用 .no-bullet 类：
如果你需要添加一个水平的列表，可以在 <ul> 上添加 .inline-list 类:
一些 Web 页面可能需要列表菜单。
在 HTML 中，列表菜单同无序列表 <ul> 来定义，例如:
选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。
选项卡使用 <ul class="tabs" data-tab> 来创建, 各个选项使用 <li> 元素并加上 .tab-title 类来创建。
提示: 当前选中项可以使用 .active 类。
垂直选项卡可以使用 .vertical 类:
如果要设置切换标签，可以使用 <div> 元素加上 .content 类。每个选项卡上加上唯一的 ID, 并连接到列表项 (<a href="#menu1" 将打开 id="menu1" 的选项内容)。最后将所有的选项内容放在 <div> 元素上，该 <div> 元素需要添加 .tabs-content 类，并初始化 Foundation JS。
注意 .active 类会自动添加到当前选中的选项卡上：
使用 CSS 来自定义选项卡淡入的效果：
如果你的网页有很多内容，就需要使用分页功能。
要创建一个基础的分页功能需要在 <ul> 元素上加上 .pagination 类:
可以在 <li> 加上 .current 类来标注当前页面：
如果需要设置某个分页不可点击需要使用 .unavailable 类：
在第一个和最后一个 code><li> 元素上添加.arrow 类插入 HTML 实体符号 « 和 » 来创建分页方向符号：
我们可以在 <ul> 外层添加 <div> 元素，并在 <div> 上添加.pagination-centered 类来实现分页居中显示 :
面包屑导航用于展示当前页面的导航结构。
在 <ul> 元素上添加 .breadcrumbs 类来实现面包屑导航。你可以在 <li> 上添加 .current 或 .unavailable 类设置当前页与不可点击效果:
在页面切换上，子导航是非常有用的。
在 <dl> 元素上添加 .sub-nav 类来创建子导航。在<dt> 元素上添加标题，为选中的选项 <dd> 添加 .active 类:
价格表可用于展示企业产品:
ul.pricing-table - 定义价格表li.title - 定义产品标题 (黑色背景)li.price - 定义价格 (灰色背景字体大个项)li.description - 定义产品描述 (如果需要)li.bullet-item - 定义产品特点li.ca-button - 按钮文本 (如 "Buy", "Join", "Sign Up", 等)注意: 表格会 100% 填充容器的宽度，所有的项都有边框且是居中的。
以下实例显示了三个企业产品的价格（三项是均等划分宽度的）：
顶部导航栏放在页面头部：
使用 <nav class="top-bar" data-topbar> 创建标准工具条。.title-area 类定义了网站logo区域 (必须防止li.name 内) 。屏幕变小后你就可以看到一个 "menu" 按钮。 Foundation 的菜单会根据屏幕尺寸自动折叠喝延展：
小屏幕上，由于尺寸的原因很多选项会被隐藏。 li.toggle-topbar menu.icon 类创建了一个菜单的按钮，点击它可以显示被隐藏的选项。
提示: 重置浏览器窗口查看效果。
.top-bar-section 定义了导航的链接部分。 .left 类指定链接左对齐。 .active 类用于显示选中的项，背景为蓝色。
提示: 如果你想导航链接右对齐可以将 .left 修改为 .right :
你可以同时设置左边对齐与右边对齐：
导航栏可以通过 .divider 类来添加分割线 (大屏幕上是垂直的线，小屏幕上是水平线):
顶部导航栏可以设置下拉菜单。
可以通过在 <li> 元素上添加 .has-dropdown 类来设置下拉菜单:
使用 .divider 类来设置下拉菜单的分割线:
在 <li> 内添加 <label> 元素来设置下拉菜单的标签(标题):
下拉菜单可以再嵌入一个下拉菜单：
默认情况下导航栏的下拉菜单在鼠标移动过去后显示，我们可以使用 data-options="is_hover: false" 属性来设置导航栏在鼠标在点击后显示:
你可以在导航栏上放置图标和按钮：
你可以在导航栏上放上图标，更多图片样式可以查看Foundation 图标教程:
导航栏可以固定在页面顶部。
页面滚动时导航栏在顶部是不会动的。
要固定导航栏只需要将导航栏放在 <div class="fixed"> 内即可:
我们可以将导航栏放在 <div class="sticky"> 内来设置导航栏的绝对定位，当滚动条滚到到该区域时，该导航栏就像固定导航栏一样在顶部不动:
当你使用 .sticky 类时，顶部导航栏在所有屏幕尺寸上将固定不动。如果你需要在指定屏幕上设定只需要在 <nav> 上添加 data-options="sticky_on: small|medium|large" 属性即可：
或者通过数组设置多个屏幕尺寸：
Foundation 使用 <ul class="side-nav"> 创建侧边栏:
已点击的链接可以在 <li> 上使用 .active 类来标识，使用 .divider 类添加水平分割线：
我们可以使用网格设计模式来设置侧边导航栏，实例如下：
Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了(点击菜单按钮菜单从左侧滑出):
创建滑动导航实例如下：
麦哲伦导航就是一个导航索引，创建方式如下:
在 <div> 元素上添加 data-magellan-expedition="fixed" 属性来创建麦哲伦导航。
然后在 <dd> 或 <li> 上添加 data-magellan-arrival="value" 属性，后面添加一个与该属性值一样的链接(page1)。
使用 data-magellan-destination="value" 属性来控制麦哲伦导航的目标, 后面紧跟的 <a> 元素添加 name="value" 属性。两个属性的值必须与 data-magellan-arrival 的值一致 (page1)。
最后，初始化 Foundation JS ，用户在滚动页面时导航就会根据当前显示的内容自动切换。
麦哲伦导航使用头部工具条实例：
默认情况下，麦哲伦导航的 <div> 元素有 10px 的内边距。可以使用 CSS 移除它：
使用 data-options 属性修改麦哲伦导航的设置, 例如 <div data-magellan-expedition="fixed" data-options="destination_threshold:60">:
| 名称 | 类型 | 默认 | 描述 | 实例 |
|---|---|---|---|---|
| active_class | string | active | 指定激活链接的类 | 尝试一下 |
| threshold | number | 0 | 指定导航在什么时候需要固定位置。会根据滚动条滚动计算，默认为 0 (auto)。 | 尝试一下 |
| destination_threshold | number | 20 | 设该值设定了导航链接显示为激活（蓝色背景）时导航列表距离顶部的值。 | 尝试一下 |
| fixed_top | number | 0 | 指定了导航条距离头部的像素值 | 尝试一下 |
Foundation 表单控制会自动设置为全局样式:
所有 <textarea>, <select> 及 <input> 元素宽度都为 100%，且带有外边距、内边距、阴影喝鼠标移动效果。
在表单中使用 <label> 元素来设置标签，标签可以添加 for 属性和 id 属性。用户在点击标签或输入域时获取输入框焦点：
如果需要设置标签右对齐，可以使用 .right 类:
Foundation 渲染 <fieldset> 元素的样式如下：
使用 .error 类来设置错误的标签、输入框、文本框样式:
| 你需要使用 JavaScript 来更新用户输入的错误状态。 |
|---|
使用网格的列来设置输入框的大小，如 .large-6, .medium-6, 等。
更多网格系统知识，可以点击 网格系统 教程。
以下演示了相等大小列的实例:
如果你希望你的标签内容显示在左边（不是上边），可以将标签元素 label 放在输入框左边的不同的列上，并使用 .inline 类来设置垂直居中:
你可以在 <div class="row collapse"> 中添加前置和后置标签，元素为： <element class="postfix"> 或 <element class="prefix">。可以使用网格系统来设置前置和后置标签的大小：
可以使用 <a> 元素添加 .button 类来设置前置和后置按钮:
开关是在鼠标点击(手指敲击)下在 "On" 和 "Off" 状态下切换：
切换开关使用 <div class="switch"> 创建。<div> 内添加带有唯一 id 的 <input type="checkbox"> ，<label> 元素的 for 属性需要与 <input type="checkbox"> 的 id 相匹配：
使用 .large, .small 或 .tiny 类来设置开关大小：
使用 .radius 和 .round 类来设置圆角切换开关：
可以通过设置单选按钮(radio)来设置单个选项。注意: 注意各个选项的 name 属性必须一致 (实例中为 "myGroup" )。
Foundation 滑块允许用户通过拖动来选取区间值:
滑块可以通过使用 <div class="range-slider" data-slider> 创建。在<div> 内, 添加两个 <span> 元素: <span class="range-slider-handle"> 创建矩形滑块（蓝色背景），<span class="range-slider-active-segment"> 是在滑块后的灰色横条，是滑块拖动区域。
注意: 滑块需要使用 JavaScript。所以你需要初始化oundation JS:
使用 .radius 和 .round 类来添加圆角滑块。使用 .disabled 类来禁用滑块：
使用 .vertical-range 类和 data-options="vertical: true;" 来创建垂直滑块:
默认情况下，滑块放在横条的中间 (数值为 "50")。可以通过添加 data-options="initial: num" 属性来修改默认值:
如果我们需要在滑块拖动时实时显示值，可以通过在 <div> 中添加 data-options="display_selector:#id" 属性且元素 id 值与滑块的 id 匹配，如下实例：
以下实例使用了 display_selector 和 initial 数据选项:
默认情况下，滑块滑动的增加减少的数量为 "1"。可以通过添加 data-options="step: num;" 属性来修改步长值。实例中设置为 25:
默认情况下，区间值在 "0" 到 "100"。可以通过添加 data-options start 和 end 来设置区间值。以下实例设置区间值为 "1" 到 "20":
以下使用为在网格中使用滑块：
以下实例使用 <input> 取代 <span> 来显示滑块的值:
提示框在鼠标移动到元素上后显示：
我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。
注意: 滑块需要使用 JavaScript。所以你需要初始化oundation JS:
.has-tip 类可以加粗鼠标移动的文本:
默认情况下，提示框会出现在元素的底部。
可以使用 .tip-top, .tip-left, .tip-right or .tip-bottom (默认) 来设置提示框的位置。
注意: 在小尺寸的屏幕上，提示框的宽带是 100%。
.radius 和 .round 类用于设置圆角提示框：
模态框是一个显示在页面头部的弹窗。
我们可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id="id" 属性阿里打开模态框。 id 必须与容器 id 一致(实例为 "myModal")。
如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮 <a> 标签上添加 .close-reveal-modal 类来实现。
注意: 滑块需要使用 JavaScript。所以你需要初始化oundation JS:
可以在模态框容器上添加以下类来设置模态框的大小：
.tiny: 30% 宽度.small: 40% 宽度.medium: 60% 宽度.large: 70% 宽度.xlarge: 95% 宽度.full: 100% 宽度和高度注意: 在平板、笔记本、PC 电脑上默认为 80% 宽度，在小屏幕设备上是 100% 宽度。
你可以在模态框内嵌入模态框，可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id：
第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时，不关闭第一个模态框。可以在第二个模态框上添加 data-options="multiple_opened:true;" 属性：
Joyride 是一个功能向导的 JavaScript 效果，创建实例如下：
以上实例中，我们创建了两个元素，每个元素都有独立的 ID。 两个元素设置了 joyride 开始和结束的位置。
我们在 <ol> 或 <ul> 元素上添加 data-joyride 属性和 .joyride-list 类来创建 joyride。你需要在文档头部定义它 (在 <body> 内的头部)。在每个列表上使用 <li> 元素，每个元素添加data-id="value" 属性。属性的 value 必须与之前元素的 id 相同。所以第一个功能导航<h3> 元素使用 id="first" 必须与 <li> 元素的 data-id="first" 值一致。
如果你没有管理停止的 id，将显示一个模态框。
最后，Joyride 需要使用 JavaScript 初始化它，代码为： $(document).foundation('joyride', 'start');
我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。
注意: 滑块需要使用 JavaScript。所以你需要初始化oundation JS:
在均衡器上通过添加 data-equalizer-mq="value" 属性为不同屏幕尺寸设置相同高度。值可以是以下之一：
| 值 | 描述 | 实例 |
|---|---|---|
medium-up | 默认。 创建相同高度的容器，宽度大于 40.063em | |
large-up | 创建相同高度的容器，宽度大于 64.063em | 尝试一下 |
xlarge-up | 创建相同高度的容器，宽度大于 90.063em | 尝试一下 |
xxlarge-up | 创建相同高度的容器，宽度大于 120.063em | 尝试一下 |
为 data-equalizer 和 data-equalizer-watch 属性添加相同的值。 这会一起连接到均衡器容器。重复多次嵌套均衡器，确保他们是匹配的：
Foundation 网格系统为 12 列。
如果你不需要 12 列，你可以合并一些列，创建一些更大宽度的列。
Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上，可能是三列，小屏幕尺寸就可能是三个单列，按顺序排列。
Foundation 网格系统有三个列：
.small (手机端).medium (平板设备).large (电脑设备：笔记本，台式机)以上类可以结合使用，创建更灵活的布局
以下是基本的 Foundation 网格结构实例:
首先，创建一行 (<div class="row">)。 这是一个水平的垂直列。然后添加列的数量说明 small-num, medium-num 及 large-num 类。注意：列的数量 num 加起来必须等于 12 :
实例中，第一行的 <div> 类为 .small-12, 这会创建 12 列（100%宽度）。
第二行创建了两个列， .small-4 的宽度为33.3% ，.small-8 的宽度为 66.6%。
第三行我们添加了额外的两个列 (.large-3 和 .large-9)。这意味着如果在大屏幕尺寸下，列就会变为 25% (.large-3) 和 75% (.large-9)的比例。同时我们也指定了小屏幕上列的比例 33% (.small-4) 和 66% (.small-8) 。这种组合的方式对于不同屏幕显示效果是非常有帮助的。
下表总结了 Foundation 网格系统在多个设备上的说明：
| 小型设备 Phones (<40.0625em (640px)) | 中等设备 Tablets (>=40.0625em (640px)) | 大设备 Laptops & Desktops (>=64.0625em (1025px)) | |
|---|---|---|---|
| 网格行为 | 一直是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 |
| 类前缀 | .small-* | .medium-* | .large-* |
| 类的数量 | 12 | 12 | 12 |
| 可内嵌 | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes |
网格最大(.row) 宽度为 62.5rem。在宽屏上，当宽度大于 62.5rem, 列不会跨越页面的宽度， 即使宽度设定为 100%。但你可以通过 CSS 重新设置 max-width:
如果你使用默认的 max-width, 但希望背景颜色跨越整个页面宽度，你可以使用 .row 包裹整个容器，并指定你需要的背景颜色:
以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。
 | 提示: .small|medium|large-* 类中的数字指定了跨越的列数。所以， .small-1 跨越 1 列, .small-4 跨越 4 列, .small-6 跨越 6 列 (50% 宽度) 等。注意: 要保证数列加起来是 12 列! |
|---|
假设我们在小型设备上有一个简单的网格布局，两列，宽度比例为 25% 和 75%。
提示: 小型设备的定义是屏幕小于 40.0625em。
小型设备上我们使用 .small-* 类。
<div class="small-3 columns">....</div><div class="small-9 columns">....</div>
以下实例设置了两个列，比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码):.small in them and use those".
 | 注意: 要保证数列加起来是 12 列! |
|---|
如果需要设置 33.3%/66.6% 的比例，你可以使用 .small-4 和 .small-8:
上一章节我们介绍了小型设备上我们使用 .small-* 类来设置，网格比例为 25%/75%：
<div class="small-3 columns">....</div><div class="small-9 columns">....</div>
在中型设备上我们推荐的比例为 50%/50%。
提示: 中型设备的屏幕尺寸定义在 40.0625em 到 64.0624em 之间。
中型设备上使用 .medium-* 类。
现在我们在中型设备上添加两列：
<div class="small-3 medium-6 columns">....</div><div class="small-9 medium-6 columns">....</div>
以上实例设置了两个列，比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码):
小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)。但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6) 。
 | 注意: 要保证数列加起来是 12 列! |
|---|
以下实例中我们指定了 .medium-6 类 (不是 .small-*)。这表明在中型或大型设备上比例为 50%/50%。但在小型设备上会水平堆叠 (100% 宽度):
上一章节我们介绍了中型设备和小型设备的网格布局，小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)，但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6)：
<div class="small-3 medium-6 columns">....</div><div class="small-9 medium-6 columns">....</div>
在大型设备上我们推荐的比例为 33%/66%。
提示: 大型设备的屏幕尺寸定义大于 64.0625em。
大型设备上使用 .large-* 类。
现在我们在大型设备上添加两列：
<div class="small-3 medium-6 large-4 columns">....</div><div class="small-9 medium-6 large-8 columns">....</div>
.small-3 和 .small-9).medium-6 和 .medium-6).large-4 和 .large-8) | 注意: 要保证数列加起来是 12 列! |
|---|
以下实例中我们指定了 .large-6 类 (不是 .medium-* 和 .small-*)。这表明在大型设备上比例为 50%/50%。但在中型或小型设备上会水平堆叠 (100% 宽度):
块状网格用于均分页面内容：例如一行内要显示四张图片，不管什么屏幕下都需要均分宽度。
可以使用 <ul> 元素加上 .small|medium|large-block-grid-num 类来创建块状网格。num 用于指定均分是数量：
另一个实例，使用段落：
通过添加多个网格块类可以设置不同尺寸屏幕显示不同的块数量:
以下我们收集了一些网格常用的实例。
该实例演示了如何创建三个均等列(33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠：
该实例演示了如何创建三个不均等列 (25%/50%/25%)，在中型和大型设备上显示三个列，在小型设备上自动堆叠：
该实例演示了如何创建两个均等列 (50%/50%)，在小型、中型和大型设备上列的比例始终为 50%/50%：
该实例演示了如何创建两个不均等列 (33.3%/66.6%)，在小型、中型和大型设备上列的比例始终为 33.3%/66.6%：
通过使用 .small|medium|large-push-* 和 .small|medium|large-pull-* 类来修改列的顺序:
你可以使用嵌套网格(列中插入列):
Foundation 网格系统有三个列: .small-* (手机), .medium-* (平板), 和 .large-* (桌面设备)。这些类可以动态组合使用，让布局更加灵活：
提示： 每个类都能放大，如果你希望小型和大型屏幕设备的宽度一样可以设置指定 .small-*。
列居中可以使用 .small-centered 类。中型和大型设备可以继承小型设备的居中，但你需要在大型设备上设置居中类.large-centered 。
可以使用 .large-offset-* (或 .small-offset-*) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:
如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动，并使用空白来填充剩下的列。
可选项 .end 类用于设置最后一列的元素向左边浮动:
网格 (.row) 最大尺寸（ max-width）为 62.5rem。在宽屏设备上尺寸可能大于 62.5rem, 这样列就无法完整填充页面，即便宽度设置为 100%。但是我们可以通过 CSS 来设置新的 max-width:
如果你想使用默认的 max-width, 但是背景颜色需要跨域整个页面，这时你在容器元素上使用 .row 类，并指定你需要的背景颜色:
Foundation 提供了 283 图标，你可以使用 CSS 来渲染她们：修改大小和颜色。
图标创建语法格式如下：
<i class="fi-name"></i>
语法中 name 部分为图标指定的名称。
要使用图标，你可以将图片的样式文件放置在页面头部 <head> 部分:
<link rel="stylesheet" href="http://statics.51coolma.cn/assets/foundation-icons/foundation-icons.css">
以上是W3Cschool在线教程使用的图标样式类，大家可以共用。
Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说，字体大小默认为 16px。对于移动设备的浏览器，字体默认大小为 12px。默认的字体为 "Helvetica Neue"， line-height 默认为 1.5。
这些设置是适用于 <body> 元素内的元素。
此外， <p> 元素与底部的外边距(margin-bottom) 为 1.25rem , line-height 为 1.6。
以下的 HTML 元素，Foundation 设置了独立的样式渲染它，不会采用浏览器默认样式。点击 "尝试一下" 查看在线实例。
| 元素 | 描述 | 在线实例 |
|---|---|---|
| <h1> - <h6> | h1 - h6 标题 | 尝试一下 |
| <a> | 浅蓝色的链接，鼠标移动到链接会有下划线 | 尝试一下 |
| <small> | 浅灰色的副标题文本 | 尝试一下 |
| <blockquote> | 引用内容模块 | 尝试一下 |
| <strong> | 加粗文本 | 尝试一下 |
| <em> | 斜体 | 尝试一下 |
| <abbr> | 指定单词的缩写，使用该元素文本出现虚线下划线，鼠标移动上去会有提示信息 | 尝试一下 |
| <kbd> | 接收键盘输入指令: CTRL + P | 尝试一下 |
| <hr> | 水平线 | 尝试一下 |
| <code> | 代码片段 | 尝试一下 |
| <ul> | 无序列表 | 尝试一下 |
| <ol> | 有序列表 | 尝试一下 |
| <dl> | 描述性列表 | 尝试一下 |
使用 CSS 类来修改文本的对齐方式：
| 类 | 描述 | 实例 |
|---|---|---|
| .text-left | 左对齐文本 | 尝试一下 |
| .text-right | 右对齐文本 | 尝试一下 |
| .text-center | 居中 | 尝试一下 |
| .text-justify | 两端对齐 | 尝试一下 |
使用 CSS 类来修改文本的不同尺寸屏幕的对齐方式：
| 类 | 描述 | 实例 |
|---|---|---|
| 左对齐 | ||
| .small-text-left | 所有尺寸屏幕左对齐 | 尝试一下 |
| .small-only-text-left | 小尺寸屏幕左对齐(宽度小于 40em ) | 尝试一下 |
| .medium-text-left | 宽度大于 40.0625em 尺寸屏幕左对齐 | 尝试一下 |
| .medium-only-text-left | 宽度在 40.0625em 到 64em 尺寸的屏幕左对齐 | 尝试一下 |
| .large-text-left | 宽度大于 64.0625em 尺寸屏幕左对齐 | 尝试一下 |
| .large-only-text-left | 宽度在 64.0625em 到 90em 尺寸的屏幕左对齐 | 尝试一下 |
| .xlarge-text-left | 宽度大于 90.0625em 尺寸屏幕左对齐 | 尝试一下 |
| .xlarge-only-text-left | 宽度在 90.0625em 到 120em 尺寸的屏幕左对齐 | 尝试一下 |
| .xxlarge-text-left | 宽度大于 120em 尺寸屏幕左对齐 | 尝试一下 |
| 右对齐 | ||
| .small-text-right | 所有尺寸屏幕右对齐 | 尝试一下 |
| .small-only-text-right | 小尺寸屏幕右对齐(宽度小于 40em ) | 尝试一下 |
| .medium-text-right | 宽度大于 40.0625em 尺寸屏幕右对齐 | 尝试一下 |
| .medium-only-text-right | 宽度在 40.0625em 到 64em 尺寸的屏幕右对齐 | 尝试一下 |
| .large-text-right | 宽度大于 64.0625em 尺寸屏幕右对齐 | 尝试一下 |
| .large-only-text-right | 宽度在 64.0625em 到 90em 尺寸的屏幕右对齐 | 尝试一下 |
| .xlarge-text-right | 宽度大于 90.0625em 尺寸屏幕右对齐 | 尝试一下 |
| .xlarge-only-text-right | 宽度在 90.0625em 到 120em 尺寸的屏幕右对齐 | 尝试一下 |
| .xxlarge-text-right | 宽度大于 120em 尺寸屏幕右对齐 | 尝试一下 |
| 居中对齐 | ||
| .small-text-center | 所有尺寸屏幕居中对齐 | 尝试一下 |
| .small-only-text-center | 小尺寸屏幕居中对齐(宽度小于 40em ) | 尝试一下 |
| .medium-text-center | 宽度大于 40.0625em 尺寸屏幕居中对齐 | 尝试一下 |
| .medium-only-text-center | 宽度在 40.0625em 到 64em 尺寸的屏幕居中对齐 | 尝试一下 |
| .large-text-center | 宽度大于 64.0625em 尺寸屏幕居中对齐 | 尝试一下 |
| .large-only-text-center | 宽度在 64.0625em 到 90em 尺寸的屏幕居中对齐 | 尝试一下 |
| .xlarge-text-center | 宽度大于 90.0625em 尺寸屏幕居中对齐 | 尝试一下 |
| .xlarge-only-text-center | 宽度在 90.0625em 到 120em 尺寸的屏幕居中对齐 | 尝试一下 |
| .xxlarge-text-center | 宽度大于 120em 尺寸屏幕居中对齐 | 尝试一下 |
| 两端对齐 | ||
| .small-text-justify | 所有尺寸屏幕都两端对齐 | 尝试一下 |
| .small-only-text-justify | 小尺寸屏幕两端对齐(宽度小于 40em ) | 尝试一下 |
| .medium-text-justify | 宽度大于 40.0625em 尺寸屏幕两端对齐 | 尝试一下 |
| .medium-only-text-justify | 宽度在 40.0625em 到 64em 尺寸的屏幕两端对齐 | 尝试一下 |
| .large-text-justify | 宽度大于 64.0625em 尺寸屏幕两端对齐 | 尝试一下 |
| .large-only-text-justify | 宽度在 64.0625em 到 90em 尺寸的屏幕两端对齐 | 尝试一下 |
| .xlarge-text-justify | 宽度大于 90.0625em 尺寸屏幕两端对齐 | 尝试一下 |
| .xlarge-only-text-justify | 宽度在 90.0625em 到 120em 尺寸的屏幕两端对齐 | 尝试一下 |
| .xxlarge-text-justify | 宽度大于 120em 尺寸屏幕两端对齐 | 尝试一下 |
| 类 | 描述 | 实例 |
|---|---|---|
| .left | 元素向左浮动 | 尝试一下 |
| .right | 元素向右浮动 | 尝试一下 |
| .clearfix | 清除浮动 - 必须添加在浮动元素的父元素上 | |
| .hide | 隐藏元素 (CSS display: none) | 尝试一下 |
| .list-inline | 将所有元素设置在同一行 | 尝试一下 |
| .lead | 让 <p> 元素更突出 | 尝试一下 |
| .subheader | 设置浅色的 <h1> - <h6> 元素 | 尝试一下 |
以下类会根据设备(屏幕尺寸)来显示元素。
| 类 | 描述 |
|---|---|
| .show-for-small-only | 只在小型设备上显示元素 (屏幕宽度小于 40.0625em ) |
| .show-for-medium-up | 在中型及以上设备上显示元素 (屏幕宽度大于 40.0625em) |
| .show-for-medium-only | 只在中型设备上显示元素 (屏幕宽度在 40.0625em 到 64.0625em 之间) |
| .show-for-large-up | 在大型及以上设备上显示元素 (屏幕宽度大于 64.0625em) |
| .show-for-large-only | 只在大型设备上显示元素 (屏幕宽度在 64.0625em 到 90.0625em 之间) |
| .show-for-xlarge-up | 在更大型及以上设备上显示元素 (屏幕宽度大于 90.0625em) |
| .show-for-xlarge-only | 只在更大型及以上设备上显示元素 (屏幕宽度在 90.0625em 到 120.0625em之间) |
| .show-for-xxlarge-up | 在超大型及以上设备上显示元素 (屏幕宽度大于 120.0625em) |
以下实例演示了以上所有 .show- 类的可见性。
<p class="show-for-small-only">你在小型设备上。</p><p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p><p class="show-for-medium-only">你在中型设备上。</p><p class="show-for-large-up">你在大型、更大型、超大型的设备上</p><p class="show-for-large-only">你在大型设备上。</p><p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p><p class="show-for-xlarge-only">你在更大型设备上。</p><p class="show-for-xxlarge-up">你在超大型设备上。</p>
以下类会根据设备(屏幕尺寸)来隐藏元素。
| 类 | 描述 |
|---|---|
| .hide-for-small-only | 只在小型设备上隐藏元素 (屏幕宽度小于 40.0625em ) |
| .hide-for-medium-up | 在中型及以上设备上隐藏元素 (屏幕宽度大于 40.0625em) |
| .hide-for-medium-only | 只在中型设备上隐藏元素 (屏幕宽度在 40.0625em 到 64.0625em 之间) |
| .hide-for-large-up | 在大型及以上设备上隐藏元素 (屏幕宽度大于 64.0625em) |
| .hide-for-large-only | 只在大型设备上隐藏元素 (屏幕宽度在 64.0625em 到 90.0625em 之间) |
| .hide-for-xlarge-up | 在更大型及以上设备上隐藏元素 (屏幕宽度大于 90.0625em) |
| .hide-for-xlarge-only | 只在更大型及以上设备上隐藏元素 (屏幕宽度在 90.0625em 到 120.0625em之间) |
| .hide-for-xxlarge-up | 在超大型及以上设备上隐藏元素 (屏幕宽度大于 120.0625em) |
<p class="hide-for-small-only">你不在小型设备上。</p><p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p><p class="hide-for-medium-only">你不在中型设备上。</p><p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p><p class="hide-for-large-only">你不在大型设备上。</p><p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p><p class="hide-for-xlarge-only">你不在更大型设备上。</p><p class="hide-for-xxlarge-up">你不在超大型设备上。</p>
以下类会根据设备(屏幕尺寸)来隐藏元素。
我们可以设置元素在不同方向是是否显示或隐藏。笔记本等桌面设备一般是横向的，但是手机和平板设备可以是横向或纵向，我们可以根据用户手机拿的方向来设置元素隐藏与显示：
| 类 | 描述 |
|---|---|
| .show-for-landscape | 在横向时显示元素（纵向隐藏） |
| .show-for-portrait | 在纵向时显示元素（横向隐藏） |
下面实例根据使用的方向显示文本内容：
你可以根据设备是否支持触摸来显示与隐藏元素。
| 类 | 描述 |
|---|---|
| .show-for-touch | 在支持触屏的设备上显示(不支持的设备上隐藏) |
| .hide-for-touch | 在支持触屏的设备上隐藏(不支持的设备上显示) |
下面实例根据设备是否支持触摸来显示文本内容：
Foundation 网格系统为 12 列。
如果你不需要 12 列，你可以合并一些列，创建一些更大宽度的列。
Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上，可能是三列，小屏幕尺寸就可能是三个单列，按顺序排列。
Foundation 网格系统有三个列：
.small (手机端).medium (平板设备).large (电脑设备：笔记本，台式机)以上类可以结合使用，创建更灵活的布局
以下是基本的 Foundation 网格结构实例:
首先，创建一行 (<div class="row">)。 这是一个水平的垂直列。然后添加列的数量说明 small-num, medium-num 及 large-num 类。注意：列的数量 num 加起来必须等于 12 :
实例中，第一行的 <div> 类为 .small-12, 这会创建 12 列（100%宽度）。
第二行创建了两个列， .small-4 的宽度为33.3% ，.small-8 的宽度为 66.6%。
第三行我们添加了额外的两个列 (.large-3 和 .large-9)。这意味着如果在大屏幕尺寸下，列就会变为 25% (.large-3) 和 75% (.large-9)的比例。同时我们也指定了小屏幕上列的比例 33% (.small-4) 和 66% (.small-8) 。这种组合的方式对于不同屏幕显示效果是非常有帮助的。
下表总结了 Foundation 网格系统在多个设备上的说明：
| 小型设备 Phones (<40.0625em (640px)) | 中等设备 Tablets (>=40.0625em (640px)) | 大设备 Laptops & Desktops (>=64.0625em (1025px)) | |
|---|---|---|---|
| 网格行为 | 一直是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 |
| 类前缀 | .small-* | .medium-* | .large-* |
| 类的数量 | 12 | 12 | 12 |
| 可内嵌 | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes |
网格最大(.row) 宽度为 62.5rem。在宽屏上，当宽度大于 62.5rem, 列不会跨越页面的宽度， 即使宽度设定为 100%。但你可以通过 CSS 重新设置 max-width:
如果你使用默认的 max-width, 但希望背景颜色跨越整个页面宽度，你可以使用 .row 包裹整个容器，并指定你需要的背景颜色:
以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。
| 提示: .small|medium|large-* 类中的数字指定了跨越的列数。所以， .small-1 跨越 1 列, .small-4 跨越 4 列, .small-6 跨越 6 列 (50% 宽度) 等。注意: 要保证数列加起来是 12 列! |
|---|
假设我们在小型设备上有一个简单的网格布局，两列，宽度比例为 25% 和 75%。
提示: 小型设备的定义是屏幕小于 40.0625em。
小型设备上我们使用 .small-* 类。
<div class="small-3 columns">....</div><div class="small-9 columns">....</div>
以下实例设置了两个列，比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码):.small in them and use those".
| 注意: 要保证数列加起来是 12 列! |
|---|
如果需要设置 33.3%/66.6% 的比例，你可以使用 .small-4 和 .small-8:
上一章节我们介绍了小型设备上我们使用 .small-* 类来设置，网格比例为 25%/75%：
<div class="small-3 columns">....</div><div class="small-9 columns">....</div>
在中型设备上我们推荐的比例为 50%/50%。
提示: 中型设备的屏幕尺寸定义在 40.0625em 到 64.0624em 之间。
中型设备上使用 .medium-* 类。
现在我们在中型设备上添加两列：
<div class="small-3 medium-6 columns">....</div><div class="small-9 medium-6 columns">....</div>
以上实例设置了两个列，比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码):
小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)。但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6) 。
| 注意: 要保证数列加起来是 12 列! |
|---|
以下实例中我们指定了 .medium-6 类 (不是 .small-*)。这表明在中型或大型设备上比例为 50%/50%。但在小型设备上会水平堆叠 (100% 宽度):
上一章节我们介绍了中型设备和小型设备的网格布局，小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)，但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6)：
<div class="small-3 medium-6 columns">....</div><div class="small-9 medium-6 columns">....</div>
在大型设备上我们推荐的比例为 33%/66%。
提示: 大型设备的屏幕尺寸定义大于 64.0625em。
大型设备上使用 .large-* 类。
现在我们在大型设备上添加两列：
<div class="small-3 medium-6 large-4 columns">....</div><div class="small-9 medium-6 large-8 columns">....</div>
.small-3 和 .small-9).medium-6 和 .medium-6).large-4 和 .large-8) | 注意: 要保证数列加起来是 12 列! |
|---|
以下实例中我们指定了 .large-6 类 (不是 .medium-* 和 .small-*)。这表明在大型设备上比例为 50%/50%。但在中型或小型设备上会水平堆叠 (100% 宽度):
块状网格用于均分页面内容：例如一行内要显示四张图片，不管什么屏幕下都需要均分宽度。
可以使用 <ul> 元素加上 .small|medium|large-block-grid-num 类来创建块状网格。num 用于指定均分是数量：
另一个实例，使用段落：
通过添加多个网格块类可以设置不同尺寸屏幕显示不同的块数量:
以下我们收集了一些网格常用的实例。
该实例演示了如何创建三个均等列(33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠：
该实例演示了如何创建三个不均等列 (25%/50%/25%)，在中型和大型设备上显示三个列，在小型设备上自动堆叠：
该实例演示了如何创建两个均等列 (50%/50%)，在小型、中型和大型设备上列的比例始终为 50%/50%：
该实例演示了如何创建两个不均等列 (33.3%/66.6%)，在小型、中型和大型设备上列的比例始终为 33.3%/66.6%：
通过使用 .small|medium|large-push-* 和 .small|medium|large-pull-* 类来修改列的顺序:
你可以使用嵌套网格(列中插入列):
Foundation 网格系统有三个列: .small-* (手机), .medium-* (平板), 和 .large-* (桌面设备)。这些类可以动态组合使用，让布局更加灵活：
提示： 每个类都能放大，如果你希望小型和大型屏幕设备的宽度一样可以设置指定 .small-*。
列居中可以使用 .small-centered 类。中型和大型设备可以继承小型设备的居中，但你需要在大型设备上设置居中类.large-centered 。
可以使用 .large-offset-* (或 .small-offset-*) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:
如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动，并使用空白来填充剩下的列。
可选项 .end 类用于设置最后一列的元素向左边浮动:
网格 (.row) 最大尺寸（ max-width）为 62.5rem。在宽屏设备上尺寸可能大于 62.5rem, 这样列就无法完整填充页面，即便宽度设置为 100%。但是我们可以通过 CSS 来设置新的 max-width:
如果你想使用默认的 max-width, 但是背景颜色需要跨域整个页面，这时你在容器元素上使用 .row 类，并指定你需要的背景颜色:
Foundation 提供了 283 图标，你可以使用 CSS 来渲染她们：修改大小和颜色。
图标创建语法格式如下：
<i class="fi-name"></i>
语法中 name 部分为图标指定的名称。
要使用图标，你可以将图片的样式文件放置在页面头部 <head> 部分:
<link rel="stylesheet" href="http://statics.51coolma.cn/assets/foundation-icons/foundation-icons.css">
以上是W3Cschool在线教程使用的图标样式类，大家可以共用。
Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说，字体大小默认为 16px。对于移动设备的浏览器，字体默认大小为 12px。默认的字体为 "Helvetica Neue"， line-height 默认为 1.5。
这些设置是适用于 <body> 元素内的元素。
此外， <p> 元素与底部的外边距(margin-bottom) 为 1.25rem , line-height 为 1.6。
以下的 HTML 元素，Foundation 设置了独立的样式渲染它，不会采用浏览器默认样式。点击 "尝试一下" 查看在线实例。
| 元素 | 描述 | 在线实例 |
|---|---|---|
| <h1> - <h6> | h1 - h6 标题 | 尝试一下 |
| <a> | 浅蓝色的链接，鼠标移动到链接会有下划线 | 尝试一下 |
| <small> | 浅灰色的副标题文本 | 尝试一下 |
| <blockquote> | 引用内容模块 | 尝试一下 |
| <strong> | 加粗文本 | 尝试一下 |
| <em> | 斜体 | 尝试一下 |
| <abbr> | 指定单词的缩写，使用该元素文本出现虚线下划线，鼠标移动上去会有提示信息 | 尝试一下 |
| <kbd> | 接收键盘输入指令: CTRL + P | 尝试一下 |
| <hr> | 水平线 | 尝试一下 |
| <code> | 代码片段 | 尝试一下 |
| <ul> | 无序列表 | 尝试一下 |
| <ol> | 有序列表 | 尝试一下 |
| <dl> | 描述性列表 | 尝试一下 |
使用 CSS 类来修改文本的对齐方式：
| 类 | 描述 | 实例 |
|---|---|---|
| .text-left | 左对齐文本 | 尝试一下 |
| .text-right | 右对齐文本 | 尝试一下 |
| .text-center | 居中 | 尝试一下 |
| .text-justify | 两端对齐 | 尝试一下 |
使用 CSS 类来修改文本的不同尺寸屏幕的对齐方式：
| 类 | 描述 | 实例 |
|---|---|---|
| 左对齐 | ||
| .small-text-left | 所有尺寸屏幕左对齐 | 尝试一下 |
| .small-only-text-left | 小尺寸屏幕左对齐(宽度小于 40em ) | 尝试一下 |
| .medium-text-left | 宽度大于 40.0625em 尺寸屏幕左对齐 | 尝试一下 |
| .medium-only-text-left | 宽度在 40.0625em 到 64em 尺寸的屏幕左对齐 | 尝试一下 |
| .large-text-left | 宽度大于 64.0625em 尺寸屏幕左对齐 | 尝试一下 |
| .large-only-text-left | 宽度在 64.0625em 到 90em 尺寸的屏幕左对齐 | 尝试一下 |
| .xlarge-text-left | 宽度大于 90.0625em 尺寸屏幕左对齐 | 尝试一下 |
| .xlarge-only-text-left | 宽度在 90.0625em 到 120em 尺寸的屏幕左对齐 | 尝试一下 |
| .xxlarge-text-left | 宽度大于 120em 尺寸屏幕左对齐 | 尝试一下 |
| 右对齐 | ||
| .small-text-right | 所有尺寸屏幕右对齐 | 尝试一下 |
| .small-only-text-right | 小尺寸屏幕右对齐(宽度小于 40em ) | 尝试一下 |
| .medium-text-right | 宽度大于 40.0625em 尺寸屏幕右对齐 | 尝试一下 |
| .medium-only-text-right | 宽度在 40.0625em 到 64em 尺寸的屏幕右对齐 | 尝试一下 |
| .large-text-right | 宽度大于 64.0625em 尺寸屏幕右对齐 | 尝试一下 |
| .large-only-text-right | 宽度在 64.0625em 到 90em 尺寸的屏幕右对齐 | 尝试一下 |
| .xlarge-text-right | 宽度大于 90.0625em 尺寸屏幕右对齐 | 尝试一下 |
| .xlarge-only-text-right | 宽度在 90.0625em 到 120em 尺寸的屏幕右对齐 | 尝试一下 |
| .xxlarge-text-right | 宽度大于 120em 尺寸屏幕右对齐 | 尝试一下 |
| 居中对齐 | ||
| .small-text-center | 所有尺寸屏幕居中对齐 | 尝试一下 |
| .small-only-text-center | 小尺寸屏幕居中对齐(宽度小于 40em ) | 尝试一下 |
| .medium-text-center | 宽度大于 40.0625em 尺寸屏幕居中对齐 | 尝试一下 |
| .medium-only-text-center | 宽度在 40.0625em 到 64em 尺寸的屏幕居中对齐 | 尝试一下 |
| .large-text-center | 宽度大于 64.0625em 尺寸屏幕居中对齐 | 尝试一下 |
| .large-only-text-center | 宽度在 64.0625em 到 90em 尺寸的屏幕居中对齐 | 尝试一下 |
| .xlarge-text-center | 宽度大于 90.0625em 尺寸屏幕居中对齐 | 尝试一下 |
| .xlarge-only-text-center | 宽度在 90.0625em 到 120em 尺寸的屏幕居中对齐 | 尝试一下 |
| .xxlarge-text-center | 宽度大于 120em 尺寸屏幕居中对齐 | 尝试一下 |
| 两端对齐 | ||
| .small-text-justify | 所有尺寸屏幕都两端对齐 | 尝试一下 |
| .small-only-text-justify | 小尺寸屏幕两端对齐(宽度小于 40em ) | 尝试一下 |
| .medium-text-justify | 宽度大于 40.0625em 尺寸屏幕两端对齐 | 尝试一下 |
| .medium-only-text-justify | 宽度在 40.0625em 到 64em 尺寸的屏幕两端对齐 | 尝试一下 |
| .large-text-justify | 宽度大于 64.0625em 尺寸屏幕两端对齐 | 尝试一下 |
| .large-only-text-justify | 宽度在 64.0625em 到 90em 尺寸的屏幕两端对齐 | 尝试一下 |
| .xlarge-text-justify | 宽度大于 90.0625em 尺寸屏幕两端对齐 | 尝试一下 |
| .xlarge-only-text-justify | 宽度在 90.0625em 到 120em 尺寸的屏幕两端对齐 | 尝试一下 |
| .xxlarge-text-justify | 宽度大于 120em 尺寸屏幕两端对齐 | 尝试一下 |
| 类 | 描述 | 实例 |
|---|---|---|
| .left | 元素向左浮动 | 尝试一下 |
| .right | 元素向右浮动 | 尝试一下 |
| .clearfix | 清除浮动 - 必须添加在浮动元素的父元素上 | |
| .hide | 隐藏元素 (CSS display: none) | 尝试一下 |
| .list-inline | 将所有元素设置在同一行 | 尝试一下 |
| .lead | 让 <p> 元素更突出 | 尝试一下 |
| .subheader | 设置浅色的 <h1> - <h6> 元素 | 尝试一下 |
以下类会根据设备(屏幕尺寸)来显示元素。
| 类 | 描述 |
|---|---|
| .show-for-small-only | 只在小型设备上显示元素 (屏幕宽度小于 40.0625em ) |
| .show-for-medium-up | 在中型及以上设备上显示元素 (屏幕宽度大于 40.0625em) |
| .show-for-medium-only | 只在中型设备上显示元素 (屏幕宽度在 40.0625em 到 64.0625em 之间) |
| .show-for-large-up | 在大型及以上设备上显示元素 (屏幕宽度大于 64.0625em) |
| .show-for-large-only | 只在大型设备上显示元素 (屏幕宽度在 64.0625em 到 90.0625em 之间) |
| .show-for-xlarge-up | 在更大型及以上设备上显示元素 (屏幕宽度大于 90.0625em) |
| .show-for-xlarge-only | 只在更大型及以上设备上显示元素 (屏幕宽度在 90.0625em 到 120.0625em之间) |
| .show-for-xxlarge-up | 在超大型及以上设备上显示元素 (屏幕宽度大于 120.0625em) |
以下实例演示了以上所有 .show- 类的可见性。
<p class="show-for-small-only">你在小型设备上。</p><p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p><p class="show-for-medium-only">你在中型设备上。</p><p class="show-for-large-up">你在大型、更大型、超大型的设备上</p><p class="show-for-large-only">你在大型设备上。</p><p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p><p class="show-for-xlarge-only">你在更大型设备上。</p><p class="show-for-xxlarge-up">你在超大型设备上。</p>
以下类会根据设备(屏幕尺寸)来隐藏元素。
| 类 | 描述 |
|---|---|
| .hide-for-small-only | 只在小型设备上隐藏元素 (屏幕宽度小于 40.0625em ) |
| .hide-for-medium-up | 在中型及以上设备上隐藏元素 (屏幕宽度大于 40.0625em) |
| .hide-for-medium-only | 只在中型设备上隐藏元素 (屏幕宽度在 40.0625em 到 64.0625em 之间) |
| .hide-for-large-up | 在大型及以上设备上隐藏元素 (屏幕宽度大于 64.0625em) |
| .hide-for-large-only | 只在大型设备上隐藏元素 (屏幕宽度在 64.0625em 到 90.0625em 之间) |
| .hide-for-xlarge-up | 在更大型及以上设备上隐藏元素 (屏幕宽度大于 90.0625em) |
| .hide-for-xlarge-only | 只在更大型及以上设备上隐藏元素 (屏幕宽度在 90.0625em 到 120.0625em之间) |
| .hide-for-xxlarge-up | 在超大型及以上设备上隐藏元素 (屏幕宽度大于 120.0625em) |
<p class="hide-for-small-only">你不在小型设备上。</p><p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p><p class="hide-for-medium-only">你不在中型设备上。</p><p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p><p class="hide-for-large-only">你不在大型设备上。</p><p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p><p class="hide-for-xlarge-only">你不在更大型设备上。</p><p class="hide-for-xxlarge-up">你不在超大型设备上。</p>
以下类会根据设备(屏幕尺寸)来隐藏元素。
我们可以设置元素在不同方向是是否显示或隐藏。笔记本等桌面设备一般是横向的，但是手机和平板设备可以是横向或纵向，我们可以根据用户手机拿的方向来设置元素隐藏与显示：
| 类 | 描述 |
|---|---|
| .show-for-landscape | 在横向时显示元素（纵向隐藏） |
| .show-for-portrait | 在纵向时显示元素（横向隐藏） |
下面实例根据使用的方向显示文本内容：
你可以根据设备是否支持触摸来显示与隐藏元素。
| 类 | 描述 |
|---|---|
| .show-for-touch | 在支持触屏的设备上显示(不支持的设备上隐藏) |
| .hide-for-touch | 在支持触屏的设备上隐藏(不支持的设备上显示) |
下面实例根据设备是否支持触摸来显示文本内容：