博主的职位是java后台开发的，可是因为在公司也要负责一些前端页面的开发，所以也有接触到一些前端的框架。
因为博主才工作不到一年，积累经验并非非常多，因此。本文仅仅介绍三个框架：BUI、Swiper和Bootstrap。另外，这些框架绝不是一篇博客就能够讲述清楚的，因此本主要以介绍为主，只是对于每一个框架都会配有一个实例解说。因此还是值得一读的。
一、BUI框架
1.1、BUI介绍
BUI 是基于 jQuery 兼容 Kissy 的 Web UI 类库。专注于解决后台系统的框架方案。
BUI是十分适合作为后台管理系统的前端框架，因为：
（1）后台管理系统数据以表格形式呈现。然后就是增删查改等操作，分页等功能，使用起来十分便利。
（2）BUI还提供了数据统计显示的各种图片，什么折线图、区域图、柱状图、饼图等等。
（3）BUI还提供了各种button、面包屑。工具栏等等各种前端样式。
总之，一般后台管理系统的功能的样式也实现，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。猿友们可直接下载其相应project，然后里面有个build文件夹。里面是已经打包好的css和js文件，我们仅仅须要用到里面的文件就好了。
1.3、BUI实例
我仅仅须要引入以下这五个文件：
<link href="css/dpl-min.css" rel="stylesheet">
<link href="css/bui-min.css" rel="stylesheet">
<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文件夹。
以下是一个表格实例效果展示：
本project源代码下载（解压浏览器打开就可以）
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插件，实例仅仅须要导入例如以下两个文件：
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>实例效果：
本project源代码下载（解压浏览器打开就可以）：
http://download.csdn.net/detail/u013142781/9419005
上面的实例过于简单了一些，事实上猿友们能够对Swiper封装一下。例如以下效果是博主封装的一联动、二联动、三联动选择：、
因为这是工作上分装的代码，不方便提供源代码，请谅解。这里仅仅是提醒各位猿友可在其基础上分装出适合自己场景的代码。
三、Bootstrap框架
3.1、Bootstrap框架介绍
可能非常多猿友们已经对Bootstrap框架有了一定的了解。
Bootstrap。来自 Twitter，是眼下非常受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
Bootstrap中包括了丰富的Web组件，根据这些组件，能够高速的搭建一个美丽、功能完备的站点。当中包括以下组件：下拉菜单、button组、button下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等
另外，通过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/#download，我们不採用定制版，因此下载这个就好了：
3.2、Bootstrap实例
上面我们获取到Bootstrap的一些css、js和一些字体文件之后，我们还须要去下载jquery。因为Bootstrap是依赖jquery的。这里博主下载的是jquery-1.9.1.min.js，因为我下载的Bootstrap必须要jquery-1.9.1以上版本号。
实例仅仅须要导入例如以下几个文件：
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>实例效果展示：
上图仅仅是一个简单的表单样例。可是Bootstrap是非常好看的。这里因为博主时间有限，因此样例比較粗糙，主要以介绍Bootstrap为主。
本project源代码下载（解压浏览器打开就可以）：
http://download.csdn.net/detail/u013142781/9419007
四、通过请求json文件获取省市区联动下拉小样例
4.1、将省市区的数据放到json文件中面，address.json：
4.2、前端通过例如以下jquery代码获取数据：
var ADDRESS_DATA_SOURCE = [];
function initAddressDataSource(){
$.ajax({
type: 'GET',
url: 'json/address.json',
async: false,
dataType: 'json',
success: function(data) {
ADDRESS_DATA_SOURCE = data;
},
error: function(err) { // 备用方案
alert('获取省市区数据失败,使用网络备用方案...');
}
});
}4.3、实例演示
4.4、实例源代码下载：
http://download.csdn.net/detail/u013142781/9420276
4.5、chrome跨域訪问问题解决
chrome通过$.ajax请求本地的json文件数据，会出现例如以下错误：XMLHttpRequest cannot load：
上图错误是因为跨域请求资源导致的，因为浏览器同源策略，凡是发送请求url的协议、域名、port三者之间随意一与当前页面地址不同即为跨域。具体能够查看下表：
而我们这里并非http请求。因此也相同会出现这个问题。
解决方案是给chrome快捷方式加入启动參数：
--allow-file-access-from-files注意一定是给快捷方式加入启动參数：
加入方式：
选中快捷方式图标。右键–>属性–>快捷方式–>目标（T）的值最后面加入上述參数：
注意“- -”前是有个空格的。加入完毕之后。又一次利用快捷方式打开chrome，然后訪问jsontext.html发现OK了！