Foundation

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

Foundation 图标参考手册

Foundation 图标参考手册Foundation 图标Foundation 提供了 283 图标,你可以使用 CSS 来渲染她们:修改大小和颜色。图标创建语法格式如下:语法中 name 部分为图标指定的名称。要使用图标,你可以将图片的样式文件放置在页面头部 部分:以上是菜鸟教程使用的图标样式类,大家可以共用。点我在新页面中查看图标。 »

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

Page 1 of 212