响应式布局框架 Pure-CSS 5.0 示例中文版-中
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 > 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 >
<label for="password">Password</label>
<input >
<label for="state">State</label>
<select >
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="remember" class="pure-checkbox">
<input > 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 >
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input >
</div>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input >
</div>
<div class="pure-control-group">
<label for="foo">Supercalifragilistic Label</label>
<input >
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input > 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 >
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="last-name">Last Name</label>
<input >
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="email">E-Mail</label>
<input required>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="city">City</label>
<input >
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="state">State</label>
<select >
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>
<label for="terms" class="pure-checkbox">
<input > 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">
<fieldsetclass="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 >
Here's option one.
</label>
<label for="option-two" class="pure-radio">
<input checked>
Here's a radio button. You can choose this one..
</label>
<label for="option-three" class="pure-radio">
<input >
..Or this one!
</label>
</form>
9. 按钮
在 a 或 button 标签中添加类 .pure-button
<aclass="pure-button" href="#">A Pure Button</a>
<buttonclass="pure-button">A Pure Button</button>
禁用的按钮 Disabled Button
<a class="pure-button pure-button-disabled" href="#">A Disabled Button</a>
<button class="pure-button pure-button-disabled">A Disabled Button</button>
激活的按钮 Active Button，同按下状态
<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>
高亮按钮 Primary Button
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>
自定义按钮
<div>
<style scoped>
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65); /* this is a green */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20); /* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221); /* this is a light blue */
}
</style>
<button class="button-success pure-button">Success Button</button>
<button class="button-error pure-button">Error Button</button>
<button class="button-warning pure-button">Warning Button</button>
<button class="button-secondary pure-button">Secondary Button</button>
</div>
按钮大小
<div>
<style scoped>
.button-xsmall {
font-size: 70%;
}
.button-small {
font-size: 85%;
}
.button-large {
font-size: 110%;
}
.button-xlarge {
font-size: 125%;
}
</style>
<button class="button-xsmall pure-button">Extra Small Button</button>
<button class="button-small pure-button">Small Button</button>
<button class="pure-button">Regular Button</button>
<button class="button-large pure-button">Large Button</button>
<button class="button-xlarge pure-button">Extra Large Button</button>
</div>
图标按钮
要使用图标按钮，需添加 CSS 字体文件，比如 Font-Awesome
<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>
- 上一篇 »响应式网页设计简单入门
- 下一篇 »CSS3 Media Queries 实现响应式设计