Foundation 網(wǎng)格實(shí)例

以下我們收集了一些網(wǎng)格常用的實(shí)例。

創(chuàng)新互聯(lián)建站專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、沁源網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為沁源等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

---

三個(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
>

嘗試一下 ?

---

三個(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
>

嘗試一下 ?

---

兩個(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
>

嘗試一下 ?

---

兩個(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
>

嘗試一下 ?

---

修改列的順序

通過使用 .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
>

嘗試一下 ?

---

嵌套列

你可以使用嵌套網(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
>

嘗試一下 ?

---

混合：手機(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
>

嘗試一下 ?

---

混合：手機(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
>

嘗試一下 ?

---

居中列

列居中可以使用 .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
>

嘗試一下 ?

---

列偏移量

可以使用 .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ù)量之和不是 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
>

嘗試一下 ?

---

寬屏

網(wǎng)格 (.row) 最大尺寸（ max-width）為 62.5rem。在寬屏設(shè)備上尺寸可能大于 62.5rem, 這樣列就無法完整填充頁面，即便寬度設(shè)置為 100%。但是我們可以通過 CSS 來設(shè)置新的 max-width:

實(shí)例

嘗試一下 ?

如果你想使用默認(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
>

嘗試一下 ?

名稱欄目：創(chuàng)新互聯(lián)Foundation教程：Foundation網(wǎng)格實(shí)例
本文網(wǎng)址：http://www.5511xx.com/article/cojijee.html