WeUI

1.按钮(Butten)
可以使用a或者button标签
class：
weui_btn
（写在类的最前面）
weui_btn_primary
（绿色按钮）
weui_btn_default
（白色按钮）
weui_btn_warn
（红色按钮）

weui_btn_disabled
（置灰态，即字体呈灰色，此时无法按这个按钮）
weui_btn_plain_xxx
（镂空按钮,xxx可以填default，primary)
weui_btn_mini
(小型按钮，宽度自适应，两边边框与文本间距0.75em)

2.单元格(Cell)
列表视图，用于将信息以
4000
列表的结构显示在页面上
class:
weui_cells_title
（标题，header）
weui_cells
（“总容器”，cells）
weui_cell
（“小容器”，可以用a或者div标签，当用a标签时，后面加href属性就可以实现【转跳】功能）
weui_cell_hd
（每个“小容器”的头部，thumbnail，一般用来放图片icon，即img标签）
weui_cell_bd
（每个“小容器”的内容，body）
weui_cell_ft
（每个“小容器”的附属内容，accessory）
weui_cell_primary
（cell采用自适应布局，在需要自适应的部分加上，一般放在class的最后）

weui_cells_access
（一般放在weui_cells后面，作用是使链接的文字始终保持黑色）

3.弹框(Dialog)
也叫 “modal”，表现为带遮罩的弹框。可以分为 Alert 和 Confirm 两种
Alert，警告弹框，功能类似于浏览器自带的 alert 弹框，用于提醒、警告用户简单扼要的信息，只有一个“确认”按钮，点击“确认”按钮后关闭弹框。
Confirm，确认弹框，功能类似于浏览器自带的 confirm 和 prompt 的集合，可以用于让用户确认/取消确认，也可以让用户填写表单。

class：
weui_dialog_alert
（alert弹窗）
weui_mask
（用来遮挡alert弹窗背后的内容）
weui_dialog
（用来“包住”整个弹窗的内容）
weui_dialog_hd
（弹窗的头部，一般是“包住”weui_dialog_title）
weui_dialog_title
（弹窗标题，一般加一个strong标签）
weui_dialog_bd
（弹窗内容，告知当前页面信息等）
weui_dialog_ft
（弹窗附加内容，也可看作是弹窗尾部，一般用来放“确认”字样，a标签，转跳）

weui_btn_dialog
（弹窗中的【确认】按钮，一般在<div class="weui_dialog_ft">里面的a标签的class中，另外，后面加Primary就是绿色，default就是白色）

weui_dialog_confirm
（confirm弹窗）
（confirm弹窗结构与alert大同小异，唯一区别就是在<div class="weui_dialog_ft">这个盒子下
有两个a标签，一个是【取消】，一个是【确认】

4.Toast
toast 用于临时显示某些信息，并且会在数秒后自动消失。这些信息通常是轻量级操作的成功信息。
提醒：WeUI 不推荐在 toast 中展示失败状态，失败状态应该使用 Alert 明确告知用户失败原因

class:

...
????????????????????????????????
先跳过

5.Msg Page(结果页)
结果页通常来说可以认为进行一系列操作步骤后，作为流程结束的总结性页面。

class：
weui_msg
（Msg Page容器）
weui_icon_area
（这个div盒子里一般放<i class="weui_icon_success weui_icon_msg"></i>
weui_text_area
（Msg Page文字区域）
weui_msg_title
（文字区域标题，“操作成功”）
weui_msg_desc
（文字区域内容详情，可根据实际需要安排）
weui_opr_area
（Msg Page操作区域，里面一般是按钮）
weui_btn_area
（按钮区域，这个盒子的里面是两个按钮【确定】【取消】）
weui_extra_area
（Msg Page额外区域，就是在最底下的小字，一般是一个a标签链接）

6.Gird(九宫格)
功能类似于微信钱包界面中的九宫格，用于展示有多个相同级别的入口。包含功能的图标和简洁的文字描述。

7.Form(表单)
可以分成“输入型”和“选择型”两种。
输入型包括单行文本（文本、数值、电话、密码等）、多行文本；
选择型包括下拉选择、单选、多选、开关、日期时间等。在 WeUI 中，表单通常与 Cell 组件配合使用。

Label（表单字段）

(表单字段，一般放在表单的左边<label class="weui_label">qq</label>)

Input（输入框，属性class="weui_input" type="text/number/tel/password", placeholder="请输入qq号"）
class：
weui_cells_title
（表单头部）
weui_cells_form
（ （表单盒子，前面要加weui_cells）
weui_cell
（单元格）
weui_cell_hd
（单元格头部）
weui_label
（表单字段）
weui_cell_bd
（单元格内容，类后面加weui_cell_primary自适应）
weui_input
（输入框）

(当 Cells 内有表单元素时，需要添加 .weui_cells_form 类，来单独设置其他的样式。)

Textarea(文本域)
用作输入多行文本。不同于 Input，在 WeUI 的设计中，文本域没有 label ，在 placeholder 中提示用户输入信息即可。通常，输入多行文本时，都有字数限制，WeUI 提供了相应的样式配合使用。
class:
weui_cells_title
weui_cells_form
（前面加weui_cells）
weui_cell
weui_cell_bd
（后面加自适应weui_cell_primary）
<textarea class="weui_textarea" placeholder="请输入意见反馈" rows="3"></textarea>
<div class="weui_textarea_counter"><span>0</span>/200</div>

Radio(单选框)
在 WeUI 的设计中，单选框列表通常是独立一组的，推荐左边文字，右边选中图标，用户只能选择其中一个选项

Checkbox(复选框)
与 Radio 类似，默认也是通过 label 标签的 for 属性来关联选择。不同的是，Checkbox 允许用户同时选择多个选项，推荐选中图标放在左边。

Select(选择框)
这些选项默认是隐藏起来的，当用户点击时，才会展开来让用户选择。通常是在选项较多、或选项不太重要，不需要展示出来时使用。
下拉框是占据一整行，也可以配合 Input 输入框使用，下拉框放在左边，表示输入框的前缀。

这段代码放在cell的hd，bd，ft部分
<select class="weui_select" name="select2">
<option value="1">+86</option>
<option value="2">+80</option>
<option value="3">+84</option>
<option value="4">+87</option>
</select>

Switch(开关)
只有两个状态，用于让用户选择“开启”还是“关闭”。使用起来很简单，只需要给 input 标签加上 .weui_switch 类即可。

Uploader(上传组件)
图片的展示已background-image写在.weui_uploader_file里，默认是background-size:cover。上传中的状态需要为.weui_uploader_file添加.weui_uploader_status。icon或文字都可放到它的子元素.weui_uploader_status_content里面，它是上下左右居中。

8.Panel(图文组合列表)