【響應式】foundation柵格佈局的“嘗鮮”與“填坑”

来源:http://www.cnblogs.com/penghuwan/archive/2017/04/29/6785422.html
-Advertisement-
Play Games

提到響應式，就不得不提兩個響應式框架——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（我是就是那個文檔）   【註意】我這篇文章是在參考官方英文文檔的基礎上寫的，在這裡提個建議——不要只看菜鳥教程（不是不看，而是不要只看！），建議還是得多看看官方的英文文檔，否則你會發出我如下的感慨——  

 

最後最後的一點

 

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [KISSY5系列]KISSY5安裝使用(二)
    上篇文章,我們遺留的一個問題就是,請求數量有點多，雖然現在的瀏覽器的請求資源都是併發的。但是我們還是儘量減少請求量。 但是KISSY裡面這個問題我們怎麼解決呢，其實還是從data-config="{combine:false}"說起. ...
  • [KISSY5系列]KISSY5安裝使用(一)
    目錄:http://www.cnblogs.com/idefav2010/p/6785610.html 本文將從零開始安裝KISSY環境 一、安裝nodejs 從nodejs網站下載nodejs安裝 地址: https://nodejs.org/en/download/ 二、下載KISSY 下載地址 ...
  • 前端開發麵試題-JavaScript（轉載）
    本文由 "本文的原作者markyun" 收集總結。 介紹js的基本數據類型。 Undefined、Null、Boolean、Number、String、 ECMAScript 2015 新增:Symbol(創建後獨一無二且不可變的數據類型 ) 介紹js有哪些內置對象？ Object 是 JavaSc ...
  • 前端開發麵試題-CSS（轉載）
    本文由 "本文的原作者markyun" 收集總結。 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？ （1）有兩種， IE 盒子模型、W3C 盒子模型； （2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)； （3）區 別： ...
  • js-消息對話框
    最近在某技術網站學習一些js（JavaScript）的課程，將筆記分享一下 消息對話框1. **alert **消息對話框，輸出內容，可以是字元串或變數，與document.write 相似 var mychar="I love JavaScript"; alert(mychar);2. **con ...
  • 前端開發麵試題-HTML（轉載）
    本文由 "本文的原作者markyun" 收集總結了一些前端面試題，初學者閱後也要用心鑽研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。萬不可投機取巧，臨時抱佛腳只求面試僥幸混過關是錯誤的！也是不可能的！不可能的！不可能的！ 前端還是一個年輕的行業，新的行業標準， 框架， 庫都不斷在更 ...
  • setTimeout OR setInterval?
    setTimeout 和setInterval從字面上應該是可以知道其大意的。timeout:延時；interval:間隔； 兩者的區別就像是它們自己的英文解釋一樣：setTimeout是延時執行，並且它只執行一次(ps:當然也有方法讓它無限執行)；setInterval是間隔式的執行，每隔多少時間 ...
  • 面向對象之工廠模式和構造函數模式
    工廠模式：用函數來封裝，以特定介面來創建對象的細節。 console.log(person1 instanceof person); // false console.log(person1 instanceof Object);//true console.log(person instanceo ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類