Foundation

Foundation 下拉菜单

Foundation 下拉菜单 Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值: 实例 Dropdown Button   Link 1   Link 2   Link 3 $(document).ready(function() {    $(document).foundation();}) 实例解析 .dropdown 类为按钮添加一个向下的箭头符号”图标。... »

Foundation Joyride

Foundation Joyride Joyride 是一个功能向导的 JavaScript 效果,创建实例如下: 实例 First stop! Second stop! <!-- The joyride: must be placed at the bottom of your page, but inside -->       First stop. The ride has b... »

Foundation 折叠列表

Foundation 折叠列表 在你想隐藏部分内容的显示时,可以使用折叠列表。 实例       Simple Collapsible          软件开发网 -- 学的不仅是技术,更是梦想!!!      $(document).ready(function() {    $(document).foundation();}) 实例解析 .accordion 类和 data-accordi... »

Foundation 均衡器(Equalizer)

Foundation 均衡器(Equalizer) 我们可以在容器元素添加 data-equalizer 属性,并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。 注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS: 实例       Lorem ipsum...        Sed... »

Foundation 列表

Foundation 列表在 HTML 中,无序列表 () 实例如下: List item List item List item List item结果: List item List item List item List item圆圈标识符在 Foundation 中,无序列表 () 的前缀符号为圆圈,使用 .circle 类,实例如下: List item ...方块标识符方块标... »

Foundation 网格系统

Foundation 网格系统

Foundation 网格系统 Foundation 网格系统为 12 列。 如果你不需要 12 列,你可以合并一些列,创建一些更大宽度的列。 Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上,可能是三列,小屏幕尺寸就可能是三个单列,按顺序排列。 网格列 Foundation 网格系统有三个列: .small (手机端) .medium (平板设备) .l... »

Foundation 选项卡

Foundation 选项卡选项卡导航可以很好的展示不同的内容,并可以对内容进行切换。每个选项卡上加上唯一的 ID, 并连接到列表项 ( 元素上,该 元素需要添加 .tabs-content 类,并初始化 Foundation JS。注意 .active 类会自动添加到当前选中的选项卡上:实例 Home Menu 1 Menu 2 Menu 3 HOME Home is where the h... »

Note

Foundation 网格 – 水平堆叠

Foundation 网格 - 水平堆叠以下实例创建了一个基本的网格系统,在 PC 和平板设备上它是水平平铺的,在手机等小型设备上它是水平堆叠的。实例菜鸟教程菜鸟教程提示: .small|medium|large-* 类中的数字指定了跨越的列数。所以, .small-1 跨越 1 列, .small-4 跨越 4 列, .small-6 跨越 6 列 等。注意: 要保证数列加起来是 12 列! »

Foundation5 教程

Foundation5 教程

Foundation5 教程 Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。 Foundation 是一个以移动优先的流行框架。 在线实例 软件开发网包含了上百个 Foundation 实例。 你可以直接使用我们的在线编辑器,并点击”提交运行... »

Foundation 分页

Foundation 分页 如果你的网页有很多内容,就需要使用分页功能。 要创建一个基础的分页功能需要在 元素上加上 .pagination 类: 实例   1   2   3   4   5 当前页面 可以在 加上 .current 类来标注当前页面: 实例   1   2   3   4   5 禁用分页 如果需要设置某个分页不可点击需要使用 .unavailable 类: 实例   1   ... »

Note

Foundation 网格 – 小型设备

Foundation 网格 – 小型设备 假设我们在小型设备上有一个简单的网格布局,两列,宽度比例为 25% 和 75%。 提示: 小型设备的定义是屏幕小于 40.0625em。 小型设备上我们使用 .small-* 类。 .... .... 以下实例设置了两个列,比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明,在大型设备上会继承 .small 类的... »

Note

Foundation 起步

Foundation 起步 什么是 Foundation? Foundation 是一个免费的前端框架,用于快速开发。 Foundation 包含了 HTML 和 CSS 的设计模板,提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。 Foundation 移动优先,可创建响应式网页。 Foundation 适用于初学者和专业人士。 F... »

Foundation 价格表

Foundation 价格表 价格表可用于展示企业产品: 实例   Basic   $19.99   Great for small business   24/7 Support   15GB Storage   1GB Bandwidth   Buy 实例解析 ul.pricing-table – 定义价格表 li.title – 定义产品标题 (黑色背景) li.pr... »

Note

Foundation 网格 – 中型设备

Foundation 网格 – 中型设备 上一章节我们介绍了小型设备上我们使用 .small-* 类来设置,网格比例为 25%/75%: .... .... 在中型设备上我们推荐的比例为 50%/50%。 提示: 中型设备的屏幕尺寸定义在 40.0625em 到 64.0624em 之间。 中型设备上使用 .medium-* 类。 现在我们在中型设备上添加两列: .... .... 以... »

Foundation 文本

Foundation 文本 Foundation 默认设置 Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说,字体默认为 16px。对于大多数移动端浏览器来说,字体默认为 12px。默认的字体为 "Helvetica Neue", line-height 默认为 1.5。 以上默认的设置均是针对 元素。 Foundation 文字排列设计 本... »

Foundation 顶部导航栏

Foundation 顶部导航栏 顶部导航栏放在页面头部: 实例                   WebSiteName           <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类,可以去除图标。       如果需要只显示图片,可以删除 "Menu" 文本 -->    Menu               Home       Page 1       P... »

Note

Foundation 网格 – 大型设备

Foundation 网格 – 大型设备 上一章节我们介绍了中型设备和小型设备的网格布局,小型设备上使用的比例为 25%/75% (.small-3 和 .small-9),但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6): .... .... 在大型设备上我们推荐的比例为 33%/66%。 提示: 大型设备的屏幕尺寸定义大于 64.0625e... »

Foundation 表格

Foundation 表格 Foundation 的 元素样式为灰色斑马条纹且包含四个边框: 实例             Firstname       Lastname       Email                   John       Doe       john@example.com               Mary       Moe       mary@examp... »

Foundation 侧边栏

Foundation 侧边栏 侧边栏导航 Foundation 使用 创建侧边栏: 实例   Link 1   Link 2   Link 3   Link 4 激活链接与分割线 已点击的链接可以在 上使用 .active 类来标识,使用 .divider 类添加水平分割线: 实例   Link 1   Link 2     Link 3   Link 4 网格中的侧边栏 我们可以使用网格设计模式... »

Foundation 块状网格

Foundation 块状网格 块状网格用于均分页面内容:例如一行内要显示四张图片,不管什么屏幕下都需要均分宽度。 可以使用 元素加上 .small|medium|large-block-grid-num 类来创建块状网格。num 用于指定均分是数量: 实例       另一个实例,使用段落: 实例   Just a Simple Example Text...   Just a Simple E... »

Note

Foundation 按钮

Foundation 按钮 按钮样式 Foundation 提供了 6 种按钮样式。 .button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为: .secondary, .success, .info, .warning 或 .alert: 实例 DefaultSecondarySuccessInfoWarningAlert 按钮类可以使用在 , , 或 元素: 实例 Link But... »

Foundation 滑动导航(Off-Canvas)

Foundation 滑动导航侧边栏导航Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了:创建滑动导航创建滑动导航实例如下:实例 Off-canvas Example Heading Link 1 Link 2 ... Lorem Ipsum .... »

Foundation 网格实例

Foundation 网格实例 以下我们收集了一些网格常用的实例。 三个均等列 该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ,在中型和大型设备上显示三个列,在小型设备上自动堆叠: 实例       .medium-4         .medium-4         .medium-4   三个不均等列 该实例演示了如何创建三个不均等列 (25%/50%/25%),在... »

Foundation 按钮组

Foundation 按钮组按钮组 Foundation 可以在同一行内创建一系列的按钮。 可以使用 元素并添加 .button-group 类来创建按钮组: 实例   Apple   Samsung   Sony 垂直按钮组 垂直按钮组使用 .stack 类来创建。注意,按钮会跨越父元素的整个宽度: 实例   Apple   Samsung   Sony .stack-for-small 类用于... »

Foundation 麦哲伦(Magellan)导航

Foundation 麦哲伦(Magellan)导航 如何创建麦哲伦导航 麦哲伦导航就是一个导航索引,创建方式如下: 实例       Page 1     Page 2   Page1 ... Page2 ... $(document).ready(function() {    $(document).foundation();}) 实例解析 在 元素上添加 data-magellan-exp... »

Page 1 of 212