前端框架学习



一、BUI框架

1.1、BUI介绍

BUI 是基于 jQuery 兼容 Kissy 的 Web UI 类库。专注于解决后台系统的框架方案。

BUI是十分适合作为后台管理系统的前端框架，因为：

（1）后台管理系统数据以表格形式呈现，然后就是增删查改等操作，分页等功能，使用起来十分便利。

（2）BUI还提供了数据统计显示的各种图片，什么折线图、区域图、柱状图、饼图等等。

（3）BUI还提供了各种按钮、面包屑，工具栏等等各种前端样式。

总之，一般后台管理系统的功能的样式也实现，BUI基本能够满足。其功能点这里无法一一详细介绍。猿友们可以参考其API：http://120.26.80.109/docs/api/index.html，当然对于入门猿友，个人还是十分建议你先阅读一个实例网站：http://www.builive.com/，里面有许多BUI相关实例，如果实例解决不了你的问题再去详细研究其API。

1.2、获取BUI

如何获取到最新版的BUI？BUI在github有个开源项目，地址为：https://github.com/dxq613/bui，猿友们可直接下载其对应工程，然后里面有个build目录，里面是已经打包好的css和js文件，我们只需要用到里面的文件就好了。

1.3、BUI实例

我只需要引入下面这五个文件：

<script src="js/jquery-1.8.1.min.js"></script><script src="js/bui-min.js"></script><script src="js/layout-min.js"></script>

除了jquery是我自己在其他地方下载的，其他的都是来自build目录。

下面是一个表格实例效果展示：

本工程源码下载（解压浏览器打开即可）

http://download.csdn.net/detail/u013142781/9419002

其他更多功能就待猿友研究使用啦

二、Swiper框架

2.1、Swiper框架介绍

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

简单来说，Swiper就是实现了一个滑动切换图片或面板的效果。显然是针对移动端的。

一些新闻图片排本等等是十分适用的，另外在其基础上，博主还封装成如下效果哦：

上图就是博主在Swiper基础上做成的省市区三联动效果，因此Swiper对于移动端的滑动场景还是十分有用的。

关于Swiper猿友们可以直接查看其官网：http://www.swiper.com.cn/，官网配有详细介绍和使用API以及Swiper的下载。

2.2、Swiper实例

下面是博主的一个实例，在官网即可下载Swiper插件，实例只需要导入如下两个文件：

<script src="js/swiper.min.js"></script>

实例效果：

本工程源码下载（解压浏览器打开即可）：

http://download.csdn.net/detail/u013142781/9419005

上面的实例过于简单了一些，其实猿友们可以对Swiper封装一下，如下效果是博主封装的一联动、二联动、三联动选择：、

由于这是工作上分装的代码，不方便提供源码，请谅解。这里只是提醒各位猿友可在其基础上分装出适合自己场景的代码。

三、Bootstrap框架

3.1、Bootstrap框架介绍

可能很多猿友们已经对Bootstrap框架有了一定的了解。

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等

另外，通过Less可以对Bootstrap中所有的CSS变量进行修改，并依据自己的需求裁剪代码。

另外一个重点是，Bootstrap是自适应的，可以支持PC和移动端页面，自动调整其样式宽度高度，做PC端和移动端的网页都可以使用它。当然，完全做到自适应是不可能的，但是Bootstrap基本适用大部分场景了。

其官网链接：http://www.bootcss.com/，另外，博主推荐另外一个网站配有其详细实例：http://www.runoob.com/bootstrap/bootstrap-intro.html，当然对于入门，这两者都是十分不错的选择。

获取Bootstrap，可到其官网如下链接：http://v3.bootcss.com/getting-started/，我们不采用定制版，因此下载这个就好了：

3.2、Bootstrap实例<喎�"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPjwvcD4NCjxwPsnPw+bO0sPHu/HIobW9Qm9vdHN0cmFwtcTSu9CpY3NzoaJqc7rN0rvQqdfWzOXOxLz+1q6686OsztLDx7u50OjSqsilz8LU2GpxdWVyeaOs0vLOqkJvb3RzdHJhcMrH0sDAtWpxdWVyebXEo6zV4sDvsqnW98/C1Ni1xMrHanF1ZXJ5LTEuOS4xLm1pbi5qc6Os0vLOqs7Sz8LU2LXEQm9vdHN0cmFwsdjQ69KqanF1ZXJ5LTEuOS4x0tTJz7Dmsb6hozwvcD4NCjxwPsq1wP3Wu9Do0qq1vMjryOfPwry4uPbOxLz+o7o8L3A+DQo8cHJlIGNsYXNzPQ=="brush:java;"><script src="js/jquery-1.9.1.min.js"></script>







四  jQuery EasyUI

    easyui是一种基于jQuery的用户界面插件集合

　　优点：轻量，组件较为丰富，效果还可以，版本已经趋于稳定，官方有专人维护与技术支持。

　　缺点：部分组件功能不太丰富，有少量兼容性问题，性能有些小小问题。

五 Bootstrap

 Bootstrap是由twitter推出的Web前端UI框架，它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。它使用了最新的浏览器技术，Bootstrap提供了时尚的排版样式，表单，buttons，表格，网格系统等等。