前端框架学习

一、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实例

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

[java] view plain copy
  1.   
<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插件,实例只需要导入如下两个文件:

[java] view plain copy
  1.   
<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,表格,网格系统等等。
阅读更多
想对作者说点什么? 我来说一句

前端各种学习手册

2017年10月28日 102.12MB 下载

vue.js框架

学习前端框架

学院

2017年05月17日 19:51

没有更多推荐了,返回首页

不良信息举报

前端框架学习

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭