基於bootstrap的UI框架有：1、AdminLTE框架；2、ACE框架；3、clearmin框架；4、h-ui框架；5、Echats框架等等。

推薦：《bootstrap教程》

淺聊目前基於bootstrap框架的幾個(gè)主流前端框架

一? 概述

#當(dāng)新開發(fā)專案或產(chǎn)品時(shí)，技術(shù)選型是不可缺少的環(huán)節(jié)，在軟體架構(gòu)中有著舉足輕重的作用，可以這麼說，技術(shù)選型的好壞直接影響專案或產(chǎn)品的成敗優(yōu)劣，因此，在進(jìn)行軟體架構(gòu)時(shí)，一定要想好技術(shù)選型。 傳統(tǒng)的前後端耦合在一起的模式，基本上無法滿足當(dāng)前環(huán)境下的大數(shù)據(jù)，高並發(fā)等需求，如.NET 的WebForm模式逐漸被MVC取代，MVC逐漸取代WebForm，其中有兩點(diǎn)重要的原因：MVC前後端徹底分離和MVC通用性比較好。從架構(gòu)的架構(gòu)，我們把軟體架構(gòu)抽象化為兩個(gè)部分，即前端和後端，兩者透過介面來傳遞資料。但在這篇文章中，不談架構(gòu)，只是與大家分享幾個(gè)基於Bootsrap的比較主流的前端框架。

?目前幾種比較流行的前端框架

（一）AdminLTE

?1.參考網(wǎng)址：https://adminlte.io/

#?2.開源

?3.Bootstrap3架構(gòu)

?4.輕量級

?5.完全響應(yīng)式，支援客製化

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

（二）ACE框架

?

?1.參考網(wǎng)址：http://ace.jeka.by/

?2.Twitter bootstrap3開發(fā)的後臺(tái)範(fàn)本

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)站後臺(tái)模版採用源生html語言，完全免費(fèi)，簡單靈活，兼容性好讓您快速搭建中小型網(wǎng)站後臺(tái)

(五)Echats

1.參考網(wǎng)址：http://echarts.baidu.com/

2.由百度團(tuán)隊(duì)開發(fā)，完全用js開發(fā)，功能強(qiáng)大，各種型別報(bào)表

三Echarts架構(gòu)圖

如上雖然我給大家推薦了五套前端框架，但筆者推薦AdminLTE H-ui Echarts組合模式，這也是我目前在軟體架構(gòu)中運(yùn)用到的組合模式。

Echarts框架

?

#四? 用Echarts做個(gè)報(bào)表統(tǒng)計(jì)

#（一）先看看DEMO效果圖

動(dòng)態(tài)效果

?1.支援多種動(dòng)報(bào)表切換，如Line,Bar等；

?2.具有隱藏/顯示按鈕；

?3.具有資料表格功能；

?4.具有圖示儲(chǔ)存功能。

（二） 前端Code

1.定義一個(gè)p容器

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

2.初始化

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

3.設(shè)定option

var option = {
                title: {
                    text: 'XXX高三6月學(xué)生總分統(tǒng)計(jì)',
                    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)注點(diǎn)
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: { //水平線
                            data: [
                                { type: 'average', name: '平均值' } //水平線表示平均值
                            ]
                        }
                    }
                ]
            }

4.將option加入myCharts實(shí)例

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

（三）.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]}");
        }
    }

（四）完整原始碼

1.前端

    
    
    
    


    





<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)計(jì)&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)注點(diǎn)
                            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 .後端

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

以上是基於bootstrap的UI框架有哪些的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！