實例講解Bootstrap中各種圖標的使用技巧

Bootstrap是一款非常實用的前端框架之一，也是目前主流的前端框架。學習難度低，開發效率高，因此得到IT行業的廣泛使用。現在，我們以實際例子出發，看看Bootstrap中圖標如何使用吧。

操作方法

（01）將Bootstrap前端框架的文件夾引入站點我們首先要在網上下載Bootstrap前端框架文件夾，解壓之後然後將該文件夾引入到站點中，如下圖所示：

（02）新建文檔雙擊桌面上的Dreamweaver圖標，打開軟件。在文件菜單欄中點擊【文件】----【新建】----【HTML】，新建一張HTML類型的文檔。

（03）保存文件使用快捷鍵【ctrl+S】保存文件，會彈出文件保存位置，輸入文件名和文件類型，文件名要做到見名知意，文件類型默認為all Document類型。然後點擊【保存】按鈕即可。

（04）引入文件在head頭部引入Bootstrap框架中的4個js文件，文件如下所示：<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/"/><script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="bootstrap-3.3.7-dist/js/"></script>

（05）編寫圖標代碼Bootstrap前端框架提供了很多的圖標，我們隨意引用如下幾個圖標，代碼如下所示：<span class="glyphicon glyphicon-home"></span><br /><span class="glyphicon glyphicon-cog"></span><br /><span class="glyphicon glyphicon-apple"></span><br /><span class="glyphicon glyphicon-trash"></span>

（06）啟動wampserver服務器預覽效果之前一定要先啟動【wampserver服務器】，當桌面右下角的圖標變成綠色即表示啟動完成。

（07）預防方法點擊Dreamweaver軟件中的【地球圖標】，在彈出的下拉菜單中選擇【預覽在360se中】即表示在360瀏覽器中預覽。

（08）顯示效果在360瀏覽器中可以看到顯示Bootstrap前端框架的圖標。以後都是按照這樣的方法引用Bootstrap框架提供的圖標。

特別提示

（1）前端框架的學習所用的工具一般採用Dreamweaver軟件；<br/>（2）在使用Bootstrap前端框架之前一定要先引入3個js文件；<br/>（3）本文詳細介紹了Bootstrap前端框架中提供的圖標的使用方法，以後當需要用到圖標時都是按照這樣的方式引用。