提到響應式，就不得不提兩個響應式框架——bootstrap和foundation。今天給大家介紹的是foundation框架。 何為“嘗鮮”？就是帶大伙初步瞭解一下foundation的靈活和強大； 何為“踩坑”？就是我把我使用的時候踩過的坑給標個記號，這樣大伙用的時候就可以“繞道而行“啦！ ...
提到響應式，就不得不提兩個響應式框架——bootstrap和foundation。在標題上我已經說明白啦，今天給大家介紹的是foundation框架。 何為“嘗鮮”？就是帶大伙初步一下foundation的靈活和強大 何為“踩坑”？就是我把我使用的時候踩過的坑給標個記號，這樣大伙用的時候就可以“繞道而行“啦！
沒錯今天我這篇文章講的就是北方醬左手邊的那個看起來溫（diao）文（de）爾（yi）雅（bi）的山羊先生：foundation!:
文章主要的四點內容：
1.foundation 網格佈局之行列柵格 (row and column)
2.foundation 網格佈局之塊狀柵格（block grids）
3.響應式柵格和可視化
4.浮動柵格
【註意】在這篇文章中我採取的是React框架的寫法，可能有些影響閱讀，請多多包涵，className等同於class, style= {{background:'red'}}等同於 style = "background:red"，可放心食用
【準備工作】 把下麵這兩個東西寫在你的html文件里：
<link rel="stylesheet" href="http://cdn.staticfile.org/foundation/6.3.0-rc3/css/foundation.min.css">（放在head標簽內）
<script src="http://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>（放在body底部）
1. foundation 網格佈局之行列柵格 (row and column)
<div className = 'row'>
<div className = 'small-2 medium-6 large-10 columns' style = {{background:'red'}}>column1</div>
<div className = 'small-10 medium-6 large-2 columns' style = {{background:'blue'}}>column2</div>
</div>
在一個行父級元素下有多個列子元素，列子元素按網格分長度。網格總共分為為12列，如你所見對於small 2 + 10 = 12，對於medium 6 + 6 =12 ... 你需要做的事情很簡單：在行父級元素上寫入className = 'row'，在列各個子元素中寫入[size]-數字，同時讓各個數字之和為12即可，上述是兩列的情況，如果有三列則可為small-2,small,small-8,small-2(和為12)，一般為12，下麵也會介紹可以不為12的情況，很簡單！對吧！
【註意】：你一定要記得在列子元素className後面寫入columns！（這應該是很多新手會犯的錯誤）
demo:
大型設備：（單行占全屏100%）
中型設備：（單行占全屏100%）
小型設備：（單行占全屏100%）
寫入className = 'row'的類是預設占滿父級元素的，所以註意我們並沒有寫上with:100%
1.1雖然簡單，但別高興太早，因為第一個坑即將到來..... . ( ^ω^).
我們把上面的代碼改一改,把medium和large的佈局給去掉：
<div className = 'row'>
<div className = 'small-6 columns' style = {{background:'red'}}>column1</div>
<div className = 'small-6 columns' style = {{background:'blue'}}>column2</div>
</div>
demo:
小型設備：（單行占全屏100%）
中型設備：（單行占全屏100%）
大型設備：（單行占全屏100%）
what!我不是只寫了關於small的佈局嗎？怎麼在中型設備和大型設備也變成和小型設備一樣的佈局了？look下麵
【foundation的佈局“繼承”】：大的size會自動"繼承"小的size,也就是說你只寫了small-6 columns，它會預設你寫了small-6 medium-6 large-6 columns,同理，即使你寫了small-6 medium-10 columns，它也會預設你寫了small-6 medium-10 large-10 columns 這種繼承是單向的：從小到大，也就是說你只寫了large-6 columns,small和medium不能得到值。
如果我們寫成
<div className = 'row'>
<div className = 'large-6 columns' style = {{background:'red'}}>column1</div>
<div className = 'large-6 columns' style = {{background:'blue'}}>column2</div>
</div>
在小型設備和中型設備上：（單行占全屏100%）
1.2接下來就是我們可能遇到的第二個坑..... . ( ^ω^).
讓我們“仔細”看看我們在大型設備上的顯示：
註意看兩邊是有空白的，（哎呀怎麼回事？剛纔不是還說好預設占父元素100%的麽）
這是由於foundation的內在機制，網格 (.row) 最大尺寸（ max-width）為 62.5rem。在寬屏設備上尺寸可能大於 62.5rem, 這樣列就無法完整填充頁面！
別急，讓我們做一些彌補的操作，讓我們給行父元素加上max-width: 100%;：
<div className = 'row' >
<div className = 'large-6 columns' style = {{background:'red'}}>column1</div>
<div className = 'large-6 columns' style = {{background:'blue'}}>column2</div>
</div>
demo:(大型設備最寬屏)
沒有空白了！坑已經填上了！(。・∀・)ノ耶！
1.3接下來是我們的第三個坑..... . ( ^ω^). （待我拿吧鏟子把填上的坑再挖出來）
正所謂學而不思則罔，你可能會問：哥們你之前寫的都是size-number中number加起來等於12的demo，但是我就是作死不想寫成總和為12的話，會怎樣呢？
讓我們來試試！：
<div className = 'row' style = {{maxWidth:'100%'}}>
<div className = 'small-3 columns' style = {{background:'red'}}>column1</div>
<div className = 'small-3 columns' style = {{background:'blue'}}>column2</div>
<div className = 'small-3 columns' style = {{background:'yellow'}}>column2</div>
</div>
註意看，黃色的色塊靠在最右邊，這說明瞭當你的總和不能湊夠12的時候，行父元素的最後一個子元素會自動向右浮動
【解決辦法】給最後一個子元素加上end的類名
<div className = 'row' style = {{maxWidth:'100%'}}>
<div className = 'small-3 columns' style = {{background:'red'}}>column1</div>
<div className = 'small-3 columns' style = {{background:'blue'}}>column2</div>
<div className = 'small-3 columns end' style = {{background:'yellow'}}>column3</div>
</div>
demo:（總共占全屏75%）
看到沒有，它跟上來啦！
1.4接下來是我們的第四個坑..... . ( ^ω^).
【foundation單行單列居中】 很多時候我們並不需要在一個行網格中放入多個列，很多時候我們需要只需要在一個行中放入一個列，然後讓它居中就可以了，我們需要在對應的size-number後加入size-centered譬如：small-centered
<div className = 'row'>
<div className = 'small-6 small-centered columns' style = {{background:'red'}}>column1</div>
</div>
demo:（小型設備上）
猜猜看在中型和大型設備上會怎麼樣？沒錯！跟前面一樣，medium和large“繼承”了small的居中特性！於是在中／大設備中你“被居中”了。 what the hack! 但如果我硬是不想在中／大型設備上被居中的話怎麼辦？你只能這樣寫：加入size-uncentered
<div className = 'row'>
<div className = 'small-6 small-centered medium-uncentered large-uncentered columns' style = {{background:'red'}}>
column1
</div>
</div>
demo:（中／大型設備上）（單行占全屏50%）
這樣你就取消了被動的居中
2.foundation 柵格佈局之塊狀柵格（block grids）
有時我們的佈局對象不是以行列的方式二是以塊狀的方式展現的，例如：
<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}>
<div className = 'columns column-block' style ={{minHeight:'20px',background:'grey'}}></div>
<div className = 'columns column-block' style ={{minHeight:'20px',background:'blue'}}></div>
<div className = 'columns column-block' style ={{minHeight:'20px',background:'red'}}></div>
<div className = 'columns column-block' style ={{minHeight:'20px',background:'yellow'}}></div>
<div className = 'columns column-block' style ={{minHeight:'20px',background:'black'}}></div>
<div className = 'columns column-block' style ={{minHeight:'20px',background:'orange'}}></div>
</div>
依然是在父級元素和子元素中添加row和columns類名。同時，在父級元素裡面寫入：size-up-number:number表示每一行最大的塊數，在塊子元素裡面寫入：columns column-block
demo:
大型設備：（單行占全屏100%）
中型設備：（單行占全屏100%）
小型設備：（單行占全屏100%）
2.1坑點一 ——column-block類名會給每個柵格架上一定的margin-bottom
這種寫法，上下兩個塊級柵格列預設是由margin-bottom,開箱試驗表明，在中／大型設備上為margin-bottom：30px,在小型設備上為margin-bottom：20px；當然，很多時候你可能不想要這個外邊距，去掉它的方法很簡單，不加 column-block就可以了，比如我們寫成：
<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}>
<div className = 'columns ' style ={{minHeight:'20px',background:'grey'}}></div>
<div className = 'columns ' style ={{minHeight:'20px',background:'blue'}}></div>
<div className = 'columns ' style ={{minHeight:'20px',background:'red'}}></div>
<div className = 'columns ' style ={{minHeight:'20px',background:'yellow'}}></div>
<div className = 'columns ' style ={{minHeight:'20px',background:'black'}}></div>
<div className = 'columns ' style ={{minHeight:'20px',background:'orange'}}></div>
</div>
在中型設備上：（單行占全屏100%）
margin-bottom已經被我們去掉啦
2.2坑點二：子類名寫columns或column效果一樣
（其實也不算是坑點）在查閱官方文檔時我有一個感到疑惑的點，就是官方文檔在彈性柵格這一節里使用的子類名不是columns而是column（後面沒有s)
經過試驗證明，在所有上述和下麵的例子中，無論你寫的類名是column還是columns效果都是一樣的.... _(:3 」∠)_ 2.3坑點三：在塊級柵格中，你無法用“small-6 medium-4 large-2 ”的行列柵格的寫法定義每個柵格的寬度 塊級柵格很好的一點就是解決了行列柵格只能實現行列柵格只能在單行實現自適應佈局的局限性，於是我們想，能不能把兩個東西結合到一起呢？很可惜，不能！我們把兩種寫法結合在一起，寫成：
<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}>
<div className = 'small-3 columns' style ={{minHeight:'20px',background:'grey'}}></div>
<div className = 'small-3 columns' style ={{minHeight:'20px',background:'blue'}}></div>
<div className = 'small-3 columns' style ={{minHeight:'20px',background:'red'}}></div>
<div className = 'small-3 columns' style ={{minHeight:'20px',background:'yellow'}}></div>
<div className = 'small-3 columns' style ={{minHeight:'20px',background:'black'}}></div>
<div className = 'small-3 columns' style ={{minHeight:'20px',background:'orange'}}></div>
</div>
如果這種寫法能夠成功，那麼按照我們的設想，在小型屏上，因為small-up-2而單行顯示兩個柵格塊，同時每個柵格所占位置應該是3/12 = 1/4，兩個柵格一共占去屏幕的1/4+1/4 =1/2,為50%，讓我們看看demo:
demo:(小型屏幕)（單行占全屏100%）
兩個柵格占去了全屏的100%，而不是50%，這說明,通過size-number的寬度調節在塊級柵格中已經失去了作用：
雖然在塊級柵格中，你無法寫行列柵格的類名去規定單個柵格的寬度，但你可以通過style指定定寬的方式實現這一點
<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxmaxWidth:'100%'}}>
<div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'grey'}}></div>
<div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'blue'}}></div>
<div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'red'}}></div>
<div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'yellow'}}></div>
<div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'black'}}></div>
<div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'orange'}}></div>
</div>
demo:小型屏
3.響應式柵格和可視化
你可能遇到過這樣一個需求，做一個網頁去同時適應手機端和PC端(或者說是小型屏和中／大型屏)這時候你希望一個頁面元素僅僅只在中大型屏上顯示而不在小型屏幕上顯示。怎麼控制這個可視化的響應式呢？foundation的show-for-size類和show-for-size-only類可以輕鬆地幫助到你
show-for-size類
<div> <p className = 'show-for-small'>我在小／中／大型屏幕顯示</p> <p className = 'show-for-medium'>我在中大型屏幕顯示</p> <p className = 'show-for-large'>我在大型屏幕顯示</p> </div>demo: 大型屏幕：
中型屏幕：
小型屏幕：
show-for-size-only類：
<div> <p className = 'show-for-small-only'>我只在小型屏幕顯示</p> <p className = 'show-for-medium-only'>我只在中型屏幕顯示</p> <p className = 'show-for-large-only'>我只在大型屏幕顯示</p> </div>demo: 大型屏幕：
中型屏幕：
小型屏幕：
【註意】show-for-size類和show-for-size-only類的區別在於show-for-size類有“繼承”的特性，也就是你只寫className = 'show-for-small'相當於寫了className = 'show-for-small show-for-medium show-for-large'則在任意屏幕上都能顯示，而show-for-small-only則只能在小型屏幕上顯示
4.浮動柵格
foudation還有一個類叫浮動類（其實瓦覺得這似乎並沒有特別大的用處畢竟來說你也可以自己寫css,但是我個人感覺在foudation下寫類名的話，代碼看起來會好看一些╮(～▽～)╭,不知道各位是怎麼認為的呢 ）
<div className = 'row'> <p className = 'float-left'>float-left</p> <p className = 'float-right'>float-right</p> </div>demo:
最後一點：附上菜鳥教程和官方文檔的鏈接：
http://www.runoob.com/foundation/foundation-tutorial.html（我就是那個教程）
http://foundation.zurb.com/sites/docs/grid.html（我是就是那個文檔）
【註意】我這篇文章是在參考官方英文文檔的基礎上寫的，在這裡提個建議——不要只看菜鳥教程（不是不看，而是不要只看！），建議還是得多看看官方的英文文檔，否則你會發出我如下的感慨——
最後最後的一點
