手册

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 参考手册

首页大前端 Foundation Foundation 中文手册

Foundation 块状网格

阅读22181

更新时间2022-04-14

Foundation 网格 - 大型设备

Foundation 网格实例

块状网格用于均分页面内容：例如一行内要显示四张图片，不管什么屏幕下都需要均分宽度。

可以使用 <ul> 元素加上 .small|medium|large-block-grid-num类来创建块状网格。num 用于指定均分是数量：

实例

<!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;">

<h2>Foundation 块状网格</h2>
<p>图片均分屏幕宽度:</p>
<ul class="small-block-grid-3">
  <li><img src="newyork.jpg" alt="New York" width="400" height="300"></li>
  <li><img src="paris.jpg" alt="Paris" width="400" height="300"></li>
  <li><img src="sanfran.jpg" alt="San Francisco" width="400" height="300"></li>
</ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

另一个实例，使用段落：

实例

<!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;">

<h2>Foundation 块状网格</h2>
<p>均分段落:</p>
<ul class="small-block-grid-3">
  <li><p>Just a Simple Example Text...</p></li>
  <li><p>Just a Simple Example Text...</p></li>
  <li><p>Just a Simple Example Text...</p></li>
</ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

不同尺寸屏幕显示不同数量

通过添加多个网格块类可以设置不同尺寸屏幕显示不同的块数量:

实例

<!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;">

<h2>Foundation 块状网格</h2>
<p>通过添加多个块类，在不同屏幕指定不同是均分数量:</p>
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
  <li><img src="newyork.jpg" alt="New York" width="400" height="300"></li>
  <li><img src="paris.jpg" alt="Paris" width="400" height="300"></li>
  <li><img src="sanfran.jpg" alt="San Francisco" width="400" height="300"></li>
  <li><img src="newyork.jpg" alt="New York" width="400" height="300"></li>
</ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Foundation 网格 - 大型设备

Foundation 网格实例