基于bootstrap的主流框架有哪些

一、總結(jié)

一句話總結(jié)：其實可以直接百度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的比較主流的前端框架。

二 當前幾種比較流行的前端框架

（一）AdminLTE

1.參考網(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

（三）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ā)的輕量級網(wǎng)站后臺模版采用源生html語言，完全免費，簡單靈活，兼容性好讓您快速搭建中小型網(wǎng)站后臺

(五)Echats

1.參考網(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.具有圖標保存功能。

（二） 前端Code

1.定義一個div容器

1 <div id="EchartsBarDemo"></div>

2.初始化

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

3.設(shè)置option

 1 var option = {
 2                 title: {
 3                     text: 'XXX高三6月學生總分統(tǒng)計',
 4                     subtext: '虛擬數(shù)據(jù)'
 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 // 設(shè)置加載等待隱藏
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             //這里只是模擬數(shù)據(jù)，正式環(huán)境需要到db中查詢
12             return Content("{LiKe:[10, 20, 30, 100, 300, 80, 60],WenKe:[15, 10, 30, 80, 400, 100, 60]}");
13         }
14     }

（四）完整源碼

1.前端

  1 <html>
  2 <head>
  3     <meta name="viewport" content="width=device-width" />
  4     <script src="~/Scripts/jquery-3.3.1.js"></script>
  5     <script src="~/Scripts/echarts.js"></script>
  6     <title>BarEcharts</title>
  7 </head>
  8 <body>
  9     <div id="EchartsBarDemo"></div>
 10 </body>
 11 </html>
 12 
 13 <script>
 14     //初始化
 15     var myChart = echarts.init(document.getElementById('EchartsBarDemo'));
 16     //定義全局變量
 17     //var LiKeScores = [10, 20, 30, 100, 300, 80, 60];
 18     //var WenKeScores = [15, 10, 30, 80, 400, 100, 60];
 19     var LiKeScores = [];
 20     var WenKeScores = [];
 21     var jsonURL = "/Default/GetScoresJson";
 22     $.ajax({
 23         type: 'get',
 24         url: jsonURL,
 25         dataType: "text",
 26         success: function (rspData) {
 27             console.log(rspData);
 28             var str = eval('(' + rspData + ')');
 29             LiKeScores =str.LiKe;
 30             WenKeScores = str.WenKe;
 31             var option = {
 32                 title: {
 33                     text: 'XXX高三6月學生總分統(tǒng)計',
 34                     subtext: '虛擬數(shù)據(jù)'
 35                 },
 36                 tooltip: {
 37                     trigger: 'axis'
 38                 },
 39                 legend: {
 40                     data: ['文科', '理科']
 41                 },
 42                 toolbox: {
 43                     show: true,
 44                     feature: {
 45                         mark: { show: true },
 46                         dataView: { show: true, readOnly: false },
 47                         magicType: { show: true, type: ['line', 'bar'] },
 48                         restore: { show: true },
 49                         saveAsImage: { show: true }
 50                     }
 51                 },
 52                 calculable: true,
 53                 xAxis: [
 54                     {
 55                         type: 'category',
 56                         data: ['300以下', '300-400', '400-500', '500-550', '550-600', '600-650', '650以上']
 57                     }
 58                 ],
 59                 yAxis: [
 60                     {
 61                         type: 'value'
 62                     }
 63                 ],
 64                 series: [
 65                     {
 66                         name: '理科',
 67                         type: 'bar',
 68                         data: LiKeScores,
 69                         markPoint: {
 70                             data: [
 71                                 { type: 'max', name: '最大值' },
 72                                 { type: 'min', name: '最小值' }
 73                             ]
 74                         },
 75                         markLine: {
 76                             data: [
 77                                 { type: 'average', name: '平均值' }
 78                             ]
 79                         }
 80                     },
 81                     {
 82                         name: '文科',
 83                         type: 'bar',
 84                         data: WenKeScores,
 85                         markPoint: {//標注點
 86                             data: [
 87                                 { type: 'max', name: '最大值' },
 88                                 { type: 'min', name: '最小值' }
 89                             ]
 90                         },
 91                         markLine: { //水平線
 92                             data: [
 93                                 { type: 'average', name: '平均值' } //水平線表示平均值
 94                             ]
 95                         }
 96                     }
 97                 ]
 98             }
 99             myChart.setOption(option);
100             // 設(shè)置加載等待隱藏
101             myChart.hideLoading();
102         },
103         error: function (data) {
104             console.log(data);
105             LiKeScores = data.LiKe;
106             WenKeScores = data.WenKe;
107             //Loading(false);
108         }
109     });
110 </script>

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             //這里只是模擬數(shù)據(jù)，正式環(huán)境需要到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

總結(jié)

以上是生活随笔為你收集整理的基于bootstrap的主流框架有哪些的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。