在基於Bootstrap開發的專案中，鮮豔顏色的按鈕，以及豐富的圖表是很吸引人的特點，為了將這個特點發揮到極致，可以利用Bootstrap圖示抽取到資料庫裡面，並在介面中進行管理和使用，這樣我們可以把這些圖示方便應用在各個頁面部件上，如選單模組，按鈕介面，表單輸入等多個場合進行使用。在前面隨筆《基於Metronic的Bootstrap開發框架經驗總結（4）--Bootstrap圖示的提取和利用》中，我對如何抽取Bootstrap圖示，並單獨開發一個頁面進行圖表的管理，本隨筆介紹如何在這個基礎上進行優化，實現更方便的使用。

1、優化圖示管理介面

在前面隨筆中，我們介紹了對圖示的抽取、圖示管理介面等內容。我們再來回顧一下Bootstrap的圖表型別，Bootstrap圖示庫裡面分為了三類內容：

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

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

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

我們從樣式表中抽取這幾類圖示資訊，放到資料庫裡面，然後方便介面管理和選擇處理。

在前面隨筆介紹我的Bootstrap框架的時候，圖示管理介面如下所示。

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

雖然有了這些功能介面，能夠降低我們尋找圖示的過程，但是實際使用的時候，還是有一些不方便，因為尋找一個特定的圖示，需要翻了很多頁才能尋找到合適的，效率不高，通過了解我們自身的圖示名稱和它顯示的內容還是有很大的關聯關係的，因此我們應該提供一個顯示名稱的搜尋，方便查詢出來，並可以在查詢列表中進行選擇，這樣就可以大大加快我們尋找Bootstrap圖示的速度了。

這個介面比原來改進了很多，我們可以通過名稱搜尋，並獲取資料庫裡面符合條件的圖示進行分頁顯示，如果選擇其中之一，可以把圖示和名稱顯示在上面，這樣可以方便我們使用。

查詢的操作和其他分頁的部分類似，把資料通過AJax方式獲取後，在介面上進行分頁顯示即可。

                            <div class="form-group">
                                <label class="control-label col-md-2">圖示顯示名稱</label>
                                <div class="input-icon col-md-3">
                                    <div class="input-group">
                                        <div class="input-icon ">
                                            <input id="WHC_DisplayName" name="WHC_DisplayName" type="text" class="form-control" placeholder="顯示名稱...">
                                        </div>
                                        <span class="input-group-btn">
                                            <button id="btnSearch" class="btn btn-success" type="button" onclick="SearchDisplayName()">
                                                <i class="glyphicon glyphicon-list"></i>查詢
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>

        //根據名稱查詢圖示
        function SearchDisplayName()
        {
            var condition = "WHC_DisplayName=" + $("#WHC_DisplayName").val();
            SearchCondition(currentPage, condition);
        }
        
        //圖示查詢
        function Search(page) {
            var condition = "WHC_SourceType=SimpleLine";//SimpleLine,FontAwesome,Glyphicons

            SearchCondition(page, condition);
        }
        function SearchCondition(page, condition) {
            var iconUrl = "/BootstrapIcon/FindWithPager?page=" + page + "&rows=" + rows;

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

                var element = $('#grid_paging');
                if(data.total > 0) {
                    var options = {
                        bootstrapMajorVersion: 3,
                        currentPage: page,
                        numberOfPages: rows,
                        totalPages: Math.ceil(data.total / rows),
                        onPageChanged: function (event, oldPage, newPage) {
                            SearchCondition(newPage, condition);
                        }
                    }
                    element.bootstrapPaginator(options);
                } else {
                    element.html("");
                }
            });
        }

另外圖示的樣式我們也方便一起整合讓它顯示，如Primary Success Info Warning Danger等經典樣式，當然我們也可以設定顏色使圖示呈現更多的色彩。

相關的介面程式碼如下所示。

                                <div class="input-icon col-md-6">
                                    <button type="button" class="btn btn-default" onclick="ChangeIconStyle('default')">Default</button>
                                    <button type="button" class="btn btn-primary" onclick="ChangeIconStyle('primary')">Primary</button>
                                    <button type="button" class="btn btn-success" onclick="ChangeIconStyle('success')">Success</button>
                                    <button type="button" class="btn btn-info" onclick="ChangeIconStyle('info')">Info</button>
                                    <button type="button" class="btn btn-warning" onclick="ChangeIconStyle('warning')">Warning</button>
                                    <button type="button" class="btn btn-danger" onclick="ChangeIconStyle('danger')">Danger</button>
                                </div>

    <script>
        //通過JS修改介面圖示的顯示和樣式
        function ChangeIconStyle(style) {
            var icon = $("#WebIcon").val();
            if (style != 'default') {
                $("#i_WebIcon").attr("class", icon + " icon-state-" + style);
                $("#lbl_WebIcon").attr("class", "label label-" + style);
                $("#lbl_WebIcon").text(icon + " icon-state-" + style);
            } else {
                $("#i_WebIcon").attr("class", icon);
                $("#lbl_WebIcon").attr("class", "");
                $("#lbl_WebIcon").text(icon);
            }
        }
    </script>

2、圖示的應用場景

有了這種方便選擇圖示的管理介面，可以極大提高我們的效率。我們可以在選單、按鈕等多個地方使用圖示，使得介面更加美觀。

如在選單介面中使用如下所示。

或者可以左側選單進行使用。

我們還可以把圖示用在介面的功能按鈕上。

如果感興趣Bootstrap開發框架系列，可以參考學習下面的文章，感謝您的閱讀。