pure框架

內容：

1.介紹與入門

2.基礎使用

 

參考資料：

pure中文文檔：https://www.purecss.cn/

pure實例：https://www.purecss.cn/layouts.html

 

 

 

1、介紹與入門

1.pure介紹

pure框架是美國雅虎公司出品的一組輕量級、響應式純css模塊，適用於任何Web項目，其只提供很簡單的樣式

 

 

2.pure框架入門使用

(1)在head中引入pure(固然你也能夠去官網上下載pure)

1 <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">

 

(2)添加 Viewport Meta 元素到head中

1 <meta name="viewport" content="width=device-width, initial-scale=1">

 

(3)引入grids-responsive.css

1 <!--[if lte IE 8]>
2 <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/grids-responsive-old-ie-min.css">
3 <![endif]-->
4 <!--[if gt IE 8]><!-->
5 <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/grids-responsive-min.css">
6 <!--<![endif]-->

 

(4)引入Normalize.css

1 <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/base-min.css">

 

 

 

2、基礎使用

1.柵格系統

(1)常見概念

• 柵格class與單元格class：Pure柵格系統有兩種class組成：柵格 class(pure-g) 和 單元格 (pure-u 或 pure-u-*)。柵格相似Excel的表格，由單元格組成
• 單元格的寬度是分數：單元格用不一樣的class名錶示寬度。好比 pure-u-1-2 表示寬1/2即50%， 一樣 pure-u-1-5 表示寬1/5即20%
• 柵格的全部子元素必須是單元格柵格：class名包含pure-g的元素，它的子元素必須是單元格即class名包含 pure-u 或 pure-u-* 的元素
• 內容在單元格中：全部須要顯示的內容都要放在單元格中。這樣才能保證內容正確的顯示

 

(2)柵格單元格大小

Pure柵格默認支持5列和24列

 

(3)響應式柵格設計

Pure同時提供一個移動設備優先的響應式的柵格系統，經過添加class名便可使用。它是一個強大並靈活的系統，基於默認的柵格系統

先引入如下文件:

1 <!--[if lte IE 8]>
2     <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
3 <![endif]-->
4 <!--[if gt IE 8]><!-->
5     <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
6 <!--<![endif]-->

 

 不一樣大小的屏幕對應的類名以下：

 

(4)使用實例

 下面是一組響應式柵格，元素在小屏幕上寬width: 100%，在中等屏幕變爲width: 33.33%

1 <div class="pure-g">
2     <div class="pure-u-1 pure-u-md-1-3"> ... </div>
3     <div class="pure-u-1 pure-u-md-1-3"> ... </div>
4     <div class="pure-u-1 pure-u-md-1-3"> ... </div>
5 </div>

 

(5)其餘說明

Pure的柵格系統默認移動端優先。想要在移動端使用柵格系統，加pure-u-*在相應的元素上就能夠了

使用響應式柵格時，你確定也但願圖片可以伸縮，以保持正確的比例。給圖片加個class(pure-img) 就能夠

 

 

2.表單及按鈕

(1)表單系列

詳細內容直接看：https://www.purecss.cn/forms.html

 

(2)按鈕系列

詳細內容直接看：https://www.purecss.cn/buttons.html

 

 

3.表格及菜單

(1)表格系列

詳細內容直接看：https://www.purecss.cn/tables.html

 

(2)菜單系列

詳細內容直接看：https://www.purecss.cn/menus.html