基于bootstrap的UI框架有：1、AdminLTE框架；2、ACE框架；3、clearmin框架；4、h-ui框架；5、Echats框架等等。
創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的浦北網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
推薦：《bootstrap教程》
淺談當前基于bootstrap框架的幾種主流前端框架
一 概述當新開發(fā)一個項目或產(chǎn)品時，技術(shù)選型是一個不可缺少的環(huán)節(jié)，在軟件架構(gòu)中有著舉足輕重的作用，可以這么說，技術(shù)選型的好壞直接影響項目或產(chǎn)品的成敗優(yōu)劣，因此，在進行軟件架構(gòu)時，一定要想好技術(shù)選型。傳統(tǒng)的前后端耦合在一起的模式，基本上不能滿足當前環(huán)境下的大數(shù)據(jù)，高并發(fā)等需求，如.NET 的WebForm模式逐漸被MVC取代，MVC逐漸取代WebForm，其中有兩點重要的原因：MVC前后端徹底分離和MVC通用性比較好。從架構(gòu)的架構(gòu)，我們把軟件架構(gòu)抽象為兩部分，即前端和后端，兩者通過接口來傳遞數(shù)據(jù)。但在本篇文章中，不談架構(gòu)，只是與大家分享幾種基于Bootsrap的比較主流的前端框架。
當前幾種比較流行的前端框架
（一）AdminLTE1.參考網(wǎng)址：https://adminlte.io/
2.開源
3.Bootstrap3框架
4.輕量級
5.完全響應(yīng)式，支持定制化
6.github:https://github.com/almasaeed2010/AdminLTE
（二）ACE框架1.參考網(wǎng)址：http://ace.jeka.by/
2.Twitter bootstrap3開發(fā)的后臺模板
3.開源
4.github:https://github.com/bopoda/ace
（三）clearmin1.參考網(wǎng)址：http://cm.paomedia.com/
2.基于Bootstrap3框架開發(fā)的
3.github:https://github.com/paomedia/clearmin
（四）h-ui1.參考網(wǎng)址：http://www.h-ui.net/H-ui.admin.shtml
2.H-ui.admin是用H-ui前端框架開發(fā)的輕量級網(wǎng)站后臺模版采用源生html語言，完全免費，簡單靈活，兼容性好讓您快速搭建中小型網(wǎng)站后臺
(五)Echats1.參考網(wǎng)址：http://echarts.baidu.com/
2.由百度團隊開發(fā)，完全用js開發(fā)，功能強大，各種類型報表
三 Echarts架構(gòu)圖如上雖然給大家推薦了五套前端框架，但筆者推薦AdminLTE+H-ui+Echarts組合模式，這也是我目前在軟件架構(gòu)中運用到的組合模式。
Echarts框架
四 用Echarts做個報表統(tǒng)計（一）先看看DEMO效果圖動態(tài)效果
1.支持多種動報表切換，如Line,Bar等；
2.具有隱藏/顯示按鈕；
3.具有數(shù)據(jù)表格功能；
4.具有圖標保存功能。
（二） 前端Code1.定義一個p容器
1
2.初始化
重慶分公司
重慶分公司
1 var myChart = echarts.init(document.getElementById('EchartsBarDemo'));3.設(shè)置option
var option = {
title: {
text: 'XXX高三6月學(xué)生總分統(tǒng)計',
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: {//標注點
data: [
{ type: 'max', name: '值' },
{ type: 'min', name: '最小值' }
]
},
markLine: { //水平線
data: [
{ type: 'average', name: '平均值' } //水平線表示平均值
]
}
}
]
}4.將option添加給myCharts實例
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.前端
BarEcharts
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]}");
}
}
} 
