基於Metronic的Bootstrap開發框架經驗總結（4）--Bootstrap圖標的提取和利用

在前面的一篇隨筆《基於Metronic的Bootstrap開發框架經驗總結（1）-框架總覽及菜單模塊的處理》介紹了菜單模塊的處理，主要介紹如何動態從數據庫裏面獲取記錄並構建菜單列表。其中菜單信息的圖標樣式，也是從數據庫裏面獲取的，所以要求咱們可以動態取得Bootstrap裏面的各類圖標定義了。本篇主要介紹如何提取Bootstrap的圖標信息，存儲到數據庫裏面爲我所用。

一、菜單的顯示及各類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的主題化顯示的，以下面幾種效果所示。

或者也能夠把圖標變大一些：

 

二、各類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);

最後記錄存儲在數據庫裏面，效果以下所示，裏面已經記錄咱們所需的圖標信息了，這樣在實際使用的時候，就能夠利用各個字段的信息，顯示出好看的界面了。

 

三、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);

固然咱們選擇圖標的時候，提供一個彈出的對話框顯示分類不一樣的圖標，讓用戶選擇後返回便可。

這樣咱們就完成了，從圖標文件裏面提取不一樣類型的圖表，而後存儲在數據庫裏面，並在頁面裏面顯示出來，可供咱們動態選擇和設置了。

 

若是有興趣，能夠繼續參考系列文章：

基於Metronic的Bootstrap開發框架經驗總結（1）-框架總覽及菜單模塊的處理

基於Metronic的Bootstrap開發框架經驗總結（2）--列表分頁處理和插件JSTree的使用

基於Metronic的Bootstrap開發框架經驗總結（3）--下拉列表Select2插件的使用

基於Metronic的Bootstrap開發框架經驗總結（4）--Bootstrap圖標的提取和利用 

基於Metronic的Bootstrap開發框架經驗總結（5）--Bootstrap文件上傳插件File Input的使用

基於Metronic的Bootstrap開發框架經驗總結（6）--對話框及提示框的處理和優化

基於Metronic的Bootstrap開發框架經驗總結（7）--數據的導入、導出及附件的查看處理

基於Metronic的Bootstrap開發框架經驗總結（8）--框架功能整體界面介紹

基於Metronic的Bootstrap開發框架經驗總結（9）--實現Web頁面內容的打印預覽和保存操做