?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
Foundation 網(wǎng)格系統(tǒng)
Foundation 網(wǎng)格系統(tǒng)為 12 列。
如果你不需要 12 列，你可以合并一些列，創(chuàng)建一些更大寬度的列。
Foundation 的網(wǎng)格系統(tǒng)是響應(yīng)式的。 列會(huì)根據(jù)屏幕尺寸自動(dòng)調(diào)整大小。在大尺寸屏幕上，可能是三列，小屏幕尺寸就可能是三個(gè)單列，按順序排列。
網(wǎng)格列
Foundation 網(wǎng)格系統(tǒng)有三個(gè)列：
-
.small(手機(jī)端) -
.medium(平板設(shè)備) -
.large(電腦設(shè)備：筆記本，臺(tái)式機(jī))
以上類(lèi)可以結(jié)合使用，創(chuàng)建更靈活的布局
基本的網(wǎng)格結(jié)構(gòu)
以下是基本的 Foundation 網(wǎng)格結(jié)構(gòu)實(shí)例:
實(shí)例
?<div?class="row"> ??<div?class="small|medium|large-num?columns"></div> </div> <div?class="row"> ??<div?class="small|medium|large-num?columns"></div> ??<div?class="small|medium|large-num?columns"></div> ??<div?class="small|medium|large-num?columns"></div> </div> <div?class="row"> ??... </div>
首先，創(chuàng)建一行 (<div
class="row">)。 這是一個(gè)水平的垂直列。然后添加列的數(shù)量說(shuō)明 small-num, medium-num 及 large-num 類(lèi)。注意：列的數(shù)量 num 加起來(lái)必須等于 12 :
實(shí)例
<div?class="row"> ??<div?class="small-12?columns">.small-12?yellow</div> </div> <div?class="row"> ??<div?class="small-8?columns">.small-8?beige</div> ??<div?class="small-4?columns">.small-4?gray</div> </div> <div?class="row"> ??<div?class="large-9?small-8?columns">.small-8?.large-9?pink</div> ??<div?class="large-3?small-4?columns">.small-4?.large-3?orange</div> </div>實(shí)例預(yù)覽 ?
實(shí)例中，第一行的 <div> 類(lèi)為 .small-12, 這會(huì)創(chuàng)建 12 列（100%寬度）。
第二行創(chuàng)建了兩個(gè)列， .small-4 的寬度為33.3% ，.small-8 的寬度為 66.6%。
第三行我們添加了額外的兩個(gè)列 (.large-3 和
.large-9)。這意味著如果在大屏幕尺寸下，列就會(huì)變?yōu)?25% (.large-3) 和 75% (.large-9)的比例。同時(shí)我們也指定了小屏幕上列的比例 33% (.small-4)
和 66% (.small-8) 。這種組合的方式對(duì)于不同屏幕顯示效果是非常有幫助的。
網(wǎng)格選項(xiàng)
下表總結(jié)了 Foundation 網(wǎng)格系統(tǒng)在多個(gè)設(shè)備上的說(shuō)明：
| ? | 小型設(shè)備 Phones (<40.0625em (640px)) |
中等設(shè)備 Tablets (>=40.0625em (640px)) |
大設(shè)備 Laptops & Desktops (>=64.0625em (1025px)) |
|---|---|---|---|
| 網(wǎng)格行為 | 一直是水平的 | 以折疊開(kāi)始，斷點(diǎn)以上是水平的 | 以折疊開(kāi)始，斷點(diǎn)以上是水平的 |
| 類(lèi)前綴 | .small-* | .medium-* | .large-* |
| 類(lèi)的數(shù)量 | 12 | 12 | 12 |
| 可內(nèi)嵌 | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes |
寬屏
網(wǎng)格最大(.row) 寬度為 62.5rem。在寬屏上，當(dāng)寬度大于 62.5rem, 列不會(huì)跨越頁(yè)面的寬度， 即使寬度設(shè)定為 100%。但你可以通過(guò) CSS 重新設(shè)置 max-width:
實(shí)例
<style>
.row?{
????max-width:?100%;
}
</style>實(shí)例預(yù)覽 ?如果你使用默認(rèn)的 max-width, 但希望背景顏色跨越整個(gè)頁(yè)面寬度，你可以使用 .row 包裹整個(gè)容器，并指定你需要的背景顏色:
實(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)