今天我们开始自学weui框架，简短洁说weui框架是专为微信开发的一个强大的UI库。个人觉得weui框架算是组件化开发，主要由一些基础的组件，列表，表单，卡片，对话框，下拉刷新等组成。我们主要是学习如何使用这些组件搭建一个美观的布局。首先我们来说说weui框架的一个环境搭建。我们先要下载我们所需要的文件在weui官方网站下载，我们现在主要是学习一些基础的组件布局，我们暂时所需要的文件只是css文件，参考如下：
<!--响应式移动端-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<!--引入weui-->
<link rel="stylesheet" type="text/css" href="css/weui.min.css"/>
当然我们不能缺少的响应移动端。基础的环境已经搭建好了。今天学习的组件主要是按钮，列表视图，弹性盒子。先说说按钮，按钮在任何一个页面都是不可缺少的，在weui框架中同样也有好几种情景的按钮。我们来看看代码如下：
<h3>按钮</h3>
<div>
<a href="##" class="weui-btn weui-btn_default">默认按钮</a>
<a href="##" class="weui-btn weui-btn_default weui-btn_disabled">禁用默认按钮</a>
<a href="##" class="weui-btn weui-btn_primary">原始按钮</a>
<a href="##" class="weui-btn weui-btn_primary weui-btn_disabled">禁用原始按钮</a>
<a href="##" class="weui-btn weui-btn_warn">危险按钮</a>
<a href="##" class="weui-btn weui-btn_warn weui-btn_disabled">禁用危险按钮</a>
<div>
<a href="##" class="weui-btn weui-btn_plain-default">镂空按钮</a>
<a href="##" class="weui-btn weui-btn_plain-primary">镂空按钮</a>
<a href="##" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
<a href="##" class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
<a href="##" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
</div>
</div>
大家可能会发现这几个按钮的类和bootstrap里的按钮有点类似，是的，没错，我们weui框架大部分都是效仿bootstrap框架的。以上的代码实现的效果呢，我们来看看下图：
效果图如上，再来说说主要的几个类名，首先是按钮的类 "weui-btn" 其次再是我们的情景按钮类有"weui-btn_default，weui-btn_primary，weui-btn_warn" 代码中都有相应的注释。类"weui-btn_disabled"是禁用按钮样式,类"weui-btn_plain-default"是镂空按钮的样式，类"weui-btn_mini"是迷你按钮。按钮就介绍到这里。毕竟说再多还不如实践。下面我们再来说说列表视图。列表视图我们很多也很常见，比如我们经常在微信上看到的带图标、说明、跳转的列表项。我们来看看代码：
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="img/new-1.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</a>
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="img/new-1.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</a>
</div>
代码实现的效果我们来看看: 
实现的效果如上，是不是觉得在微信上见到。
Cell由多个section组成，每个section包括section headerweui-cells__title以及cellsweui-cells。
cell由thumbnailweui-cell__hd、bodyweui-cell__bd、accessoryweui-cell__ft三部分组成，其中weui-cell__bd采用自适应布局。实践出真知，大家可以多在页面中检查看看这些类都有些什么样式，才会明白是如何做到的。最后我们来说说我们常用的弹性盒子布局，弹性盒子大家都知道，非常好用，它会自己根据页面来均分每个盒子的大小，且自适应。既然这么好用我们来看看weui框架中的flex是如何使用的吧。代码如下：
<div class="weui-flex">
<div class="weui-flex__item">
<div style="height: 80px;background: gray;"></div>
</div>
<div class="weui-flex__item">
<div style="height: 80px;background: tan;"></div>
</div>
<div class="weui-flex__item">
<div style="height: 80px;background: yellowgreen;"></div>
</div>
<div class="weui-flex__item">
<div style="height: 80px;background: aqua;"></div>
</div>
</div>
我们给每个盒子设置了高度和背景色，这样直观效果更加明显。效果如下： 
弹性盒子是通过父元素display：flex；子元素flex：1；实现的，好处就是能根据你的屏幕大小而自己适应。大家可以多多尝试，至于盒子里的内容就自行发挥了。我们的weui框架还有很多，今天的介绍就到这里，以上纯属个人观点，如有错误欢迎指正。明天我们会持续更新，希望能给阅读文章的你带来收益，谢谢大家！