Foundation 5 教程
Foundation 起步
Foundation 文本
Foundation 表格
Foundation 按钮
Foundation 按钮组
Foundation 图标
Foundation 标签
Foundation 提醒框
Foundation 进度条
Foundation 面板
Foundation 图片
Foundation 下拉菜单
Foundation 折叠列表
Foundation 列表
Foundation 选项卡
Foundation 分页
Foundation 价格表
Foundation 顶部导航栏
Foundation 侧边栏
Foundation 滑动导航(Off-Canvas)
Foundation Magellan
Foundation 表单
Foundation 输入框尺寸
Foundation 开关
Foundation 滑块
Foundation 提示框
Foundation 模态框
Foundation Joyride
Foundation 均衡器
Foundation 网格系统
Foundation 网格 - 水平堆叠
Foundation 网格 - 小型设备
Foundation 网格 - 中型设备
Foundation 网格 - 大型设备
Foundation 块状网格
Foundation 网格实例
Foundation 教程
Foundation 5 教程
Foundation 起步
Foundation 文本
Foundation 表格
Foundation 按钮
Foundation 按钮组
Foundation 图标
Foundation 标签
Foundation 提醒框
Foundation 进度条
Foundation 面板
Foundation 图片
Foundation 下拉菜单
Foundation 折叠列表
Foundation 列表
Foundation 选项卡
Foundation 分页
Foundation 价格表
Foundation 顶部导航栏
Foundation 侧边栏
Foundation 滑动导航(Off-Canvas)
Foundation Magellan
Foundation 表单
Foundation 输入框尺寸
Foundation 开关
Foundation 滑块
Foundation 提示框
Foundation 模态框
Foundation Joyride
Foundation 均衡器
Foundation 网格
Foundation 参考手册
Foundation 中文手册
以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。
实例
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <div class="row"> <h2>Foundation 网格</h2> <p>两列网格堆叠实例。</p> <p>重置浏览器窗口大小查看效果。</p> <div class="medium-6 columns" style="background-color:yellow;">php中文网</div> <div class="medium-6 columns" style="background-color:pink;">php中文网</div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
 |
提示: .small|medium|large-* 类中的数字指定了跨越的列数。所以， .small-1 跨越 1 列, .small-4 跨越 4 列,
.small-6 跨越 6 列 (50% 宽度) 等。注意: 要保证数列加起来是 12 列! |
|---|
相关视频
24小时阅读榜
精品课程
独孤九贱(2)_CSS视频教程
共22课时
24.3万人学习
独孤九贱(3)_JavaScript视频教程
共28课时
36.2万人学习
独孤九贱(4)_PHP视频教程
共89课时
133.1万人学习
热门下载
phpStudy 2018最新版
集成PHP7，16种组合，超全大合集
下载
vc9-vc14（32+64位）运行库合集（链接在下方）
phpStudy安装所需运行库集合下载
下载
php程序员工具箱完整版
程序员工具箱 v1.0 php集成环境
下载
SublimeText3汉化版
中文版，非常好用
下载
Notepad++ Windows版
Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。
下载
phpStudy V8.1（Win64位）（已支持php8）
Win64位，支持php多版本共存
下载