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