在基於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開發框架系列，可以參考學習下面的文章，感謝您的閱讀。