在前面的一篇隨筆《基於Metronic的Bootstrap開發框架經驗總結（1）-框架總覽及選單模組的處理》介紹了選單模組的處理，主要介紹如何動態從資料庫裡面獲取記錄並構建選單列表。其中選單資訊的圖示樣式，也是從資料庫裡面獲取的，因此要求我們能夠動態取得Bootstrap裡面的各種圖示定義了。本篇主要介紹如何提取Bootstrap的圖示資訊，儲存到資料庫裡面為我所用。

1、選單的顯示及各種Bootstrap圖示

我們從下圖可以看到，為了選單的美觀，每個選單項（這裡分了三級選單）都有一個圖示，雖然大小不同，我們利用Bootstrap的圖示，都是從Bootstrap圖示庫裡面的內容。

Bootstrap圖示庫裡面分為了三類內容：

Font Awesome：Bootstrap專用圖示字型，Font Awesome 中包含的所有圖示都是向量的，也就可以任意縮放，避免了一個圖示做多種尺寸的麻煩。CSS對字型可以設定的樣式也同樣能夠運用到這些圖示上了。

如下面是部分Font Awesome 的圖示：

Simple Icons：收集眾多網站的Logo，並提供高質量、不同尺寸的png格式圖片給廣大網友，所有Icon版權歸其所屬公司。

如下面所示是Simple Icons的部分圖示：

Glyphicons:包括200個符號字型格式圖表集合，由Glyphicons提供，Glyphicons Halflings 一般是收費的，但是經過Bootstrap和Glyphicons作者之間的協商，允許開發人員不需要支付費用即可使用。

如下是部分Glyphicons內容：

利用這幾種圖示內容，我們引入下面幾種樣式就可以了。

<link href="/Content/metronic/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<link href="/Content/metronic/simple-line-icons/simple-line-icons.min.css" rel="stylesheet"/>
<link href="/Content/metronic/bootstrap/css/bootstrap.min.css"
 
 rel="stylesheet"/>

這幾種圖示，都是支援各種Bootstrap的主題化顯示的，如下面幾種效果所示。

或者也可以把圖示變大一些：

2、各種Bootstrap的圖示的提取

我們通過上面的介紹，估計對這幾種Bootstrap的圖示有了一定的瞭解，但是我們如果要能夠在選單編輯裡面選擇圖示，那麼我們還是需要把這些資訊提取到資料庫裡面，然後展示出來給我進行選擇的，否則無法做到動態配置。

如上面的編輯介面，對選單的Web圖示提供了動態的選擇，那麼我們如果資料庫裡面記錄了上面幾種圖示的集合，那麼我們就可以把它在介面進行展示，並可以從中選擇合適的圖表了。

根據上面的幾個樣式檔案，我們分析一下，如對於font-awesome.min.css的檔案內容，它對於圖示定義部分如下所示。

而對於simple-line-icons來說，它的樣式定義也差不多，如下所示。

對於Glyphicons來說，它的樣式定義也是很類似的，如下所示。

根據這幾種資訊，我們就可以通過正則表示式匹配的方式，把我們所需要的資訊提取出來，並存儲在資料庫裡面即可實現圖示動態顯示和選擇的第一步了。

例如，我們定義部分變數和正則表示式來處理這些檔案內容：

            string regex = "^\\.(?<name>.*?):before\\s*\\{";
            List<string> filePathList = new List<string>()
            {
                "~/Content/themes/metronic/assets/global/plugins/bootstrap/css/bootstrap.css",
                "~/Content/themes/metronic/assets/global/plugins/font-awesome/css/font-awesome.css",
                "~/Content/themes/metronic/assets/global/plugins/simple-line-icons/simple-line-icons.css",
            };

然後通過讀取檔案內容，並進行匹配記錄獲取即可提取出來集合內容了。

    string content = FileUtil.FileToString(realPath);
    List<string> matchList = CRegex.GetList(content, regex, 1);

最後我們把這些資訊儲存到資料庫表裡面即可。

    BootstrapIconInfo info = new BootstrapIconInfo()
    {
        DisplayName = item,
        ClassName = prefix + item,
        CreateTime = DateTime.Now,
        SourceType = sourceType,
    };

    BLLFactory<BootstrapIcon>.Instance.Insert(info);

最後記錄儲存在資料庫裡面，效果如下所示，裡面已經記錄我們所需的圖示資訊了，這樣在實際使用的時候，就可以利用各個欄位的資訊，顯示出好看的介面了。

3、Bootstrap的圖示顯示和選擇

我們通過檔案讀取並以正則表示式提取出內容，然後儲存到資料庫後，這些圖示資訊就可以為我們使用了，可以在頁面裡面分類顯示出來，每類的圖示進行分頁處理，方便查詢，如下所示。

這部分的顯示頁面程式碼和常規的資料顯示差不多的，只是不需要表頭資訊而已，我們來看看頁面程式碼如下所示。

        <div class="portlet box green-meadow">
            <div class="portlet-title">
                <div class="caption"> <i class="fa fa-filter"></i>
                    圖示資訊
                </div>
            </div>
            <div class="portlet-body flip-scroll">
                <div>
                    <span>每頁顯示</span>
                    <select id="rows" onchange="ChangeRows()">
                        <option>50</option>
                        <option selected>100</option>
                        <option>200</option>
                        <option>1000</option>
                    </select>
                    <span>條記錄</span>&nbsp;&nbsp;
                    <span>共有記錄：</span><span id='totalCount' class="label label-success">0</span>條，總頁數：<span id='totalPageCount' class="label label-success">0</span>頁。
                </div>
                <hr />
                <div class="row" style="padding-left:20px">
                    <div class="portlet-body" id="grid_body"></div>
                    <div class="paging-toolbar">
                        <ul id='grid_paging'></ul>
                    </div>
                </div>
            </div>
        </div>

其中主要的圖示顯示內容在上面這部分的HTML裡面。

<div class="portlet-body" id="grid_body"></div>

動態獲取並生成HTML程式碼顯示在介面上的處理指令碼如下所示。

            $.getJSON(iconUrl + "&" + condition, function (data) {
                $("#icon_body").html("");
                $.each(data.rows, function (i, item) {
                    var tr = "<a href=\"javascript:;\" onclick=\"GetIcon('" + item.ClassName + "')\" class=\"icon-btn\" title=\"" + item.DisplayName + "\">";
                    tr += "    <i class=\"" + item.ClassName + " \" style=\"font-size: 2.2em\"></i>";//
                    //tr += "<div>" + item.DisplayName + "</div>";
                    tr += "</a>";
                    $("#icon_body").append(tr);
                });

使用者選擇對應的圖示後，我們可以通過指令碼設定Span的樣式就可以顯示出來我們選中的圖示了，如下所示。

$("#i_WebIcon").attr("class", classname);

當然我們選擇圖示的時候，提供一個彈出的對話方塊顯示分類不同的圖示，讓使用者選擇後返回即可。

這樣我們就完成了，從圖示檔案裡面提取不同型別的圖表，然後儲存在資料庫裡面，並在頁面裡面顯示出來，可供我們動態選擇和設定了。

如果有興趣，可以繼續參考系列文章：