pure---移動端UI框架
阿新 • • 發佈：2019-02-17
----------------------------------------基礎
開始吧：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your page title</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
</head>
<body>
123
</body>
</html>
隱藏元素：hidden
<input type="text" name="_csrf" hidden>
響應式圖片：class="pure-img"
<img class="pure-img" src="...">
----------------------------------------珊格
<div class="pure-g">
<div class="pure-u-1-3"><p>三分之一</p></div>
<div class="pure-u-1-3"><p>三分之一</p></div>
<div class="pure-u-1-3"><p>三分之一</p></div>
</div>
響應式柵格：引入grids-responsive
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->
預設的媒體查詢：
[email protected] screen and (min-width: 48em)≥ 768px.pure-u-md-*
[email protected] screen and (min-width: 64em)≥ 1024px.pure-u-lg-*
[email protected] screen and (min-width: 80em)≥ 1280px.pure-u-xl-*
設定珊格的字型：要對單元格和這些元素都進行設定 `html`, `button`, `input`, `select`, and `textarea`
<style>
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
font-family: Georgia, Times, "Times New Roman", serif;
}
</style>
----------------------------------------表單
預設表單：class="pure-form"，單行顯示
<form class="pure-form">
<fieldset>
<legend>一個簡單的單行表單</legend>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<label for="remember">
<input id="remember" type="checkbox"> 記住我
</label>
<button type="submit" class="pure-button pure-button-primary">登陸</button>
</fieldset>
</form>
堆積表單：class="pure-form pure-form-stacked"，多行顯示
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>堆疊式表單</legend>
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
<label for="state">State</label>
<select id="state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="remember" class="pure-checkbox">
<input id="remember" type="checkbox"> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
對齊式：class="pure-form pure-form-aligned"，label顯示在input的左邊，但是螢幕縮小以後就跟上面堆疊式表單顯示一樣了
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Supercalifragilistic Label</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
input分組：pure-group
<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Username">
<input type="text" class="pure-input-1-2" placeholder="Password">
<input type="email" class="pure-input-1-2" placeholder="Email">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Another Group">
<input type="text" class="pure-input-1-2" placeholder="More Stuff">
</fieldset>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">注 冊</button>
</form>
input大小：class="pure-input-*"
<form class="pure-form">
<input class="pure-input-1" type="text" placeholder=".pure-input-1"><br>
<input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br>
</form>
或：
<form class="pure-form pure-g">
<div class="pure-u-1-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
</div>
<div class="pure-u-3-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
</div>
</form>
圓角input：class="pure-input-rounded"
<input type="text" class="pure-input-rounded">
複選單選：新增class pure-checkbox 或 pure-radio，可使checkbox、radio排列整齊
<form class="pure-form">
<label for="option-one" class="pure-checkbox">
<input id="option-one" type="checkbox" value="">
Here's option one.
</label>
<label for="option-two" class="pure-radio">
<input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
Here's a radio button. You can choose this one..
</label>
</form>
----------------------------------------按鈕
預設按鈕：class="pure-button"
<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>
禁用按鈕：class="pure-button pure-button-disabled"
<a class="pure-button pure-button-disabled" href="#">A Disabled Button</a>
<button class="pure-button pure-button-disabled">A Disabled Button</button>
啟用按鈕：class="pure-button pure-button-active"
<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>
主要按鈕：class="pure-button pure-button-primary"
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>
圖示按鈕：把Font Awesome 的CSS檔案 引入頁面，然後在pure-button里加個 <i> 元素。
<button class="pure-button">
<i class="fa fa-cog"></i>
Settings
</button>
<a class="pure-button" href="#">
<i class="fa fa-shopping-cart fa-lg"></i>
Checkout
</a>
----------------------------------------表格
預設表格：class="pure-table"
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
</tbody>
</table>
有邊框的表格：class="pure-table pure-table-bordered"
有水平邊框的表格：class="pure-table pure-table-horizontal"
隔行換色的表格：class="pure-table pure-table-striped”
----------------------------------------選單
橫向選單：class="pure-menu pure-menu-open pure-menu-horizontal"，
選中選單 class="pure-menu-selected"，
帶禁用項的選單 class="pure-menu-disabled"
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li><a href="#">Home</a></li>
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li>
<li class="pure-menu-disabled"><a href="#">Disabled Item</a></li>
</ul>
</div>
選單前加標題：再UL標籤前加上
<a href="#" class="pure-menu-heading">Site Title</a>
縱向選單：
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading">Yahoo! Sites</a>
<ul>
<li><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li>
<li class="pure-menu-heading">More Sites!</li>
<li><a href="#">Games</a></li>
<li><a href="#">News</a></li>
<li><a href="#">OMG!</a></li>
</ul>
</div>
分頁：class="pure-paginator"，上一頁 prev，下一頁 next，當前頁 pure-button-active
<ul class="pure-paginator">
<li><a class="pure-button prev" href="#">«</a></li>
<li><a class="pure-button" href="#">1</a></li>
<li><a class="pure-button pure-button-active" href="#">2</a></li>
<li><a class="pure-button" href="#">3</a></li>
<li><a class="pure-button" href="#">4</a></li>
<li><a class="pure-button" href="#">5</a></li>
<li><a class="pure-button next" href="#">»</a></li>
</ul>
----------------------------------------
開始吧：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your page title</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
</head>
<body>
123
</body>
</html>
隱藏元素：hidden
<input type="text" name="_csrf" hidden>
響應式圖片：class="pure-img"
<img class="pure-img" src="...">
----------------------------------------珊格
<div class="pure-g">
<div class="pure-u-1-3"><p>三分之一</p></div>
<div class="pure-u-1-3"><p>三分之一</p></div>
<div class="pure-u-1-3"><p>三分之一</p></div>
</div>
響應式柵格：引入grids-responsive
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->
預設的媒體查詢：
[email protected] screen and (min-width: 48em)≥ 768px.pure-u-md-*
[email protected] screen and (min-width: 64em)≥ 1024px.pure-u-lg-*
[email protected] screen and (min-width: 80em)≥ 1280px.pure-u-xl-*
設定珊格的字型：要對單元格和這些元素都進行設定 `html`, `button`, `input`, `select`, and `textarea`
<style>
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
font-family: Georgia, Times, "Times New Roman", serif;
}
</style>
----------------------------------------表單
預設表單：class="pure-form"，單行顯示
<form class="pure-form">
<fieldset>
<legend>一個簡單的單行表單</legend>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<label for="remember">
<input id="remember" type="checkbox"> 記住我
</label>
<button type="submit" class="pure-button pure-button-primary">登陸</button>
</fieldset>
</form>
堆積表單：class="pure-form pure-form-stacked"，多行顯示
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>堆疊式表單</legend>
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
<label for="state">State</label>
<select id="state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="remember" class="pure-checkbox">
<input id="remember" type="checkbox"> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
對齊式：class="pure-form pure-form-aligned"，label顯示在input的左邊，但是螢幕縮小以後就跟上面堆疊式表單顯示一樣了
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Supercalifragilistic Label</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
input分組：pure-group
<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Username">
<input type="text" class="pure-input-1-2" placeholder="Password">
<input type="email" class="pure-input-1-2" placeholder="Email">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Another Group">
<input type="text" class="pure-input-1-2" placeholder="More Stuff">
</fieldset>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">注 冊</button>
</form>
input大小：class="pure-input-*"
<form class="pure-form">
<input class="pure-input-1" type="text" placeholder=".pure-input-1"><br>
<input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br>
</form>
或：
<form class="pure-form pure-g">
<div class="pure-u-1-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
</div>
<div class="pure-u-3-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
</div>
</form>
圓角input：class="pure-input-rounded"
<input type="text" class="pure-input-rounded">
複選單選：新增class pure-checkbox 或 pure-radio，可使checkbox、radio排列整齊
<form class="pure-form">
<label for="option-one" class="pure-checkbox">
<input id="option-one" type="checkbox" value="">
Here's option one.
</label>
<label for="option-two" class="pure-radio">
<input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
Here's a radio button. You can choose this one..
</label>
</form>
----------------------------------------按鈕
預設按鈕：class="pure-button"
<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>
禁用按鈕：class="pure-button pure-button-disabled"
<a class="pure-button pure-button-disabled" href="#">A Disabled Button</a>
<button class="pure-button pure-button-disabled">A Disabled Button</button>
啟用按鈕：class="pure-button pure-button-active"
<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>
主要按鈕：class="pure-button pure-button-primary"
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>
圖示按鈕：把Font Awesome 的CSS檔案 引入頁面，然後在pure-button里加個 <i> 元素。
<button class="pure-button">
<i class="fa fa-cog"></i>
Settings
</button>
<a class="pure-button" href="#">
<i class="fa fa-shopping-cart fa-lg"></i>
Checkout
</a>
----------------------------------------表格
預設表格：class="pure-table"
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
</tbody>
</table>
有邊框的表格：class="pure-table pure-table-bordered"
有水平邊框的表格：class="pure-table pure-table-horizontal"
隔行換色的表格：class="pure-table pure-table-striped”
----------------------------------------選單
橫向選單：class="pure-menu pure-menu-open pure-menu-horizontal"，
選中選單 class="pure-menu-selected"，
帶禁用項的選單 class="pure-menu-disabled"
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li><a href="#">Home</a></li>
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li>
<li class="pure-menu-disabled"><a href="#">Disabled Item</a></li>
</ul>
</div>
選單前加標題：再UL標籤前加上
<a href="#" class="pure-menu-heading">Site Title</a>
縱向選單：
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading">Yahoo! Sites</a>
<ul>
<li><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li>
<li class="pure-menu-heading">More Sites!</li>
<li><a href="#">Games</a></li>
<li><a href="#">News</a></li>
<li><a href="#">OMG!</a></li>
</ul>
</div>
分頁：class="pure-paginator"，上一頁 prev，下一頁 next，當前頁 pure-button-active
<ul class="pure-paginator">
<li><a class="pure-button prev" href="#">«</a></li>
<li><a class="pure-button" href="#">1</a></li>
<li><a class="pure-button pure-button-active" href="#">2</a></li>
<li><a class="pure-button" href="#">3</a></li>
<li><a class="pure-button" href="#">4</a></li>
<li><a class="pure-button" href="#">5</a></li>
<li><a class="pure-button next" href="#">»</a></li>
</ul>
----------------------------------------