The UI frameworks based on bootstrap include: 1. AdminLTE framework; 2. ACE framework; 3. clearmin framework; 4. h-ui framework; 5. Echats framework, etc.

Recommended: "bootstrap tutorial"

A brief discussion of several mainstream front-end frameworks based on the bootstrap framework

1 Overview

When developing a new project or product, technology selection is an indispensable link. Software architecture plays a decisive role. It can be said that the quality of technology selection directly affects the success or failure of the project or product. Therefore, when doing software architecture, you must think about technology selection. The traditional model of coupling the front and back ends together cannot basically meet the needs of big data and high concurrency in the current environment. For example, the WebForm model of .NET is gradually replaced by MVC, MVC Gradually replacing WebForm, there are two important reasons: MVC is completely separated from the front and back ends and MVC has better versatility. From the perspective of architecture, we abstract the software architecture into two parts, namely the front end and the back end, both of which transmit data through interfaces. But in this article, I will not talk about architecture, but just share with you several more mainstream front-end frameworks based on Bootsrap.

Several popular front-end frameworks (1) AdminLTE

1. Reference URL: https://adminlte.io/

2. Open source

3.Bootstrap3 framework

4. Lightweight

5. Fully responsive, supports customization

6.github:https://github.com/almasaeed2010/AdminLTE

(2) ACE framework

1. Reference URL: http://ace.jeka.by/

2. Backend template developed by Twitter bootstrap3

3. Open source

4.github:https://github.com/bopoda/ace

(3) clearmin

1 .Reference URL: http://cm.paomedia.com/

2. Developed based on Bootstrap3 framework

3.github:https://github.com/paomedia/clearmin

(4) h-ui

1. Reference website: http://www.h-ui.net/H-ui.admin.shtml

2.H-ui.admin is a lightweight website backend template developed using the H-ui front-end framework. It uses native HTML language. It is completely free, simple and flexible, and has good compatibility, allowing you to quickly build small and medium-sized website backends.

(五)Echats

1. Reference URL: http://echarts.baidu.com/

2. By Baidu Team development, completely developed with js, powerful functions, various types of reports

Three Echarts architecture diagramAs above Although I recommend five sets of front-end frameworks to everyone, the author recommends the AdminLTE H-ui Echarts combination model, which is also the combination model I currently use in software architecture.

Echarts Framework

##4 Use Echarts to make a report statistics

(1) Take a look at the DEMO renderings first

Dynamic effects

1. Supports a variety of Automatic report switching, such as Line, Bar, etc.;

2. With hide/show buttons;

3. With data table function;

4. With icon saving function.

(2) Front-end Code

1. Define a p container

1?<p id="EchartsBarDemo" style="width:100%;height:600px"></p>

2. Initialize

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

3. Set 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: {//標(biāo)注點
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: { //水平線
                            data: [
                                { type: 'average', name: '平均值' } //水平線表示平均值
                            ]
                        }
                    }
                ]
            }

4. Add option to myCharts instance

 myChart.setOption(option);
 // 設(shè)置加載等待隱藏
 myChart.hideLoading();

(3).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]}");
        }
    }

(4) Complete source code

1. Front-end

    
    
    
    


    





<script>
    //初始化
    var myChart = echarts.init(document.getElementById(&#39;EchartsBarDemo&#39;));
    //定義全局變量
    //var LiKeScores = [10, 20, 30, 100, 300, 80, 60];
    //var WenKeScores = [15, 10, 30, 80, 400, 100, 60];
    var LiKeScores = [];
    var WenKeScores = [];
    var jsonURL = "/Default/GetScoresJson";
    $.ajax({
        type: &#39;get&#39;,
        url: jsonURL,
        dataType: "text",
        success: function (rspData) {
            console.log(rspData);
            var str = eval(&#39;(&#39; + rspData + &#39;)&#39;);
            LiKeScores =str.LiKe;
            WenKeScores = str.WenKe;
            var option = {
                title: {
                    text: &amp;#39;XXX高三6月學(xué)生總分統(tǒng)計&amp;#39;,
                    subtext: &amp;#39;虛擬數(shù)據(jù)&amp;#39;
                },
                tooltip: {
                    trigger: &amp;#39;axis&amp;#39;
                },
                legend: {
                    data: [&amp;#39;文科&amp;#39;, &amp;#39;理科&amp;#39;]
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: [&amp;#39;line&amp;#39;, &amp;#39;bar&amp;#39;] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: &amp;#39;category&amp;#39;,
                        data: [&amp;#39;300以下&amp;#39;, &amp;#39;300-400&amp;#39;, &amp;#39;400-500&amp;#39;, &amp;#39;500-550&amp;#39;, &amp;#39;550-600&amp;#39;, &amp;#39;600-650&amp;#39;, &amp;#39;650以上&amp;#39;]
                    }
                ],
                yAxis: [
                    {
                        type: &amp;#39;value&amp;#39;
                    }
                ],
                series: [
                    {
                        name: &amp;#39;理科&amp;#39;,
                        type: &amp;#39;bar&amp;#39;,
                        data: LiKeScores,
                        markPoint: {
                            data: [
                                { type: &amp;#39;max&amp;#39;, name: &amp;#39;最大值&amp;#39; },
                                { type: &amp;#39;min&amp;#39;, name: &amp;#39;最小值&amp;#39; }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: &amp;#39;average&amp;#39;, name: &amp;#39;平均值&amp;#39; }
                            ]
                        }
                    },
                    {
                        name: &amp;#39;文科&amp;#39;,
                        type: &amp;#39;bar&amp;#39;,
                        data: WenKeScores,
                        markPoint: {//標(biāo)注點
                            data: [
                                { type: &amp;#39;max&amp;#39;, name: &amp;#39;最大值&amp;#39; },
                                { type: &amp;#39;min&amp;#39;, name: &amp;#39;最小值&amp;#39; }
                            ]
                        },
                        markLine: { //水平線
                            data: [
                                { type: &amp;#39;average&amp;#39;, name: &amp;#39;平均值&amp;#39; } //水平線表示平均值
                            ]
                        }
                    }
                ]
            }
            myChart.setOption(option);
            // 設(shè)置加載等待隱藏
            myChart.hideLoading();
        },
        error: function (data) {
            console.log(data);
            LiKeScores = data.LiKe;
            WenKeScores = data.WenKe;
            //Loading(false);
        }
    });
</script>

2 .Backend

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]}");
        }
    }
}

The above is the detailed content of What are the UI frameworks based on bootstrap?. For more information, please follow other related articles on the PHP Chinese website!