Foundation 滑动导航(Off-Canvas)侧边栏导航Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了(点击菜单按钮菜单从左侧滑出):创建滑动导航创建滑动导航实例如下：实例<!-- 最外层div：页面布局 --><div class="... 阅读全文>>

Foundation 麦哲伦（Magellan）导航如何创建麦哲伦导航麦哲伦导航就是一个导航索引，创建方式如下:实例 <div data-magellan-expedition="fixed">  <dl class="sub-nav">&nb... 阅读全文>>

Foundation 表单Foundation 表单控制会自动设置为全局样式:所有 <textarea>, <select> 及 <input> 元素宽度都为 100%，且带有外边距、内边距、阴影和鼠标移动效果。实例<form>&n... 阅读全文>>

Foundation 输入框尺寸使用网格的列来设置输入框的大小，如 .large-6, .medium-6, 等。更多网格系统知识，可以点击 网格系统 教程。实例 <form>  <div class="row">  &n... 阅读全文>>

Foundation 开关开关是在鼠标点击(手指敲击)下在 "On" 和 "Off" 状态下切换：切换开关使用 <div class="switch"> 创建。<div> 内添加带有唯一 id 的 <input type="checkbox">... 阅读全文>>

Foundation 滑块Foundation 滑块允许用户通过拖动来选取区间值:滑块可以通过使用 <div class="range-slider" data-slider> 创建。在<div> 内, 添加两个 <span> 元素: <... 阅读全文>>

Foundation 提示框提示框在鼠标移动到元素上后显示：我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。 注意: 滑块需要使用 JavaScript。所以你需要初始化Foundation JS:实例<s... 阅读全文>>

Foundation 模态框模态框是一个显示在页面头部的弹窗。我们可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-... 阅读全文>>

Foundation JoyrideJoyride 是一个功能向导的 JavaScript 效果，创建实例如下：实例<!-- Elements that control the tour stops --><h3 id="first">First stop... 阅读全文>>

Foundation 均衡器(Equalizer)我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。注意: 滑块需要使用 JavaScript。... 阅读全文>>

Foundation 网格系统Foundation 网格系统为 12 列。如果你不需要 12 列，你可以合并一些列，创建一些更大宽度的列。Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上，可能是三列，小屏幕尺寸就可能是三个单列，按顺序排列... 阅读全文>>

Foundation 网格 - 水平堆叠以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。实例<div class="row">  <div class="medium-6columns... 阅读全文>>

Foundation 网格 - 小型设备假设我们在小型设备上有一个简单的网格布局，两列，宽度比例为 25% 和 75%。提示: 小型设备的定义是屏幕小于 40.0625em。小型设备上我们使用 .small-* 类。<div class="small-3 columns"&... 阅读全文>>

Foundation 网格 - 中型设备上一章节我们介绍了小型设备上我们使用 .small-* 类来设置，网格比例为 25%/75%：<div class="small-3 columns">....</div><div class="small-9... 阅读全文>>

Foundation 网格 - 大型设备上一章节我们介绍了中型设备和小型设备的网格布局，小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)，但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6)：<div ... 阅读全文>>

Foundation 块状网格块状网格用于均分页面内容：例如一行内要显示四张图片，不管什么屏幕下都需要均分宽度。可以使用 <ul> 元素加上 .small|medium|large-block-grid-num 类来创建块状网格。num 用于指定均分是数量：实例<... 阅读全文>>

Foundation 网格实例以下我们收集了一些网格常用的实例。三个均等列该实例演示了如何创建三个均等列(33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠：实例<div class="row">  <div c... 阅读全文>>

Foundation 图标参考手册Foundation 图标Foundation 提供了 283 图标，你可以使用 CSS 来渲染她们：修改大小和颜色。图标创建语法格式如下：<i class="fi-name"></i>语法中 name 部分为图标指定的名... 阅读全文>>

Foundation CSS 参考手册Foundation 默认设置Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说，字体大小默认为 16px。对于移动设备的浏览器，字体默认大小为 12px。默认的字体为 "Helve... 阅读全文>>

Foundation CSS 可见性根据屏幕尺寸显示元素以下类会根据设备(屏幕尺寸)来显示元素。 类 描述 .show-for-small-only 只在小型设备上显示元素 (屏幕宽度小于 40.0625em ) .show-fo... 阅读全文>>