基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)（4）--Bootstrap圖標(biāo)的提取和利用

1、菜單的顯示及各種Bootstrap圖標(biāo)

我們從下圖可以看到，為了菜單的美觀，每個菜單項（這里分了三級菜單）都有一個圖標(biāo)，雖然大小不同，我們利用Bootstrap的圖標(biāo)，都是從Bootstrap圖標(biāo)庫里面的內(nèi)容。

Bootstrap圖標(biāo)庫里面分為了三類內(nèi)容：

Font Awesome：Bootstrap專用圖標(biāo)字體，F(xiàn)ont Awesome 中包含的所有圖標(biāo)都是矢量的，也就可以任意縮放，避免了一個圖標(biāo)做多種尺寸的麻煩。CSS對字體可以設(shè)置的樣式也同樣能夠運(yùn)用到這些圖標(biāo)上了。

如下面是部分Font Awesome 的圖標(biāo)：

Simple Icons：收集眾多網(wǎng)站的Logo，并提供高質(zhì)量、不同尺寸的png格式圖片給廣大網(wǎng)友，所有Icon版權(quán)歸其所屬公司。

如下面所示是Simple Icons的部分圖標(biāo)：

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

如下是部分Glyphicons內(nèi)容：

利用這幾種圖標(biāo)內(nèi)容，我們引入下面幾種樣式就可以了。

<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"/>

這幾種圖標(biāo)，都是支持各種Bootstrap的主題化顯示的，如下面幾種效果所示。

或者也可以把圖標(biāo)變大一些：

2、各種Bootstrap的圖標(biāo)的提取

我們通過上面的介紹，估計對這幾種Bootstrap的圖標(biāo)有了一定的了解，但是我們?nèi)绻軌蛟诓藛尉庉嬂锩孢x擇圖標(biāo)，那么我們還是需要把這些信息提取到數(shù)據(jù)庫里面，然后展示出來給我進(jìn)行選擇的，否則無法做到動態(tài)配置。

如上面的編輯界面，對菜單的Web圖標(biāo)提供了動態(tài)的選擇，那么我們?nèi)绻麛?shù)據(jù)庫里面記錄了上面幾種圖標(biāo)的集合，那么我們就可以把它在界面進(jìn)行展示，并可以從中選擇合適的圖表了。

根據(jù)上面的幾個樣式文件，我們分析一下，如對于font-awesome.min.css的文件內(nèi)容，它對于圖標(biāo)定義部分如下所示。

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

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

根據(jù)這幾種信息，我們就可以通過正則表達(dá)式匹配的方式，把我們所需要的信息提取出來，并存儲在數(shù)據(jù)庫里面即可實現(xiàn)圖標(biāo)動態(tài)顯示和選擇的第一步了。

例如，我們定義部分變量和正則表達(dá)式來處理這些文件內(nèi)容：

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",
};

然后通過讀取文件內(nèi)容，并進(jìn)行匹配記錄獲取即可提取出來集合內(nèi)容了。

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

最后我們把這些信息保存到數(shù)據(jù)庫表里面即可。

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

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

最后記錄存儲在數(shù)據(jù)庫里面，效果如下所示，里面已經(jīng)記錄我們所需的圖標(biāo)信息了，這樣在實際使用的時候，就可以利用各個字段的信息，顯示出好看的界面了。

3、Bootstrap的圖標(biāo)顯示和選擇

我們通過文件讀取并以正則表達(dá)式提取出內(nèi)容，然后保存到數(shù)據(jù)庫后，這些圖標(biāo)信息就可以為我們使用了，可以在頁面里面分類顯示出來，每類的圖標(biāo)進(jìn)行分頁處理，方便查詢，如下所示。

這部分的顯示頁面代碼和常規(guī)的數(shù)據(jù)顯示差不多的，只是不需要表頭信息而已，我們來看看頁面代碼如下所示。

<div class="portlet box green-meadow">
	<div class="portlet-title">
		<div class="caption"> <i class="fa fa-filter"></i>
			圖標(biāo)信息
		</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>條，總頁數(shù)：<span id='totalPageCount' class="label label-success">0</span>頁。
		</div>
		<hr />
		<div class="row" >
			<div class="portlet-body" id="grid_body"></div>
			<div class="paging-toolbar">
				<ul id='grid_paging'></ul>
			</div>
		</div>
	</div>
</div>

其中主要的圖標(biāo)顯示內(nèi)容在上面這部分的HTML里面。

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

動態(tài)獲取并生成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);
	});

用戶選擇對應(yīng)的圖標(biāo)后，我們可以通過腳本設(shè)置Span的樣式就可以顯示出來我們選中的圖標(biāo)了，如下所示。

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

當(dāng)然我們選擇圖標(biāo)的時候，提供一個彈出的對話框顯示分類不同的圖標(biāo)，讓用戶選擇后返回即可。

這樣我們就完成了，從圖標(biāo)文件里面提取不同類型的圖表，然后存儲在數(shù)據(jù)庫里面，并在頁面里面顯示出來，可供我們動態(tài)選擇和設(shè)置了。