基于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" style="width:100%;height:600px"></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" style="width:100%;height:600px"></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>

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.  }
 

基于bootstrap的主流框架有哪些的更多相关文章

  1. 8个强大的基于Bootstrap的CSS框架

    做过前端开发的小伙伴们应该对Bootstrap不会陌生,它是由Twitter推出的开源CSS框架,其中包含了很多Web前端开发的工具包和应用组件.当然,和jQuery一样,Bootstrap同时也是一 ...

  2. 分享一个基于Bootstrap的 ACE框架 入门（MVC+EF）

    基于Bootstrap3,拥有强大的功能组件以及UI组件,基本能满足后台管理系统的需求, 而且能根据不同设备适配显示,而且还有四个主题可以切换. 简单入门,源代码下载:https://github.c ...

  3. 目前几款基于html5的前端框架：如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

  4. 基于BootStrap框架构建快速响应的GPS部标监控平台

    最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...

  5. Bootflat – 基于 Bootstrap CSS 框架的扁平化界面

    Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架.它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途 ...

  6. 基于bootstrap的漂亮网站后台管理界面框架汇总

    基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...

  7. 基于bootstrap框架在ie8以下,兼容媒体查询[css样式]

    <style type="text/css"> /*基于bootstrap框架在ie8以下,兼容媒体查询*/ .row [class^="col-" ...

  8. 基于CSS UI开源框架汇总

    从16年数据统计就有20几款UI框架出现在市面上,至今为止能统计的框架应该有40款左右了.前端框架都是基于HMTL5.CSS.JS开发的,这里主要给大家聊一下CSS UI开源框架有哪些?以后工作中选择 ...

  9. python三大web框架Django,Flask,Flask，Python几种主流框架，13个Python web框架比较，2018年Python web五大主流框架

    Python几种主流框架 从GitHub中整理出的15个最受欢迎的Python开源框架.这些框架包括事件I/O,OLAP,Web开发,高性能网络通信,测试,爬虫等. Django: Python We ...

随机推荐

  1. 13.2 UPDATE

    13.2 UPDATE正在更新内容.请稍后

  2. gvim window7 下提示乱码

    今天在win7下安装gvim的时候,发现所有的提示信息都是乱码的,在网上找到了如下的解决方案.在此记录下,方便以后查阅. 以下内容转载自http://blog.csdn.net/rehung/arch ...

  3. 调用google翻译

    1. [代码]maven依赖     ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <dependency>     <groupId>org.a ...

  4. Android ijkplayer详解使用教程

    1.认识ijkplayer 最近公司准备开发一款视频播放及直播的应用,找了许多开源的框架,大部分都是基于ffmpeg开发的.最开始准备用Vitamio框架开发的,相关的文章也比较丰富,结果对于非个人移 ...

  5. Exercise : Self-Taught Learning

    First, you will train your sparse autoencoder on an "unlabeled" training dataset of handwr ...

  6. C/C++(基础-运算符详解)

    运算符 任何表达式是有值的 int a = 2; int b = 3; a*=b+4;//a=a*(b+4);"*"*=的优先级层次和=号的层次一样. printf("% ...

  7. easyui 前端实现分页 复制就能用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. SASS常用方法

    cnpm install --save-dev sass-loader //sass-loader依赖于node-sass cnpm install --save-dev node-sass //实现 ...

  9. Vue 消息无缝滚动

    vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter=&quo ...

  10. 自定义input[type="checkbox"]样式

    input[type=checkbox] { visibility: hidden; position: relative;} input[type=checkbox]:after { content ...