Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架
Foundation 用于开发响应式的用于 HTML, CSS and JavaScript 框架。
Foundation 是开发框架一个易用、强大而且灵活的用于框架,用于构建基于任何设备上的 Web 应用。
Foundation 是开发框架一个以移动优先的流行框架。
::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 起步
什么是用于 Foundation？
Foundation 是一个免费的前端框架，用于快速开发。开发框架
Foundation 包含了 HTML 和 CSS 的用于设计模板，提供多种 Web 上的开发框架 UI 组件，如表单、用于按钮、开发框架Tabs 等等。用于同时也提供了多种 JavaScript 插件。开发框架
Foundation 移动优先，用于可创建响应式网页。开发框架
Foundation 适用于初学者和专业人士。用于
Foundation 已使用在 Facebook(脸书)， eBay(易趣)， Samsung(三星)， Amazon(亚马逊)， Disney(迪士尼)等。
。。。云服务器提供商。。。。。
什么是响应式网页设计？
http:/ /
响应式Web设计(Responsive Web design)的理念是： 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
。。。。。。。。
Foundation CDN（推荐）：
<!-- css 文件 -->：<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
<!-- jQuery 库 -->：<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- JavaScript 文件 -->：<script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>
<!-- modernizr.js 文件 -->：<script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>
Foundation 使用 CDN 的优势：Foundation 使用 CDN 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性
为什么使用 modernizr?
Some Foundation 的组件使用了比较前前沿的 HTML5 和 CSS3 特性，但不是所有浏览器都支持。 Modernizr 是一个用于检测用户浏览器HTML5和CSS3特性的JavaScript库 - 让组件能在所有浏览器上正常运行。源码下载
。。。。。。。。
使用 Foundation 创建页面
1. 添加 HTML5 doctype
Foundation 使用 HTML 元素和 CSS 属性，所以需要添加 HTML5 doctype 文档类型声明。
同时我们可以设置文档的语言属性 lang 及字符编码
2. Foundation 5 移动优先
Foundation 5 为移动设备的响应式设计。框架的核心是移动优先。
为了确保页面可自由缩放可以在 <head> 元素中添加右边的 <meta> 标签：<meta name="viewport" content="width=device-width, initial-scale=1">
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
3. 初始化组件
一些 Foundation 组件是网站模板基于 jQuery 开发的，如：模态框、下拉菜单等。你可以使用以下脚本来初始化组件：
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
:::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 文本
Foundation 默认设置
Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说，字体默认为 16px。对于大多数移动端浏览器来说，字体默认为 12px。默认的字体为 "Helvetica Neue"， line-height 默认为 1.5。
以上默认的设置均是针对 <body> 元素。
。。。。。。。。。。
Foundation 文字排列设计
<h1> - <h6> Foundation 渲染的 HTML 标题 (<h1> 到 <h6>)
h1 (2.125rem - 2.75rem)
h2 (1.6875rem - 2.3125rem)
h3 (1.375rem - 1.6875rem)
h4 (1.125rem - 1.4375rem)
h5 (1.125rem)
h6 (1rem)
如果需要创建一个浅色的标题，可以在元素上添加 .subheader 类
。。。。。。。。。
<small> 在 Foundation 中， HTML <small> 元素用于创建一个浅色的副标题
。。。。。。。。。
<a> Foundation <a> 元素的样式，链接样式。
。。。。。。。。。
<abbr> Foundation <abbr> 元素的样式，添加的下划线为浅灰色虚线。
。。。。。。。。。
<blockquote> Foundation <blockquote> 元素的样式，定义块引用。
。。。。。。。。。
<dl> Foundation <dl> 元素的样式，定义一个描述性列表。
。。。。。。。。。
<code> Foundation <code> 元素的样式，添加文字背景为浅灰色有边框。
。。。。。。。。。
<kbd> Foundation <kbd> 元素的样式，接收键盘的输入指令。
。。。。。。。。。
<hr> Foundation <hr> 元素的样式，灰色的水平线。
::::::::::::::::::::::::::::::::::::::::::::::
Foundation 表格
Foundation 的 <table> 元素样式为灰色斑马条纹且包含四个边框。
。。。。。。。。。
响应式表格
使用 CSS 让表格支持响应式设计：在表格外添加 <div> 元素，样式为 overflow-x:hidden
::::::::::::::::::::::::::::::::::::::::::::::
Foundation 按钮
按钮样式
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 按钮组
按钮组，Foundation 可以在同一行内创建一系列的按钮。
可以使用 <ul> 元素并添加 .button-group 类来创建按钮组
。。。。。。。。
垂直按钮组
垂直按钮组使用 .stack 类来创建。注意，按钮会跨越父元素的整个宽度。.stack-for-small 类用于小尺寸的屏幕，按钮由水平排列变为垂直排列。
。。。。。。。。
均匀延展按钮组
.even-num 类用于在按钮组中均匀的分配按钮的宽度并跨越父元素 100% 宽度。
num 为按钮组中按钮的数量，从 1 到 8
。。。。。。。。
下拉菜单按钮
下拉菜单按钮可以让用户选取设定好的值
.dropdown 类创建一个下拉菜单按钮。
使用带有 data-dropdown="id" 属性的按钮或链接打开下拉菜单。
id 值需要与下拉菜单的内容的 (id) 匹配。
在 <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。
最后初始化 Foundation JS。
。。。。。。。。
分割按钮
我们也可以创建一个分割按钮的下拉菜单。只需要在按钮中添加 .split 类并使用 span 元素生成一个方向箭的按钮
:::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 图标
Foundation 提供了 283 个图标，你可以使用css来定义它的样式尺寸。
图标可用于文本，按钮，工具条，导航栏，表单等。
以下是 Foundation 图标的实例：
刷新按钮
检测图标
主页图标
。。。。。。。
图标语法
创建图标语法格式如右所示：<i class="fi-name"></i>
name 部分替换为图标的名字。
要使用图标我们需要在 <head> 部分添加图标的样式文件：<link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
。。。。。。。
工具条图标，我们可以使用 .icon-bar 类来创建一个指定数量的工具栏图标，图标描述使用 <label> 元素。.disabled 类可以让图标变成不可点击状态。
。。。。。。。
垂直工具条图标
.vertical 类用于创建一个垂直的工具栏
::::::::::::::::::::::::::::::::::::::::::
Foundation 标签
.label 类用于提供一些附加信息，设置标签的颜色: .secondary, .success, .info, .warning 或 .alert
。。。。。。。
圆角标签。.radius 与 .round 类可以为标签添加圆角。可以使用 CSS 来修改标签的大小
::::::::::::::::::::::::::::::::::::::::::
Foundation 提醒框
Foundation 可以很简单的创建一个提醒框
提醒框可以使用 .alert-box 类创建, 可以添加可选的颜色类： .secondary, .success, .info, .warning 或 .alert。提醒框的宽度为容器的 100%。
。。。。。。。
圆角提醒框。.radius 和 .round 类用于为提醒框添加圆角
。。。。。。。
关闭提醒框
要关闭提醒框，可以在连接或按钮元素上添加 class="close" 类，并初始化 Foundation JS
× (×) 是一个 HTML 字符实体表示一个关闭按钮的图标，而不是字母 "x"。
::::::::::::::::::::::::::::::::::::::::::::
Foundation 进度条
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 面板
Foundation 面板是一个灰色边框，内容含有内边距的模块。可以使用 .panel 类来创建
。。。。。。。
面板颜色，使用 .callout 类将面板颜色修改为浅蓝
。。。。。。。
自定义面板
可以使用 CSS 来自定义面板。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 图片
Foundation 提供了响应式的图片，可以创建缩略图和图片弹窗，Foundation 中图片默认是响应式的。
。。。。。。。
缩略图
在 <img> 元素外添加 <a> 元素将图片作为一个锚链接。
在 <a> 标签中添加 .th 类将图片设置为缩略图。 鼠标移动到上面会显示一个浅蓝色外框
。。。。。。。
圆角图片
我们可以在 .th 类添加 .radius 类来设置圆角缩略图
。。。。。。。
简洁的弹窗
Foundation 可以很容易实现图片弹窗。
要创建一个弹窗可以在 <ul> 元素上添加 .clearing-thumbs 类及 data-clearing 属性。在 <ul> 内添加图片列表。
注意: 图片弹窗需要 JavaScript。所以使用它前需要初始化 Foundation JS。
图片文本描述，在img里面可以添加 data-caption 属性到每个图片来设置图片的描述， 你可以在 data-caption 属性中添加 HTML 元素，如 data-caption="<h2>Pulpit Rock</h2>
。。。。。。
只显示一张缩略图
当你需要实现只显示一张缩略图时你可以在 <ul> 中使用 .clearing-feature 类并在<li> 中使用 .clearing-featured-img 类。
:::::::::::::::::::::::::::::::::::::::::::::::
Foundation 下拉菜单
Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值
.dropdown 类为按钮添加一个向下的箭头符号"图标。
使用按钮或链接的 data-dropdown="id" 属性来打开下拉菜单。
id 值需要与下拉菜单的内容 (id) 匹配。
在 <div>, <nav>, <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。
最后初始化 Foundation JS。
注意: 在小屏幕上，所有的下拉菜单的宽度是100%。
。。。。。。。。。
下拉菜单尺寸
使用 .tiny, .small, .medium, .large 或 .mega 来修改下拉菜单的宽度。
注意: 在小屏幕上，所有的下拉菜单的宽度是100%。
。。。。。。。。。
下拉菜单边距
可以使用 .content 类为下拉菜单添加内边距，没加就没有。
。。。。。。。。。
下拉菜单方向
默认情况下下拉菜单在底部，可以通过添加 data-options="align:left，right，top" 来修改其方向
。。。。。。。。。
下拉菜单触发条件
默认情况下，下拉菜单在点击按钮后显示。如果你需要在鼠标移动上去后显示，可以在按钮上使用 data-options="is_hover:true" 属性
。。。。。。。。
分割按钮
我们可以在按钮上添加 .split 类来设置一个分割效果的按钮，分割后会在 <span> 元素上生成一个方向向下的图标按钮
::::::::::::::::::::::::::::::::::::
Foundation 折叠列表
在你想隐藏部分内容的显示时，可以使用折叠列表。
。。。。。。。。
.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;" 属性
::::::::::::::::::::::::::::::::::::::::::
Foundation 列表
。。。。。。。
圆圈标识符，在 Foundation 中，无序列表 (<ul>) 的前缀符号为圆圈，使用 .circle 类
方块标识符，方块标识符前缀使用 .square 类
无标识符，如果你不需要标识符，你可以使用 .no-bullet 类
如果你需要添加一个水平的列表，可以在 <ul> 上添加 .inline-list 类
。。。。。。。
列表菜单
一些 Web 页面可能需要列表菜单。
在 HTML 中，列表菜单同无序列表 <ul> 来定义
::::::::::::::::::::::::::::::::::::::::::::::
Foundation 选项卡
选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。
选项卡使用 <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 来自定义选项卡淡入的效果
::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 分页
如果你的网页有很多内容，就需要使用分页功能。
分页 - 当前页。当前页面需要添加 .current 类
。。。。。。。
要创建一个基础的分页功能需要在 <ul> 元素上加上 .pagination 类，.pagination 类提供了分页链接
可以在 <li> 加上 .current 类来标注当前页面，如果需要设置某个分页不可点击需要使用 .unavailable 类
。。。。。。。
分页方向
在第一个和最后一个 <li> 元素上添加.arrow 类插入 HTML 实体符号 « 和 » 来创建分页方向符号
。。。。。。。
分页居中显示
我们可以在 <ul> 外层添加 <div> 元素，并在 <div> 上添加.pagination-centered 类来实现分页居中显示
。。。。。。。
面包屑导航
面包屑导航用于展示当前页面的导航结构。
在 <ul> 元素上添加 .breadcrumbs 类来实现面包屑导航。你可以在 <li> 上添加 .current 或 .unavailable 类设置当前页与不可点击效果:
。。。。。。。
子导航
在页面切换上，子导航是非常有用的。
在 <dl> 元素上添加 .sub-nav 类来创建子导航。在 <dt> 元素上添加标题，为选中的选项 <dd> 添加 .active 类
:::::::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 价格表
价格表可用于展示企业产品
ul.pricing-table - 定义价格表
li.title - 定义产品标题 (黑色背景)
li.price - 定义价格 (灰色背景字体大个项)
li.description - 定义产品描述 (如果需要)
li.bullet-item - 定义产品特点
li.ca-button - 按钮文本 (如 "Buy", "Join", "Sign Up", 等)
注意: 表格会 100% 填充容器的宽度，所有的项都有边框且是居中的。
。。。。。。。
价格表网格
:::::::::::::::::::::::::::::::::::::::::::::::
Foundation 顶部导航栏
顶部导航栏放在页面头部
使用 <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" 属性来设置导航栏在鼠标在点击后显示
。。。。。。。。
导航栏上的按钮及图标
你可以在导航栏上放置图标和按钮
。。。。。。。。
固定导航栏
导航栏可以固定在页面顶部。
页面滚动时导航栏在顶部是不会动的。
要固定导航栏只需要将导航栏放在 <div class="fixed"> 内即可
导航栏绝对定位
我们可以将导航栏放在 <div class="sticky"> 内来设置导航栏的绝对定位，当滚动条滚到到该区域时，该导航栏就像固定导航栏一样在顶部不动
当你使用 .sticky 类时，顶部导航栏在所有屏幕尺寸上将固定不动。如果你需要在指定屏幕上设定只需要在 <nav> 上添加 data-options="sticky_on: small|medium|large" 属性即可
::::::::::::::::::::::::::::::::::::::::::::
Foundation 侧边栏
侧边栏导航，Foundation 使用 <ul class="side-nav"> 创建侧边栏
。。。。。。。。
激活链接与分割线，已点击的链接可以在 <li> 上使用 .active 类来标识，使用 .divider 类添加水平分割线
。。。。。。。。
网格中的侧边栏，我们可以使用网格设计模式来设置侧边导航栏
::::::::::::::::::::::::::::::::::::::::::::::
Foundation 滑动导航(Off-Canvas)
侧边栏导航，Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了 (点击菜单按钮菜单从左侧滑出)
::::::::::::::::::::::::::::::::::::::::::::::
Foundation 麦哲伦（Magellan）导航
Magellan，麦哲伦导航就是一个导航索引，位置是固定的，会根据用户滚动当前展示的内容自动切换导航栏上的导航项
麦哲伦导航内边距，默认情况下，麦哲伦导航的 <div> 元素有 10px 的内边距。可以使用 CSS 移除它
在 <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 ，用户在滚动页面时导航就会根据当前显示的内容自动切换。
。。。。。。。。。
麦哲伦导航选项
使用 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 表单
Foundation 表单控制会自动设置为全局样式:
所有 <textarea>, <select> 及 <input> 元素宽度都为 100%，且带有外边距、内边距、阴影和鼠标移动效果。
。。。。。。。。。
标签，在表单中使用 <label> 元素来设置标签，标签可以添加 for 属性和 id 属性。用户在点击标签或输入域时获取输入框焦点，如果需要设置标签右对齐，可以使用 .right 类
。。。。。。。。。
Fieldset，Foundation 渲染 <fieldset> 元素的样式
。。。。。。。。。
错误状态
使用 .error 类来设置错误的标签、输入框、文本框样式，你需要使用 JavaScript 来更新用户输入的错误状态。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 输入框尺寸，使用网格的列来设置输入框的大小，如 .large-6, .medium-6, 等。
。。。。。。。。。
内联标签，如果你希望你的标签内容显示在左边（不是上边），可以将标签元素 label 放在输入框左边的不同的列上，并使用 .inline 类来设置垂直居中
。。。。。。。。。
前置和后置标签
你可以在 <div class="row collapse"> 中添加前置和后置标签，元素为： <element class="postfix"> 或 <element class="prefix">。可以使用网格系统来设置前置和后置标签的大小
。。。。。。。。。
前置和后置标签按钮，可以使用 <a> 元素添加 .button 类来设置前置和后置按钮
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 开关
开关是在鼠标点击(手指敲击)下在 "On" 和 "Off" 状态下切换
切换开关使用 <div class="switch"> 创建。 <div> 内添加带有唯一 id 的 <input type="checkbox"> ， <label> 元素的 for 属性需要与 <input type="checkbox"> 的 id 相匹配
。。。。。。。。。
开关大小
使用 .large(最大)， .small(小)，.tiny(最小) 类来设置开关大小
。。。。。。。。。
圆角切换开关
使用 .radius 和 .round 类来设置圆角切换开关
。。。。。。。。。
开关组
可以通过设置单选按钮(radio)来设置单个选项。注意: 注意各个选项的 name 属性必须一致
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 滑块
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 匹配
。。。。。。。。。
步长，默认情况下，滑块滑动的增加减少的数量为 "1"。可以通过添加 data-options="step: num;" 属性来修改步长值。
。。。。。。。。。
自定义区间，默认情况下，区间值在 "0" 到 "100"。可以通过添加 data-options start 和 end 来设置区间值
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 提示框
提示框在鼠标移动到元素上后显示
我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。
注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS
.has-tip 类可以加粗鼠标移动的文本
。。。。。。。。。。
提示框显示位置
默认情况下，提示框会出现在元素的底部。
可以使用 .tip-top, .tip-left, .tip-right or .tip-bottom (默认) 来设置提示框的位置。
注意: 在小尺寸的屏幕上，提示框的宽带是 100%。
。。。。。。。。。。
圆角提示框
.radius 和 .round 类用于设置圆角提示框
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 模态框
模态框是一个显示在页面头部的弹窗。
我们可以在容器元素上(如 <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;" 属性
:::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation Joyride
Joyride 是一个功能向导的 JavaScript 效果
最后，Joyride 需要使用 JavaScript 初始化它，代码为： $(document).foundation(joyride, start)
::::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 均衡器(Equalizer)
我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。
注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation 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 网格系统
Foundation 网格系统为 12 列。
如果你不需要 12 列，你可以合并一些列，创建一些更大宽度的列。
Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上，可能是三列，小屏幕尺寸就可能是三个单列，按顺序排列。
。。。。。
网格列
Foundation 网格系统有三个列：
.small (手机端)
.medium (平板设备)
.large (电脑设备：笔记本，台式机)
以上类可以结合使用，创建更灵活的布局
。。。。。。
.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 包裹整个容器，并指定你需要的背景颜色
::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 网格 - 水平堆叠
在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。
提示: .small|medium|large-* 类中的数字指定了跨越的列数。所以， .small-1 跨越 1 列, .small-4 跨越 4 列, .small-6 跨越 6 列 (50% 宽度) 等。
注意: 要保证数列加起来是 12 列!
::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 网格 - 小型设备
假设我们在小型设备上有一个简单的网格布局，两列，宽度比例为 25% 和 75%。
提示: 小型设备的定义是屏幕小于 40.0625em。
小型设备上我们使用 .small-* 类，网格比例为 25%/75%。
Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码： .small in them and use those"，注意: 要保证数列加起来是 12 列!
如果需要设置 33.3%/66.6% 的比例，你可以使用 .small-4 和 .small-8
:::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 网格 - 中型设备
在中型设备上我们推荐的比例为 50%/50%。
提示: 中型设备的屏幕尺寸定义在 40.0625em 到 64.0624em 之间。
中型设备上使用 .medium-* 类。
小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)。但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6) 。注意: 要保证数列加起来是 12 列!
。。。。。。。。。。
仅在中型设备上使用
.medium-6 类 (不是 .small-*)。这表明在中型或大型设备上比例为 50%/50%。但在小型设备上会水平堆叠 (100% 宽度)
:::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 网格 - 大型设备
中型设备和小型设备的网格布局，小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)，但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6)
在大型设备上我们推荐的比例为 33%/66%。
提示: 大型设备的屏幕尺寸定义大于 64.0625em。
大型设备上使用 .large-* 类。
。。。。。。。。。。
小型设备两个列的比例为 25%/75% (.small-3 和 .small-9)
中型设备两个列的比例为 50%/50% (.medium-6 和 .medium-6)
大型设备两个列的比例为 33%/66% (.large-4 和 .large-8)
注意: 要保证数列加起来是 12 列!
。。。。。。。。。。
仅在大型设备上使用
.large-6 类 (不是 .medium-* 和 .small-*)。这表明在大型设备上比例为 50%/50%。但在中型或小型设备上会水平堆叠 (100% 宽度)
:::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 块状网格
块状网格用于均分页面内容：例如一行内要显示四张图片，不管什么屏幕下都需要均分宽度。
可以使用 <ul> 元素加上 .small|medium|large-block-grid-num 类来创建块状网格。num 用于指定均分是数量
。。。。。。。。。
不同尺寸屏幕显示不同数量
通过添加多个网格块类可以设置不同尺寸屏幕显示不同的块数量
:::::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation 网格
以下收集了一些网格常用的实例。
。。。。。。。
三个均等列，创建三个均等列 (33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠，.medium-4 columns，.medium-4 columns，.medium-4 columns
。。。。。。。
三个不均等列，创建三个不均等列 (25%/50%/25%)，在中型和大型设备上显示三个列，在小型设备上自动堆叠，.medium-3 columns，.medium-6 columns，.medium-3 columns
。。。。。。。
两个均等列，创建两个均等列 (50%/50%)，在小型、中型和大型设备上列的比例始终为 50%/50%，.small-6 columns，.small-6 columns
。。。。。。。
两个不均等列，创建两个不均等列 (33.3%/66.6%)，在小型、中型和大型设备上列的比例始终为 33.3%/66.6%，.small-8 columns，.small-8 columns
。。。。。。。
修改列的顺序，通过使用 .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
::::::::::::::::::::::::::::::::::::::::::::::
Foundation 图标
Foundation 提供了 283 图标，你可以使用 CSS 来渲染她们：修改大小和颜色。
图标创建语法格式如右所示：<i class="fi-name"></i>
语法中 name 部分为图标指定的名称。要使用图标，你可以将图标的样式文件放置在页面头部 <head> 部分，样式文件如下所示：
<link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
:::::::::::::::::::::::::::::::::::::::::::::::
Foundation CSS
Foundation 默认设置
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> 元素
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Foundation CSS 可见性
根据屏幕尺寸显示元素
以下类会根据设备(屏幕尺寸)来显示元素。
类 描述
.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)
。。。。。。。。。。
根据屏幕尺寸隐藏元素
以下类会根据设备(屏幕尺寸)来隐藏元素。
类 描述
.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)
。。。。。。。。。。
根据屏幕方向显示元素
我们可以设置元素在不同方向是是否显示或隐藏。笔记本等桌面设备一般是横向的，但是手机和平板设备可以是横向或纵向，我们可以根据用户手机拿的方向来设置元素隐藏与显示
以下类会根据设备(屏幕尺寸)来隐藏元素。
类 描述
.show-for-landscape 在横向时显示元素（纵向隐藏）
.show-for-portrait 在纵向时显示元素（横向隐藏）
。。。。。。。。。。
触屏设备的显示与隐藏
你可以根据设备是否支持触摸来显示与隐藏元素。
类 描述
.show-for-touch 在支持触屏的设备上显示(不支持的设备上隐藏)
.hide-for-touch 在支持触屏的设备上隐藏(不支持的设备上显示)