一、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://www.2cto.com/uploadfile/Collfiles/20160127/2016012709183764.gif)
本工程源码下载(解压浏览器打开即可)
http://download.csdn.net/detail/u013142781/9419002
其他更多功能就待猿友研究使用啦
二、Swiper框架
2.1、Swiper框架介绍
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
简单来说,Swiper就是实现了一个滑动切换图片或面板的效果。显然是针对移动端的。
一些新闻图片排本等等是十分适用的,另外在其基础上,博主还封装成如下效果哦:
![\ 这里写图片描述](http://www.2cto.com/uploadfile/Collfiles/20160127/2016012709183865.gif)
上图就是博主在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