What are the UI frameworks based on bootstrap?-Bootstrap Tutorial-php.cn

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

What are the UI frameworks based on bootstrap?

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>

Copy after login

2. Initialize

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

Copy after login

3. Set option

var option = {
                title: {
                    text: &#39;XXX高三6月学生总分统计&#39;,
                    subtext: &#39;虚拟数据&#39;
                },
                tooltip: {
                    trigger: &#39;axis&#39;
                },
                legend: {
                    data: [&#39;文科&#39;, &#39;理科&#39;]
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: [&#39;line&#39;, &#39;bar&#39;] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: &#39;category&#39;,
                        data: [&#39;300以下&#39;, &#39;300-400&#39;, &#39;400-500&#39;, &#39;500-550&#39;, &#39;550-600&#39;, &#39;600-650&#39;, &#39;650以上&#39;]
                    }
                ],
                yAxis: [
                    {
                        type: &#39;value&#39;
                    }
                ],
                series: [
                    {
                        name: &#39;理科&#39;,
                        type: &#39;bar&#39;,
                        data: LiKeScores,
                        markPoint: {
                            data: [
                                { type: &#39;max&#39;, name: &#39;最大值&#39; },
                                { type: &#39;min&#39;, name: &#39;最小值&#39; }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: &#39;average&#39;, name: &#39;平均值&#39; }
                            ]
                        }
                    },
                    {
                        name: &#39;文科&#39;,
                        type: &#39;bar&#39;,
                        data: WenKeScores,
                        markPoint: {//标注点
                            data: [
                                { type: &#39;max&#39;, name: &#39;最大值&#39; },
                                { type: &#39;min&#39;, name: &#39;最小值&#39; }
                            ]
                        },
                        markLine: { //水平线
                            data: [
                                { type: &#39;average&#39;, name: &#39;平均值&#39; } //水平线表示平均值
                            ]
                        }
                    }
                ]
            }

Copy after login

4. Add option to myCharts instance

 myChart.setOption(option);
 // 设置加载等待隐藏
 myChart.hideLoading();

Copy after login

(3).NET

public class DefaultController : Controller
    {
        // GET: Default
        public ActionResult BarEcharts()
        {
            return View();
        }

        public ContentResult GetScoresJson()
        {
            //这里只是模拟数据，正式环境需要到db中查询
            return Content("{LiKe:[10, 20, 30, 100, 300, 80, 60],WenKe:[15, 10, 30, 80, 400, 100, 60]}");
        }
    }

Copy after login

(4) Complete source code

1. Front-end



    
    
    
    BarEcharts



    



<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月学生总分统计&amp;#39;,
                    subtext: &amp;#39;虚拟数据&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: {//标注点
                            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);
            // 设置加载等待隐藏
            myChart.hideLoading();
        },
        error: function (data) {
            console.log(data);
            LiKeScores = data.LiKe;
            WenKeScores = data.WenKe;
            //Loading(false);
        }
    });
</script>

Copy after login

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()
        {
            //这里只是模拟数据，正式环境需要到db中查询
            return Content("{LiKe:[10, 20, 30, 100, 300, 80, 60],WenKe:[15, 10, 30, 80, 400, 100, 60]}");
        }
    }
}

Copy after login

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!