Pure-CSS 使用帮助
浏览数：43 /
时间：2015年06月09日
1. CDN
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
2. 设置 Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. 完整 HTML5 模板
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
</head>
<body>
<!--
网页内容
-->
</body>
</html>
4. 隐藏元素
在元素中加入hidden 属性，效果相当于 display: none !important;
<input type="text" name="_csrf" hidden>
5. 图片适应视窗大小
在 IMG 标签中加入类 .pure-img
<img class="pure-img" src="...">
6. 网格 Grids
网格对象中包含两种样式类：网格类（pure-g）和单元格类（pure-u 或者 pure-u-*）
单元格的大小由类命指定， 如：pure-u-1-2 表示 50% 宽度， pure-u-1-5 表示 20% 宽度
示例：
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
7. 响应式网格 Responsive Grids
PureCSS默认没有添加响应式网格框架，需要时请手动添加一下内容到 head 标签中
<!--[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]-->
对比普通网格与响应式网格
普通：
<div class="pure-g">
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
</div>
响应式
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>
在大屏幕里，普通 与 响应式 的单元格宽度均是 33.3%，但在小屏幕中 响应式 的单元格宽度将变为 100%
默认的媒体大小定义
| Key | CSS Media Query | Applies | Classname |
|---|---|---|---|
| None | None | Always | .pure-u-* |
sm |
@media screen and (min-width: 35.5em) |
≥ 568px | .pure-u-sm-* |
md |
@media screen and (min-width: 48em) |
≥ 768px | .pure-u-md-* |
lg |
@media screen and (min-width: 64em) |
≥ 1024px | .pure-u-lg-* |
xl |
@media screen and (min-width: 80em) |
≥ 1280px | .pure-u-xl-* |
注：默认情况下 1em = 16px
在表格中应用边框与间距
<style>
.pure-g > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.l-box {
padding: 1em;
}
</style>
<div class="pure-g">
<div class="pure-u-1-2 l-box"> ... </div>
<div class="pure-u-1-2 l-box"> ... </div>
</div>
注：使用 box-sizing 可以防止边框占用像素，扰乱布局
为 了更好的兼容性，网格默认对 <html>, <button>, <input>, <select>, 和 <textarea> 使用了 font-family: sans-serif; 如需要修改，可添加如下样式：
<style>
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
/* 自定义字体 */
font-family: Georgia, Times, "Times New Roman", serif;
}
</style>
8. 表单 Form
在 form 标签中添加 .pure-form 类，可生成单行表单（inline）
效果图：
代码：
<form class="pure-form">
<fieldset>
<legend>A compact inline form</legend>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<label for="remember">
<input id="remember" type="checkbox"> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
在 form 标签中添加 .pure-form-stacked 类，可生成栈型表单
效果图：
代码：
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form</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>
在 form 标签中添加 .pure-form-aligned 类，可生成排型表单
效果图：
代码：
<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>
通过与响应式网格（responsive-grids）结合，可生成多列表单
效果图：
代码：
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Legend</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<label for="first-name">First Name</label>
<input id="first-name" type="text">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="last-name">Last Name</label>
<input id="last-name" type="text">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="email">E-Mail</label>
<input id="email" type="email" required>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="city">City</label>
<input id="city" type="text">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="state">State</label>
<select id="state" class="pure-input-1-2">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>
<label for="terms" class="pure-checkbox">
<input id="terms" type="checkbox"> I‘ve read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
通过对 fieldset 增加 .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">Sign in</button>
</form>
控制表单元素大小，可以通过增加 .pure-input-* 类实现，如 pure-input-2-3 代表宽度为 66.6%
为输入项增加 required 属性，使其具有必填提示
<input type="email" placeholder="Requires an email" required>
为输入项增加 disabled 属性，使其不可用
<input type="text" placeholder="Disabled input here..." disabled>
为输入项增加 readonly 属性，使其只读
<input type="text" value="Readonly input here..." readonly>
为输入项增加 pure-input-rounded 属性，使其变圆角
<input type="text" class="pure-input-rounded">
复选框（checkbox）和单选框（radio），增加 .pure-checkbox 和 .pure-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>
<label for="option-three" class="pure-radio">
<input id="option-three" type="radio" name="optionsRadios" value="option2">
..Or this one!
</label>
</form>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
