博主的職位是java后臺開發的，但是由于在公司也要負責一些前端頁面的開發，所以也有接觸到一些前端的框架。 由于博主才工作不到一年，積累經驗并不是很多，因此，本文只介紹三個框架：BUI、Swiper和Bootstrap。另外，這些框架絕不是一篇博客就可以講述清楚的，因此本主要以介紹為主，不過對于每個框架都會配有一個實例講解，因此還是值得一讀的。 ### 一、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://120.26.80.109/docs/api/index.html)，當然對于入門猿友，個人還是十分建議你先閱讀一個實例網站：[http://www.builive.com/](http://www.builive.com/)，里面有許多BUI相關實例，如果實例解決不了你的問題再去詳細研究其API。 **1.2、獲取BUI** 如何獲取到最新版的BUI？BUI在github有個開源項目，地址為：[https://github.com/dxq613/bui](https://github.com/dxq613/bui)，猿友們可直接下載其對應工程，然后里面有個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目錄。 **下面是一個表格實例效果展示：**  **本工程源碼下載（解壓瀏覽器打開即可）** [http://download.csdn.net/detail/u013142781/9419002](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/](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> ~~~ 實例效果：  本工程源碼下載（解壓瀏覽器打開即可）： [http://download.csdn.net/detail/u013142781/9419005](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.bootcss.com/)，另外，博主推薦另外一個網站配有其詳細實例：[http://www.runoob.com/bootstrap/bootstrap-intro.html](http://www.runoob.com/bootstrap/bootstrap-intro.html)，當然對于入門，這兩者都是十分不錯的選擇。 獲取Bootstrap，可到其官網如下鏈接：[http://v3.bootcss.com/getting-started/#download](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為主。 本工程源碼下載（解壓瀏覽器打開即可）： [http://download.csdn.net/detail/u013142781/9419007](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](http://download.csdn.net/detail/u013142781/9420276) **4.5、chrome跨域訪問問題解決** chrome通過$.ajax請求本地的json文件數據，會出現如下錯誤：XMLHttpRequest cannot load：  上圖錯誤是因為跨域請求資源導致的，由于瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不同即為跨域。具體可以查看下表：  而我們這里并不是http請求，因此也同樣會出現這個問題。 解決方式是給chrome快捷方式添加啟動參數： ~~~ --allow-file-access-from-files ~~~ 注意一定是給快捷方式添加啟動參數：  添加方式： 選中快捷方式圖標，右鍵–>屬性–>快捷方式–>目標（T）的值最后面添加上述參數：  注意“- -”前是有個空格的，添加完成之后，重新利用快捷方式打開chrome，然后訪問jsontext.html發現OK了！