基于bootstrap的主流框架有哪些
一、总结
一句话总结：其实可以直接百度bootstrap后台模板，出来一大堆，想用哪个用哪个。
二、【前端框架系列】浅谈当前基于bootstrap框架的几种主流前端框架
一 概述
当新开发一个项目或产品时，技术选型是一个不可缺少的环节，在软件架构中有着举足轻重的作用，可以这么说，技术选型的好坏直接影响项目或产品的成败优劣，因此，在进行软件架构时，一定要想好技术选型。传统的前后端耦合在一起的模式，基本上不能满足当前环境下的大数据，高并发等需求，如.NET 的WebForm模式逐渐被MVC取代，MVC逐渐取代WebForm，其中有两点重要的原因：MVC前后端彻底分离和MVC通用性比较好。从架构的架构，我们把软件架构抽象为两部分，即前端和后端，两者通过接口来传递数据。但在本篇文章中，不谈架构，只是与大家分享几种基于Bootsrap的比较主流的前端框架。
二 当前几种比较流行的前端框架
（一）AdminLTE
1.参考网址：https://adminlte.io/
2.开源
3.Bootstrap3框架
4.轻量级
5.完全响应式，支持定制化
6.github:https://github.com/almasaeed2010/AdminLTE
（二）ACE框架
1.参考网址：http://ace.jeka.by/
2.Twitter bootstrap3开发的后台模板
3.开源
4.github:https://github.com/bopoda/ace
（三）clearmin
1.参考网址：http://cm.paomedia.com/
2.基于Bootstrap3框架开发的
3.github:https://github.com/paomedia/clearmin
（四）h-ui
1.参考网址：http://www.h-ui.net/H-ui.admin.shtml
2.H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版采用源生html语言，完全免费，简单灵活，兼容性好让您快速搭建中小型网站后台
(五)Echats
1.参考网址：http://echarts.baidu.com/
2.由百度团队开发，完全用js开发，功能强大，各种类型报表
三 Echarts架构图
如上虽然给大家推荐了五套前端框架，但笔者推荐AdminLTE+H-ui+Echarts组合模式，这也是我目前在软件架构中运用到的组合模式。
Echarts框架
四 用Echarts做个报表统计
（一）先看看DEMO效果图
动态效果
1.支持多种动报表切换，如Line,Bar等；
2.具有隐藏/显示按钮；
3.具有数据表格功能；
4.具有图标保存功能。
（二） 前端Code
1.定义一个div容器
1
2.初始化
1 var myChart = echarts.init(document.getElementById('EchartsBarDemo'));
3.设置option
1 var option = {
2 title: {
3 text: 'XXX高三6月学生总分统计',
4 subtext: '虚拟数据'
5 },
6 tooltip: {
7 trigger: 'axis'
8 },
9 legend: {
10 data: ['文科', '理科']
11 },
12 toolbox: {
13 show: true,
14 feature: {
15 mark: { show: true },
16 dataView: { show: true, readOnly: false },
17 magicType: { show: true, type: ['line', 'bar'] },
18 restore: { show: true },
19 saveAsImage: { show: true }
20 }
21 },
22 calculable: true,
23 xAxis: [
24 {
25 type: 'category',
26 data: ['300以下', '300-400', '400-500', '500-550', '550-600', '600-650', '650以上']
27 }
28 ],
29 yAxis: [
30 {
31 type: 'value'
32 }
33 ],
34 series: [
35 {
36 name: '理科',
37 type: 'bar',
38 data: LiKeScores,
39 markPoint: {
40 data: [
41 { type: 'max', name: '最大值' },
42 { type: 'min', name: '最小值' }
43 ]
44 },
45 markLine: {
46 data: [
47 { type: 'average', name: '平均值' }
48 ]
49 }
50 },
51 {
52 name: '文科',
53 type: 'bar',
54 data: WenKeScores,
55 markPoint: {//标注点
56 data: [
57 { type: 'max', name: '最大值' },
58 { type: 'min', name: '最小值' }
59 ]
60 },
61 markLine: { //水平线
62 data: [
63 { type: 'average', name: '平均值' } //水平线表示平均值
64 ]
65 }
66 }
67 ]
68 }
4.将option添加给myCharts实例
1 myChart.setOption(option);
2 // 设置加载等待隐藏
3 myChart.hideLoading();
（三）.NET
1 public class DefaultController : Controller
2 {
3 // GET: Default
4 public ActionResult BarEcharts()
5 {
6 return View();
7 }
8
9 public ContentResult GetScoresJson()
10 {
11 //这里只是模拟数据，正式环境需要到db中查询
12 return Content("{LiKe:[10, 20, 30, 100, 300, 80, 60],WenKe:[15, 10, 30, 80, 400, 100, 60]}");
13 }
14 }
（四）完整源码
1.前端
1
2
3
4
5
6
7
8
9
10
11
12
13
View Code
2.后端
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.Mvc;
6
7 namespace EchartDemo.Controllers
8 {
9 public class DefaultController : Controller
10 {
11 // GET: Default
12 public ActionResult BarEcharts()
13 {
14 return View();
15 }
16
17 public ContentResult GetScoresJson()
18 {
19 //这里只是模拟数据，正式环境需要到db中查询
20 return Content("{LiKe:[10, 20, 30, 100, 300, 80, 60],WenKe:[15, 10, 30, 80, 400, 100, 60]}");
21 }
22 }
23 }
View Code