查看WeChat UI 设计的源代码
←
WeChat UI 设计
跳转到:
导航
,
搜索
因为以下原因,你没有权限编辑本页:
您刚才请求的操作只有这个用户组中的用户才能使用:
用户
您可以查看并复制此页面的源代码:
== 概述 == 微信官方开源了 WeUI ,其是一套与微信原生 UI 一致的 UI 库,核心文件是 weui.css,只需要获取到该文件,然后在页面中引入,即可使用 WeUI 的组件。有以下几种获取方式: * 微信官方 http://res.wx.qq.com/open/libs/weui/0.4.0/weui.css * BootCDN http://cdn.bootcss.com/weui/0.4.0/style/weui.css * cdnjs http://cdnjs.cloudflare.com/ajax/libs/weui/0.4.0/style/weui.css 其中,0.4.0 是目前 WeUI 最新的版本号,其他版本同理。 以上链接,均支持 http 和 https 协议,均包含未压缩版 weui.css 和压缩版 weui.min.css WeUI 的源码在: https://github.com/weui/weui WeUI 页面示例: * http://weui.github.io/react-weui * http://weui.github.io/weui <br><br> == Quick Start == <pre> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>WeUI</title> <!-- 引入 WeUI --> <link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css"/> </head> <body> <!-- 使用 --> <a href="javascript:;" class="weui_btn weui_btn_primary">绿色按钮</a> </body> </html> </pre> <br><br> == Notes == === Switch === <pre> <div class="weui_cells_title">鱼缸控制系统</div> <div class="weui_cells weui_cells_form"> <div class="weui_cell weui_cell_switch"> <div class="weui_cell_hd weui_cell_primary">氧气泵</div> <div class="weui_cell_ft"> <input class="weui_switch" type="checkbox"> </div> </div> <div class="weui_cell weui_cell_switch"> <div class="weui_cell_hd weui_cell_primary">景观灯</div> <div class="weui_cell_ft"> <input class="weui_switch" type="checkbox" checked> </div> </div> <div class="weui_cell weui_cell_switch"> <div class="weui_cell_hd weui_cell_primary">水质净化</div> <div class="weui_cell_ft"> <input class="weui_switch" type="checkbox" checked> </div> </div> </div> </pre> <br><br> === Tabs === <pre> </pre> <br><br> == Reference == * http://codepen.io/progrape/pen/dGmJPw * http://weui.github.io/weui/ * http://www.color-hex.com/color/ff525e <br><br> <br><br> <br><br> <br><br> <br><br> <br><br>
返回到
WeChat UI 设计
。
个人工具
登录
名字空间
页面
讨论
变换
查看
阅读
查看源代码
查看历史
操作
搜索
导航
首页
社区专页
新闻动态
最近更改
随机页面
帮助
工具箱
链入页面
相关更改
特殊页面