Foundation教程Foundation CSS 可见性 Foundation CSS 可见性 根据屏幕尺寸显示元素 以下类会根据设备(屏幕尺寸)来显示元素。 类 描述 .show-for-small-only 只在小型设备上显示元素 (屏幕宽度小于 40.0625em ) .sh... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation CSS 参考手册 Foundation CSS 参考手册 Foundation 默认设置 Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说，字体大小默认为 16px。对于移动设备的浏览器，字体默... AI君 5年前 (2020-03-20) 53℃ 0喜欢
Foundation教程Foundation 图标参考手册 Foundation 图标参考手册 Foundation 图标 Foundation 提供了 283 图标，你可以使用 CSS 来渲染她们：修改大小和颜色。 图标创建语法格式如下： <i class="fi-name"><... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 网格实例 Foundation 网格实例 以下我们收集了一些网格常用的实例。 三个均等列 该实例演示了如何创建三个均等列(33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠： 实例 <div clas... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 块状网格 Foundation 块状网格 块状网格用于均分页面内容：例如一行内要显示四张图片，不管什么屏幕下都需要均分宽度。 可以使用 <ul> 元素加上 .small|medium|large-block-grid-num 类来创建块状... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 网格 – 大型设备 Foundation 网格 – 大型设备 上一章节我们介绍了中型设备和小型设备的网格布局，小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)，但在中型设备上使用的比例为 50%/50% (.med... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 网格 – 中型设备 Foundation 网格 – 中型设备 上一章节我们介绍了小型设备上我们使用 .small-* 类来设置，网格比例为 25%/75%： <div class="small-3 columns">....</d... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 网格 – 小型设备 Foundation 网格 – 小型设备 假设我们在小型设备上有一个简单的网格布局，两列，宽度比例为 25% 和 75%。 提示: 小型设备的定义是屏幕小于 40.0625em。 小型设备上我们使用 .small-* 类。 &l... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 网格 – 水平堆叠 Foundation 网格 – 水平堆叠 以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。 实例 <div class="row"> <div cl... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 网格系统 Foundation 网格系统 Foundation 网格系统为 12 列。 如果你不需要 12 列，你可以合并一些列，创建一些更大宽度的列。 Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上，可... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 均衡器 Foundation 均衡器(Equalizer) 我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。 ... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation Joyride Foundation Joyride Joyride 是一个功能向导的 JavaScript 效果，创建实例如下： 实例 <!-- Elements that control the tour stops --><h3 ... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 模态框 Foundation 模态框 模态框是一个显示在页面头部的弹窗。 我们可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 提示框 Foundation 提示框 提示框在鼠标移动到元素上后显示： 我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。 注意: 滑块需要使用 JavaScript。所以你需要初... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 滑块 Foundation 滑块 Foundation 滑块允许用户通过拖动来选取区间值: 滑块可以通过使用 <div class="range-slider" data-slider> 创建。在<div> 内, 添加两个... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 开关 Foundation 开关 开关是在鼠标点击(手指敲击)下在 “On” 和 “Off” 状态下切换： 切换开关使用 <div class="switch"> 创建。<div&... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 输入框尺寸 Foundation 输入框尺寸 使用网格的列来设置输入框的大小，如 .large-6, .medium-6, 等。 更多网格系统知识，可以点击 网格系统 教程。 实例 <form> <div class="ro... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 表单 Foundation 表单 Foundation 表单控制会自动设置为全局样式: 所有 <textarea>, <select> 及 <input> 元素宽度都为 100%，且带有外边距、内边距、阴影喝鼠... AI君 5年前 (2020-03-20) 53℃ 0喜欢
Foundation教程Foundation Magellan Foundation 麦哲伦（Magellan）导航 如何创建麦哲伦导航 麦哲伦导航就是一个导航索引，创建方式如下: 实例 <div data-magellan-expedition="fixed"> <dl c... AI君 5年前 (2020-03-20) 52℃ 0喜欢
Foundation教程Foundation 滑动导航(Off-Canvas) Foundation 滑动导航(Off-Canvas) 侧边栏导航 Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了(点击菜单按钮菜单从左侧滑出): 创建滑动导航 创建滑动导航实例如下： 实例 <!-- 最外层d... AI君 5年前 (2020-03-20) 52℃ 0喜欢