例項講解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前端框架中提供的圖示的使用方法，以後當需要用到圖示時都是按照這樣的方式引用。