Foundation 基礎
Foundation 教程
Foundation 安裝
Foundation 按鈕
Foundation 按鈕組
Foundation 標簽
Foundation 表單
Foundation 表格
Foundation 側邊欄
Foundation 頂部導航欄
Foundation 分頁
Foundation 滑動導航
Foundation 滑塊
Foundation 價格表
Foundation 進度條
Foundation 均衡器(Equalizer)
Foundation 開關
Foundation 列表
Foundation 麥哲倫（Magellan）導航
Foundation Joyride
Foundation 面板
Foundation 模態(tài)框
Foundation 輸入框 尺寸
Foundation 提示框
Foundation 提醒框
Foundation 圖標
Foundation 圖片
Foundation 文本
Foundation 下拉菜單
Foundation 選項卡
Foundation 折疊列表
Foundation 手冊
Foundation CSS 參考手冊
Foundation CSS 可見性
Foundation 圖標參考手冊
Foundation 網格
Foundation 塊狀網格
Foundation 網格 - 大型設備
Foundation 網格 - 水平堆疊
Foundation 網格 - 小型設備
Foundation 網格 - 中型設備
Foundation 網格實例
Foundation 網格系統(tǒng)
?
本文檔使用 php中文網手冊 發(fā)布
文字
Foundation 網格實例
三個均等列
該實例演示了如何創(chuàng)建三個均等列 (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>
實例預覽 ?
三個不均等列
該實例演示了如何創(chuàng)建三個不均等列 (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>
實例預覽 ?
兩個均等列
該實例演示了如何創(chuàng)建兩個均等列 (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>
實例預覽 ?
兩個不均等列
該實例演示了如何創(chuàng)建兩個不均等列 (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 網格系統(tǒng)有三個列: .small-* (手機), .medium-* (平板), 和 .large-* (桌面設備)。這些類可以動態(tài)組合使用，讓布局更加靈活：
提示： 每個類都能放大，如果你希望小型和大型屏幕設備的寬度一樣可以設置指定 .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-*) 類設置列向右移。 左側外邊距的列數(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ù)量之和不是 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:
實例
<style>
.row?{
????max-width:?100%;
}
</style>
實例預覽 ?
如果你想使用默認的 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>
實例預覽 ?
關于我們 聯(lián)系我們 留言板
手冊網