Foundation 基礎(chǔ)
Foundation 教程
Foundation 安裝
Foundation 按鈕
Foundation 按鈕組
Foundation 標(biāo)簽
Foundation 表單
Foundation 表格
Foundation 側(cè)邊欄
Foundation 頂部導(dǎo)航欄
Foundation 分頁
Foundation 滑動(dòng)導(dǎo)航
Foundation 滑塊
Foundation 價(jià)格表
Foundation 進(jìn)度條
Foundation 均衡器(Equalizer)
Foundation 開關(guān)
Foundation 列表
Foundation 麥哲倫（Magellan）導(dǎo)航
Foundation Joyride
Foundation 面板
Foundation 模態(tài)框
Foundation 輸入框 尺寸
Foundation 提示框
Foundation 提醒框
Foundation 圖標(biāo)
Foundation 圖片
Foundation 文本
Foundation 下拉菜單
Foundation 選項(xiàng)卡
Foundation 折疊列表
Foundation 手冊(cè)
Foundation CSS 參考手冊(cè)
Foundation CSS 可見性
Foundation 圖標(biāo)參考手冊(cè)
Foundation 網(wǎng)格
Foundation 塊狀網(wǎng)格
Foundation 網(wǎng)格 - 大型設(shè)備
Foundation 網(wǎng)格 - 水平堆疊
Foundation 網(wǎng)格 - 小型設(shè)備
Foundation 網(wǎng)格 - 中型設(shè)備
Foundation 網(wǎng)格實(shí)例
Foundation 網(wǎng)格系統(tǒng)
?
This document uses PHP Chinese website manual Release
characters
Foundation 網(wǎng)格實(shí)例
三個(gè)均等列
該實(shí)例演示了如何創(chuàng)建三個(gè)均等列 (33.3%/33.3%/33.3%) ，在中型和大型設(shè)備上顯示三個(gè)列，在小型設(shè)備上自動(dòng)堆疊：
實(shí)例
?<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>
實(shí)例預(yù)覽 ?
三個(gè)不均等列
該實(shí)例演示了如何創(chuàng)建三個(gè)不均等列 (25%/50%/25%)，在中型和大型設(shè)備上顯示三個(gè)列，在小型設(shè)備上自動(dòng)堆疊：
實(shí)例
?<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>
實(shí)例預(yù)覽 ?
兩個(gè)均等列
該實(shí)例演示了如何創(chuàng)建兩個(gè)均等列 (50%/50%)，在小型、中型和大型設(shè)備上列的比例始終為 50%/50%：
實(shí)例
<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>
實(shí)例預(yù)覽 ?
兩個(gè)不均等列
該實(shí)例演示了如何創(chuàng)建兩個(gè)不均等列 (33.3%/66.6%)，在小型、中型和大型設(shè)備上列的比例始終為 33.3%/66.6%：
實(shí)例
<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>
實(shí)例預(yù)覽 ?
修改列的順序
通過使用 .small|medium|large-push-* 和 .small|medium|large-pull-* 類來修改列的順序:
實(shí)例
<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>
實(shí)例預(yù)覽 ?
嵌套列
你可以使用嵌套網(wǎng)格(列中插入列):
實(shí)例
?<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>
實(shí)例預(yù)覽 ?
混合：手機(jī)、桌面設(shè)備
Foundation 網(wǎng)格系統(tǒng)有三個(gè)列: .small-* (手機(jī)), .medium-* (平板), 和 .large-* (桌面設(shè)備)。這些類可以動(dòng)態(tài)組合使用，讓布局更加靈活：
提示： 每個(gè)類都能放大，如果你希望小型和大型屏幕設(shè)備的寬度一樣可以設(shè)置指定 .small-*。
實(shí)例
?<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>
實(shí)例預(yù)覽 ?
混合：手機(jī)、平板和桌面設(shè)備
實(shí)例
?<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>
實(shí)例預(yù)覽 ?
居中列
列居中可以使用 .small-centered 類。中型和大型設(shè)備可以繼承小型設(shè)備的居中，但你需要在大型設(shè)備上設(shè)置居中類.large-centered 。
實(shí)例
?<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>
實(shí)例預(yù)覽 ?
列偏移量
可以使用 .large-offset-* (或 .small-offset-*) 類設(shè)置列向右移。 左側(cè)外邊距的列數(shù)量使用 * 號(hào)控制:
實(shí)例
?<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>
實(shí)例預(yù)覽 ?
不完整列
如果一行中的列數(shù)量之和不是 12 , Foundation 將自動(dòng)將最后一列向右浮動(dòng)，并使用空白來填充剩下的列。
可選項(xiàng) ?.end 類用于設(shè)置最后一列的元素向左邊浮動(dòng):
實(shí)例
?<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>實(shí)例預(yù)覽 ?
寬屏
網(wǎng)格 (.row) 最大尺寸（ max-width）為 62.5rem。在寬屏設(shè)備上尺寸可能大于 62.5rem, 這樣列就無法完整填充頁面，即便寬度設(shè)置為 100%。但是我們可以通過 CSS 來設(shè)置新的 ?max-width:
實(shí)例
<style>
.row?{
????max-width:?100%;
}
</style>
實(shí)例預(yù)覽 ?
如果你想使用默認(rèn)的 max-width, 但是背景顏色需要跨域整個(gè)頁面，這時(shí)你在容器元素上使用 .row 類，并指定你需要的背景顏色:
實(shí)例
?<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>
實(shí)例預(yù)覽 ?
關(guān)于我們 聯(lián)系我們 留言板
手冊(cè)網(wǎng)