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)
列表视图，用于将信息以列表的结构显示在页面上
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 （弹窗中的【确认】按钮，一般在
可以使用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)
列表视图，用于将信息以列表的结构显示在页面上
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 （弹窗中的【确认】按钮，一般在
里面的a标签的class中，另外，后面加Primary就是绿色，default就是白色）
weui_dialog_confirm （confirm弹窗）
（confirm弹窗结构与alert大同小异，唯一区别就是在
weui_dialog_confirm （confirm弹窗）
（confirm弹窗结构与alert大同小异，唯一区别就是在
这个盒子下
有两个a标签，一个是【取消】，一个是【确认】
4.Toast
toast 用于临时显示某些信息，并且会在数秒后自动消失。这些信息通常是轻量级操作的成功信息。
提醒：WeUI 不推荐在 toast 中展示失败状态，失败状态应该使用 Alert 明确告知用户失败原因
class:
...
????????????????????????????????
先跳过
5.Msg Page(结果页)
结果页通常来说可以认为进行一系列操作步骤后，作为流程结束的总结性页面。
class：
weui_msg （Msg Page容器）
weui_icon_area （这个div盒子里一般放
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（表单字段）
(表单字段，一般放在表单的左边)
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）
Radio(单选框)
在 WeUI 的设计中，单选框列表通常是独立一组的，推荐左边文字，右边选中图标，用户只能选择其中一个选项
Checkbox(复选框)
与 Radio 类似，默认也是通过 label 标签的 for 属性来关联选择。不同的是，Checkbox 允许用户同时选择多个选项，推荐选中图标放在左边。
Select(选择框)
这些选项默认是隐藏起来的，当用户点击时，才会展开来让用户选择。通常是在选项较多、或选项不太重要，不需要展示出来时使用。
下拉框是占据一整行，也可以配合 Input 输入框使用，下拉框放在左边，表示输入框的前缀。
这段代码放在cell的hd，bd，ft部分
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(图文组合列表)
有两个a标签，一个是【取消】，一个是【确认】
4.Toast
toast 用于临时显示某些信息，并且会在数秒后自动消失。这些信息通常是轻量级操作的成功信息。
提醒：WeUI 不推荐在 toast 中展示失败状态，失败状态应该使用 Alert 明确告知用户失败原因
class:
...
????????????????????????????????
先跳过
5.Msg Page(结果页)
结果页通常来说可以认为进行一系列操作步骤后，作为流程结束的总结性页面。
class：
weui_msg （Msg Page容器）
weui_icon_area （这个div盒子里一般放
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（表单字段）
(表单字段，一般放在表单的左边)
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）
0/200
Radio(单选框)
在 WeUI 的设计中，单选框列表通常是独立一组的，推荐左边文字，右边选中图标，用户只能选择其中一个选项
Checkbox(复选框)
与 Radio 类似，默认也是通过 label 标签的 for 属性来关联选择。不同的是，Checkbox 允许用户同时选择多个选项，推荐选中图标放在左边。
Select(选择框)
这些选项默认是隐藏起来的，当用户点击时，才会展开来让用户选择。通常是在选项较多、或选项不太重要，不需要展示出来时使用。
下拉框是占据一整行，也可以配合 Input 输入框使用，下拉框放在左边，表示输入框的前缀。
这段代码放在cell的hd，bd，ft部分
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(图文组合列表)