Grids:5/24
<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>
Forms:
Default Form //表单按钮都在一行
Stacked Form //表单按钮成一列 左对齐
Aligned Form //左右居中对齐
Multi-Column Form (with Pure Grids) //利用Grids将表单分块
Grouped Inputs //分组合并
Input Sizing //设置输入框的大小
<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>
<input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br>
<input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br>
<input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br>
</form>
Required Inputs //加判定(邮箱、手机号)
<form class="pure-form">
<input type="email" placeholder="Requires an email" required>
</form>
Disabled Inputs //不能有输入的输入框
<input type="text" placeholder="Disabled input here..." disabled>
Read-Only Inputs //只能读的输入框
<input type="text" value="Readonly input here..." readonly>
Rounded Inputs //圆形的输入框
<input type="text" class="pure-input-rounded">
Checkboxes and Radios //复选框
<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>
Button:
Default Buttons //默认button
<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>
Disabled Buttons //不能用的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 Buttons //活跃的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 Buttons //初始的button 蓝色的
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>
Customizing Buttons //自定义button
<button class="button-success pure-button">Success Button</button>
//给.button-succes加样式 字体颜色(color:white),边框是否圆角(border-radius:4px),背景颜色( background: rgb(28, 184, 65); /*green*/),文本阴影(text-shadow:0 1px 1px rgba(0, 0, 0, 0.2));
Buttons with different sizes //按钮大小 button-xsmall button-small pure-button button-large button-xlarge
<button class="button-small pure-button">Small Button</button>
.button-small {font-size: 85%;}
Table:
Default Table //只有外框线和竖线
Bordered Table //所有线都有
Table with Horizontal Borders //只有外框线和水平线
Striped Table //条纹表
Menus:
Vertical Menu //竖的菜单
Horizontal Menu //水平的菜单
Selected and Disabled Item //选中和不能点击的菜单
Dropdown //有下拉框的菜单
Vertical Menu with Submenu //带子分类的竖直的菜单
Scrollable Horizontal Menu //有滚动条的水平的菜单
Scrollable Vertical Menu //有滚动条的水平的菜单