基于Metronic的Bootstrap開發中如何優化Bootstrap圖標管理

基于Metronic的Bootstrap開發中如何優化Bootstrap圖標管理，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

在基于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、圖標的應用場景

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

如在菜單界面中使用如下所示。

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

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

看完上述內容，你們掌握基于Metronic的Bootstrap開發中如何優化Bootstrap圖標管理的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！