基于bootstrap的UI框架有：1、AdminLTE框架；2、ACE框架；3、clearmin框架；4、h-ui框架；5、Echats框架等等。

推薦：《bootstrap教程》

淺談當(dāng)前基于bootstrap框架的幾種主流前端框架

一 概述

當(dāng)新開發(fā)一個(gè)項(xiàng)目或產(chǎn)品時(shí)，技術(shù)選型是一個(gè)不可缺少的環(huán)節(jié)，在軟件架構(gòu)中有著舉足輕重的作用，可以這么說，技術(shù)選型的好壞直接影響項(xiàng)目或產(chǎn)品的成敗優(yōu)劣，因此，在進(jìn)行軟件架構(gòu)時(shí)，一定要想好技術(shù)選型。傳統(tǒng)的前后端耦合在一起的模式，基本上不能滿足當(dāng)前環(huán)境下的大數(shù)據(jù)，高并發(fā)等需求，如.NET 的WebForm模式逐漸被MVC取代，MVC逐漸取代WebForm，其中有兩點(diǎn)重要的原因：MVC前后端徹底分離和MVC通用性比較好。從架構(gòu)的架構(gòu)，我們把軟件架構(gòu)抽象為兩部分，即前端和后端，兩者通過接口來傳遞數(shù)據(jù)。但在本篇文章中，不談架構(gòu)，只是與大家分享幾種基于Bootsrap的比較主流的前端框架。

當(dāng)前幾種比較流行的前端框架

（一）AdminLTE

1.參考網(wǎng)址：https://adminlte.io/

2.開源

3.Bootstrap3框架

4.輕量級(jí)

5.完全響應(yīng)式，支持定制化

6.github:https://github.com/almasaeed2010/AdminLTE

（二）ACE框架

1.參考網(wǎng)址：http://ace.jeka.by/

2.Twitter bootstrap3開發(fā)的后臺(tái)模板

3.開源

4.github:https://github.com/bopoda/ace

（三）clearmin

1.參考網(wǎng)址：http://cm.paomedia.com/

2.基于Bootstrap3框架開發(fā)的

3.github:https://github.com/paomedia/clearmin

（四）h-ui

1.參考網(wǎng)址：http://www.h-ui.net/H-ui.admin.shtml

2.H-ui.admin是用H-ui前端框架開發(fā)的輕量級(jí)網(wǎng)站后臺(tái)模版采用源生html語言，完全免費(fèi)，簡單靈活，兼容性好讓您快速搭建中小型網(wǎng)站后臺(tái)

(五)Echats

1.參考網(wǎng)址：http://echarts.baidu.com/

2.由百度團(tuán)隊(duì)開發(fā)，完全用js開發(fā)，功能強(qiáng)大，各種類型報(bào)表

三 Echarts架構(gòu)圖

如上雖然給大家推薦了五套前端框架，但筆者推薦AdminLTE+H-ui+Echarts組合模式，這也是我目前在軟件架構(gòu)中運(yùn)用到的組合模式。

Echarts框架

四 用Echarts做個(gè)報(bào)表統(tǒng)計(jì)

（一）先看看DEMO效果圖

動(dòng)態(tài)效果

1.支持多種動(dòng)報(bào)表切換，如Line,Bar等；

2.具有隱藏/顯示按鈕；

3.具有數(shù)據(jù)表格功能；

4.具有圖標(biāo)保存功能。

（二） 前端Code

1.定義一個(gè)p容器

1 <p id="EchartsBarDemo" style="width:100%;height:600px"></p>

2.初始化

1 var myChart = echarts.init(document.getElementById('EchartsBarDemo'));

3.設(shè)置option

var option = {                 title: {                     text: 'XXX高三6月學(xué)生總分統(tǒng)計(jì)',                     subtext: '虛擬數(shù)據(jù)'                 },                 tooltip: {                     trigger: 'axis'                 },                 legend: {                     data: ['文科', '理科']                 },                 toolbox: {                     show: true,                     feature: {                         mark: { show: true },                         dataView: { show: true, readOnly: false },                         magicType: { show: true, type: ['line', 'bar'] },                         restore: { show: true },                         saveAsImage: { show: true }                     }                 },                 calculable: true,                 xAxis: [                     {                         type: 'category',                         data: ['300以下', '300-400', '400-500', '500-550', '550-600', '600-650', '650以上']                     }                 ],                 yAxis: [                     {                         type: 'value'                     }                 ],                 series: [                     {                         name: '理科',                         type: 'bar',                         data: LiKeScores,                         markPoint: {                             data: [                                 { type: 'max', name: '最大值' },                                 { type: 'min', name: '最小值' }                             ]                         },                         markLine: {                             data: [                                 { type: 'average', name: '平均值' }                             ]                         }                     },                     {                         name: '文科',                         type: 'bar',                         data: WenKeScores,                         markPoint: {//標(biāo)注點(diǎn)                             data: [                                 { type: 'max', name: '最大值' },                                 { type: 'min', name: '最小值' }                             ]                         },                         markLine: { //水平線                             data: [                                 { type: 'average', name: '平均值' } //水平線表示平均值                             ]                         }                     }                 ]             }

4.將option添加給myCharts實(shí)例

 myChart.setOption(option);  // 設(shè)置加載等待隱藏  myChart.hideLoading();

（三）.NET

public class DefaultController : Controller     {         // GET: Default         public ActionResult BarEcharts()         {             return View();         }          public ContentResult GetScoresJson()         {             //這里只是模擬數(shù)據(jù)，正式環(huán)境需要到db中查詢             return Content("{LiKe:[10, 20, 30, 100, 300, 80, 60],WenKe:[15, 10, 30, 80, 400, 100, 60]}");         }     }

（四）完整源碼

1.前端

<html> <head>     <meta name="viewport" content="width=device-width" />     <script src="~/Scripts/jquery-3.3.1.js"></script>     <script src="~/Scripts/echarts.js"></script>     <title>BarEcharts</title> </head> <body>     <div id="EchartsBarDemo" style="width:100%;height:600px"></div> </body> </html>  <script>     //初始化     var myChart = echarts.init(document.getElementById('EchartsBarDemo'));     //定義全局變量     //var LiKeScores = [10, 20, 30, 100, 300, 80, 60];     //var WenKeScores = [15, 10, 30, 80, 400, 100, 60];     var LiKeScores = [];     var WenKeScores = [];     var jsonURL = "/Default/GetScoresJson";     $.ajax({         type: 'get',         url: jsonURL,         dataType: "text",         success: function (rspData) {             console.log(rspData);             var str = eval('(' + rspData + ')');             LiKeScores =str.LiKe;             WenKeScores = str.WenKe;             var option = {                 title: {                     text: 'XXX高三6月學(xué)生總分統(tǒng)計(jì)',                     subtext: '虛擬數(shù)據(jù)'                 },                 tooltip: {                     trigger: 'axis'                 },                 legend: {                     data: ['文科', '理科']                 },                 toolbox: {                     show: true,                     feature: {                         mark: { show: true },                         dataView: { show: true, readOnly: false },                         magicType: { show: true, type: ['line', 'bar'] },                         restore: { show: true },                         saveAsImage: { show: true }                     }                 },                 calculable: true,                 xAxis: [                     {                         type: 'category',                         data: ['300以下', '300-400', '400-500', '500-550', '550-600', '600-650', '650以上']                     }                 ],                 yAxis: [                     {                         type: 'value'                     }                 ],                 series: [                     {                         name: '理科',                         type: 'bar',                         data: LiKeScores,                         markPoint: {                             data: [                                 { type: 'max', name: '最大值' },                                 { type: 'min', name: '最小值' }                             ]                         },                         markLine: {                             data: [                                 { type: 'average', name: '平均值' }                             ]                         }                     },                     {                         name: '文科',                         type: 'bar',                         data: WenKeScores,                         markPoint: {//標(biāo)注點(diǎn)                             data: [                                 { type: 'max', name: '最大值' },                                 { type: 'min', name: '最小值' }                             ]                         },                         markLine: { //水平線                             data: [                                 { type: 'average', name: '平均值' } //水平線表示平均值                             ]                         }                     }                 ]             }             myChart.setOption(option);             // 設(shè)置加載等待隱藏             myChart.hideLoading();         },         error: function (data) {             console.log(data);             LiKeScores = data.LiKe;             WenKeScores = data.WenKe;             //Loading(false);         }     }); </script>

2.后端

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;  namespace EchartDemo.Controllers {     public class DefaultController : Controller     {         // GET: Default         public ActionResult BarEcharts()         {             return View();         }          public ContentResult GetScoresJson()         {             //這里只是模擬數(shù)據(jù)，正式環(huán)境需要到db中查詢             return Content("{LiKe:[10, 20, 30, 100, 300, 80, 60],WenKe:[15, 10, 30, 80, 400, 100, 60]}");         }     } }