基于bootstrap的主流框架有哪些
生活随笔
收集整理的這篇文章主要介紹了
基于bootstrap的主流框架有哪些
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
基于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 <div id="EchartsBarDemo"></div>
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 <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月學生總分統計',
34 subtext: '虛擬數據'
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 // 設置加載等待隱藏
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 //這里只是模擬數據，正式環境需要到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
總結
以上是生活随笔為你收集整理的基于bootstrap的主流框架有哪些的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 课件下载全免费（初中语文免费课件网站）
- 下一篇： Python机器学习——Agglomer