Foundation 中文手册 /Foundation 网格实例

Foundation 网格实例

以下我们收集了一些网格常用的实例。


三个均等列

该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ,在中型和大型设备上显示三个列,在小型设备上自动堆叠:

实例

   Foundation 实例       

网格 - 三个均等列

该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ,在中型和大型设备上显示三个列,在小型设备上自动堆叠。

重置浏览器窗口大小查看效果。

.medium-4

.medium-4

.medium-4


运行实例 »

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


三个不均等列

该实例演示了如何创建三个不均等列 (25%/50%/25%),在中型和大型设备上显示三个列,在小型设备上自动堆叠:

实例

   Foundation 实例       

网格 - 三个不均等列

该实例演示了如何创建三个不均等列 (25%/50%/25%),在中型和大型设备上显示三个列,在小型设备上自动堆叠。

重置浏览器窗口大小查看效果。

.medium-3

.medium-6

.medium-3


运行实例 »

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


两个均等列

该实例演示了如何创建两个均等列 (50%/50%),在小型、中型和大型设备上列的比例始终为 50%/50%:

实例

   Foundation 实例       

网格 - 两个均等列

该实例演示了如何创建两个均等列 (50%/50%),在小型、中型和大型设备上列的比例始终为 50%/50%。

重置浏览器窗口大小查看效果。

.small-6

.small-6


运行实例 »

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


两个不均等列

该实例演示了如何创建两个不均等列 (33.3%/66.6%),在小型、中型和大型设备上列的比例始终为 33.3%/66.6%:

实例

   Foundation 实例       

网格 - 两个不均等列

该实例演示了如何创建两个不均等列 (33.3%/66.6%),在小型、中型和大型设备上列的比例始终为 33.3%/66.6%。

重置浏览器窗口大小查看效果。

.small-8

.small-4


运行实例 »

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


修改列的顺序

通过使用.small|medium|large-push-*.small|medium|large-pull-*类来修改列的顺序:

实例

   Foundation 实例       

网格 - Push 和 Pull

通过使用 .small|medium|large-push-*.small|medium|large-pull-* 类来修改列的顺序:

.small-8

.small-4

Switched:

.small-4 .small-8-push

.small-8 .small-4-pull


运行实例 »

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


嵌套列

你可以使用嵌套网格(列中插入列):

实例

   Foundation 实例       

网格 - 嵌套列

列中插入列:

.small-8
.small-8 Nested
.small-8 Nested Again
.small-4
.small-4
.small-4

运行实例 »

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


混合:手机、桌面设备

Foundation 网格系统有三个列:.small-*(手机),.medium-*(平板), 和.large-*(桌面设备)。这些类可以动态组合使用,让布局更加灵活:

提示:每个类都能放大,如果你希望小型和大型屏幕设备的宽度一样可以设置指定.small-*

实例

   Foundation 实例       

混合:手机、桌面设备

重置浏览器窗口大小查看效果。

.small-6 .large-8
.small-6 .large-4
.small-2 .large-2
.small-4 .large-2
.small-6 .large-2
.small-3 .large-5
.small-9 .large-7

运行实例 »

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


混合:手机、平板和桌面设备

实例

   Foundation 实例       

混合:手机、平板和桌面设备

重置浏览器窗口大小查看效果。

.medium-6 .large-8
.medium-6 .large-4
.small-4 .medium-3 .large-7
.small-4 .medium-6 .large-3
.small-4 .medium-3 .large-2

运行实例 »

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


居中列

列居中可以使用.small-centered类。中型和大型设备可以继承小型设备的居中,但你需要在大型设备上设置居中类.large-centered

实例

   Foundation 实例       

网格 - 居中列

列居中可以使用 .small-centered 类。中型和大型设备可以继承小型设备的居中,但你需要在大型设备上设置居中类.large-centered

重置浏览器窗口大小查看效果。

small-4 small-centered
small-6 small-centered
small-6 large-centered
small-8 small-centered large-uncentered
small-10 small-centered

运行实例 »

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


列偏移量

可以使用.large-offset-*(或.small-offset-*) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:

实例

   Foundation 实例       

网格 - 偏移量

可以使用 .large-offset-* (或 .small-offset-*) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:

1
11
1
10, offset 1
1
9, offset 2
1
8, offset 3

运行实例 »

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


不完整列

如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动,并使用空白来填充剩下的列。

可选项.end类用于设置最后一列的元素向左边浮动:

实例

   Foundation 实例       

不完整列

如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动,并使用空白来填充剩下的列。

可选项 .end 类用于设置最后一列的元素向左边浮动:

.medium-3
.medium-3
.medium-3
.medium-3
.medium-3
.medium-3 .end

运行实例 »

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


宽屏

网格 (.row) 最大尺寸( max-width)为 62.5rem。在宽屏设备上尺寸可能大于 62.5rem, 这样列就无法完整填充页面,即便宽度设置为 100%。但是我们可以通过 CSS 来设置新的 max-width:

实例

   Foundation 实例        

Foundation 网格

默认情况下,网格最大(.row) 宽度为 62.5rem。在宽屏上,当宽度大于 62.5rem, 列不会跨越页面的宽度, 即使宽度设定为 100%。但你可以通过 CSS 重新设置 max-width:


基本行 (max-width:62.5rem):

.small-6
.small-6

行的max-width为 100% :

.small-6
.small-6


运行实例 »

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

如果你想使用默认的 max-width, 但是背景颜色需要跨域整个页面,这时你在容器元素上使用.row类,并指定你需要的背景颜色:

实例

   Foundation 实例       

Foundation 网格

外层容器使用类 .row,并指定背景颜色跨越整个页面:

Default Row with a tomato color and padding:

.small-6
.small-6

Row with container:

.small-6
.small-6


运行实例 »

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