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(迪士尼)等。 。。。IT技术网。。。。。 什么是响应式网页设计？ 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 在支持触屏的设备上隐藏(不支持的设备上显示) | 
喜欢
讨厌