Foundation

Foundation 图标

Foundation 图标Foundation 提供了 283 个图标,你可以使用css来定义它的样式尺寸。图标可用于文本,按钮,工具条,导航栏,表单等。 »

Note

Foundation 表单

Foundation 表单Foundation 表单控制会自动设置为全局样式:所有 , 及 元素宽度都为 100%,且带有外边距、内边距、阴影和鼠标移动效果。用户在点击标签或输入域时获取输入框焦点:实例如果需要设置标签右对齐,可以使用 .right 类:实例FieldsetFoundation 渲染 元素的样式如下:实例错误状态使用 .error 类来设置错误的标签、输入框、文本框样式:实例... »

Foundation CSS 参考手册

Foundation CSS 参考手册 Foundation 默认设置 Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说,字体大小默认为 16px。对于移动设备的浏览器,字体默认大小为 12px。 默认的字体为 "Helvetica Neue", line-height 默认为 1.5。 这些设置是适用于 元素内的元素。 此外, 元素与... »

Foundation 标签

Foundation 标签.label 类用于提供一些附加信息:实例Example NewExample NewExample New以下类可以设置标签的颜色: .secondary, .success, .info, .warning 或 .alert:实例Default LabelSecondary LabelSuccess LabelInfo LabelSuccess LabelAlert ... »

Foundation 输入框尺寸

Foundation 输入框\b尺寸使用网格的列来设置输入框的大小,如 .large-6, .medium-6, 等。可以使用网格系统来设置前置和后置标签的大小:实例 前置和后置标签按钮可以使用 元素添加 .button 类来设置前置和后置按钮:实例 Go前置和后置标签圆角按钮实例 »

Foundation CSS 可见性

Foundation CSS 可见性根据屏幕尺寸显示元素以下类会根据设备来显示元素。触屏设备的显示与隐藏你可以根据设备是否支持触摸来显示与隐藏元素。类 描述 .show-for-touch 在支持触屏的设备上显示 .hide-for-touch 在支持触屏的设备上隐藏 下面实例根据设备是否支持触摸来显示文本内容:实例你的设备支持触屏。 »

Foundation 提醒框

Foundation 提醒框

Foundation 提醒框 Foundation 可以很简单的创建一个提醒框: 提醒框可以使用 .alert-box 类创建, 可以添加可选的类: .secondary, .success, .info, .warning 或 .alert: 实例   This is a default alert box.   This is a secondary alert box.   Success!... »

Foundation 开关

Foundation 开关 开关是在鼠标点击(手指敲击)下在 “On” 和 “Off” 状态下切换: 切换开关使用 创建。 内添加带有唯一 id 的 , 元素的 for 属性需要与 的 id 相匹配: 实例     开关大小 使用 .large, .small 或 .tiny 类来设置开关大小: 实例 ... ... ... ... 圆角切换开关 使... »

Foundation 进度条

Foundation 进度条

Foundation 进度条 Foundation 进度条可以作为程序处理的程度来显示: 我们可以在 元素中使用 .progress 类来创建进度条, .meter 类用于子元素()。我们可以在 元素中设置进度百分比,如下所示: 实例   进度条颜色 默认情况下,进度条颜色为蓝色。不同颜色的类为:.secondary, .success, 或 .alert: 实例         圆角进度条 .r... »

Foundation 滑块

Foundation 滑块 Foundation 滑块允许用户通过拖动来选取区间值: 滑块可以通过使用 创建。在 内, 添加两个 元素: 创建矩形滑块(蓝色背景), 是在滑块后的灰色横条,是滑块拖动区域。 注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS: 实例     $(document).ready(function() {    $(document... »

Foundation 面板

Foundation 面板

Foundation 面板 Foundation 面板是一个灰色边框,内容含有内边距的模块。可以使用 .panel 类来创建: 实例   标题   文本内容.. 面板颜色 使用 .callout 类将面板颜色修改为浅蓝: 实例   标题   文本内容.. 圆角面板 使用 .radius 类将面板设置为圆角: 实例   标题   文本内容.. 自定义面板 可以使用 CSS 来自定义面板,以下实例中我... »

Foundation 提示框

Foundation 提示框 提示框在鼠标移动到元素上后显示: 我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。 注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS: 实例 Hover over me! $(document).ready(function() {    $(document)... »

Foundation 图片

Foundation 图片

Foundation 图片 Foundation 提供了响应式的图片,可以创建缩略图和图片弹窗: 响应式图片 Foundation 中图片默认是响应式的。我们可以在实例页面重置浏览器大小来查看图片缩放效果。 圆角图片 我们可以在 .th 类添加 .radius 类来设置圆角缩略图: 实例   简洁的弹窗 Foundation 可以很容易实现图片弹窗。 要创建一个弹窗可以在 元素上添加 .clear... »

Foundation 模态框

Foundation 模态框 模态框是一个显示在页面头部的弹窗。 我们可以在容器元素上(如 <div id="myModal")使用唯一 ID,并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id="id" 属性阿里打开模态框。 id 必须与容器 id 一致(实例为 “myM... »

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 类的... »

Page 1 of 212