【響應式】foundation柵格佈局的「嚐鮮」與「填坑」

時間  2019-11-10
標籤 響應式 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"，可放心食用css

 

【準備工做】 把下面這兩個東西寫在你的html文件裏：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://foundation.zurb.com/sites/docs/grid.html（我是就是那個文檔）
 
【注意】我這篇文章是在參考官方英文文檔的基礎上寫的，在這裏提個建議——不要只看菜鳥教程（不是不看，而是不要只看！），建議仍是得多看看官方的英文文檔，不然你會發出我以下的感慨——
 

 

最後最後的一點jquery

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程