创新互联Foundation教程：Foundation网格实例

Foundation 网格实例

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

创新互联建站专注于企业成都全网营销、网站重做改版、沁源网站定制设计、自适应品牌网站建设、H5响应式网站、成都商城网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为沁源等各大城市提供网站开发制作服务。

三个均等列

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

实例

<
div
class=
"row"
>

<
div
class=
"medium-4 columns"
style=
"background-color:yellow;"
>


<
p
>.medium-4
<
/p
>

<
/div
>

<
div
class=
"medium-4 columns"
style=
"background-color:pink;"
>


<
p
>.medium-4
<
/p
>

<
/div
>

<
div
class=
"medium-4 columns"
style=
"background-color:yellow;"
>


<
p
>.medium-4
<
/p
>

<
/div
>

<
/div
>

尝试一下 »

三个不均等列

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

实例

<
div
class=
"row"
>

<
div
class=
"medium-3 columns"
style=
"background-color:yellow;"
>


<
p
>.medium-3
<
/p
>

<
/div
>

<
div
class=
"medium-6 columns"
style=
"background-color:pink;"
>


<
p
>.medium-6
<
/p
>

<
/div
>

<
div
class=
"medium-3 columns"
style=
"background-color:yellow;"
>


<
p
>.medium-3
<
/p
>

<
/div
>

<
/div
>

尝试一下 »

两个均等列

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

实例

<
div
class=
"row"
>


<
div
class=
"small-6 columns"
style=
"background-color:yellow;"
>


<
p
>.small-6
<
/p
>


<
/div
>


<
div
class=
"small-6 columns"
style=
"background-color:pink;"
>


<
p
>.small-6
<
/p
>


<
/div
>

<
/div
>

尝试一下 »

两个不均等列

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

实例

<
div
class=
"row"
>


<
div
class=
"small-8 columns"
style=
"background-color:yellow;"
>


<
p
>.small-8
<
/p
>


<
/div
>


<
div
class=
"small-4 columns"
style=
"background-color:pink;"
>


<
p
>.small-4
<
/p
>


<
/div
>

<
/div
>

尝试一下 »

修改列的顺序

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

实例

<
div
class=
"row"
>


<
div
class=
"small-4 small-8-push columns"
style=
"background-color:yellow;"
>


<
p
>.small-4 .small-8-push
<
/p
>


<
/div
>


<
div
class=
"small-8 small-4-pull columns"
style=
"background-color:pink;"
>


<
p
>.small-8 .small-4-pull
<
/p
>


<
/div
>

<
/div
>

尝试一下 »

嵌套列

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

实例

<
div
class=
"row"
>

<
div
class=
"small-8 columns"
>.small-8


<
div
class=
"row"
>


<
div
class=
"small-8 columns"
>.small-8 Nested


<
div
class=
"row"
>


<
div
class=
"small-8 columns"
>.small-8 Nested Again
<
/div
>


<
div
class=
"small-4 columns"
>.small-4
<
/div
>


<
/div
>


<
/div
>


<
div
class=
"small-4 columns"
>.small-4
<
/div
>


<
/div
>

<
/div
>

<
div
class=
"small-4 columns"
>.small-4
<
/div
>

<
/div
>

尝试一下 »

混合：手机、桌面设备

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

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

实例

<
div
class=
"row"
>


<
div
class=
"small-6 large-8 columns"
>.small-6 .large-8
<
/div
>


<
div
class=
"small-6 large-4 columns"
>.small-6 .large-4
<
/div
>

<
/div
>

<
div
class=
"row"
>


<
div
class=
"small-2 large-4 columns"
>.small-2 .large-2
<
/div
>


<
div
class=
"small-4 large-4 columns"
>.small-4 .large-2
<
/div
>

<
div
class=
"small-6 large-4 columns"
>.small-6 .large-2
<
/div
>

<
/div
>

<
div
class=
"row"
>


<
div
class=
"small-3 large-5 columns"
>.small-3 .large-5
<
/div
>


<
div
class=
"small-9 large-7 columns"
>.small-9 .large-7
<
/div
>

<
/div
>

尝试一下 »

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

实例

<
div
class=
"row"
>

<
div
class=
"medium-6 large-8 columns"
>.medium-6 .large-8
<
/div
>

<
div
class=
"medium-6 large-4 columns"
>.medium-6 .large-4
<
/div
>

<
/div
>

<
div
class=
"row"
>

<
div
class=
"small-4 medium-3 large-7 columns"
>.small-4 .medium-3 .large-7
<
/div
>

<
div
class=
"small-4 medium-6 large-3 columns"
>.small-4 .medium-6 .large-3
<
/div
>

<
div
class=
"small-4 medium-3 large-2 columns"
>.small-4 .medium-3 .large-2
<
/div
>

<
/div
>

尝试一下 »

居中列

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

实例

<
div
class=
"row"
>

<
div
class=
"small-4 small-centered columns"
>small-4 small-centered
<
/div
>

<
/div
>

<
div
class=
"row"
>

<
div
class=
"small-6 small-centered columns"
>small-6 small-centered
<
/div
>

<
/div
>

<
div
class=
"row"
>

<
div
class=
"small-6 large-centered columns"
>small-6 large-centered
<
/div
>

<
/div
>

<
div
class=
"row"
>

<
div
class=
"small-8 small-centered large-uncentered columns"
>small-8 small-centered large-uncentered
<
/div
>

<
/div
>

<
div
class=
"row"
>

<
div
class=
"small-10 small-centered columns"
>small-10 small-centered
<
/div
>

<
/div
>

尝试一下 »

列偏移量

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

实例

<
div
class=
"row"
>

<
div
class=
"large-1 columns"
>1
<
/div
>

<
div
class=
"large-11 columns"
>11
<
/div
>

<
/div
>

<
div
class=
"row"
>

<
div
class=
"large-1 columns"
>1
<
/div
>

<
div
class=
"large-10 large-offset-1 columns"
>10, offset 1
<
/div
>

<
/div
>

<
div
class=
"row"
>

<
div
class=
"large-1 columns"
>1
<
/div
>

<
div
class=
"large-9 large-offset-2 columns"
>9, offset 2
<
/div
>

<
/div
>

<
div
class=
"row"
>

<
div
class=
"large-1 columns"
>1
<
/div
>

<
div
class=
"large-8 large-offset-3 columns"
>8, offset 3
<
/div
>

<
/div
>

尝试一下 »

不完整列

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

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

实例

<
div
class=
"row"
>

<
div
class=
"medium-3 columns"
>.medium-3
<
/div
>

<
div
class=
"medium-3 columns"
>.medium-3
<
/div
>

<
div
class=
"medium-3 columns"
>.medium-3
<
/div
>

<
/div
>

<
div
class=
"row"
>

<
div
class=
"medium-3 columns"
>.medium-3
<
/div
>

<
div
class=
"medium-3 columns"
>.medium-3
<
/div
>

<
div
class=
"medium-3 columns end"
>.medium-3 .end
<
/div
>

<
/div
>

尝试一下 »

宽屏

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

实例

尝试一下 »

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

实例

<
div
style=
"background-color:coral;padding:25px;"
>

<
div
class=
"row"
>

<
div
class=
"small-6 columns"
style=
"background-color:yellow;"
>.small-6
<
/div
>

<
div
class=
"small-6 columns"
style=
"background-color:pink;"
>.small-6
<
/div
>

<
/div
>

<
/div
>

尝试一下 »

当前题目：创新互联Foundation教程：Foundation网格实例
网页链接：http://www.hantingmc.com/qtweb/news13/286113.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容