bootstrap使用各種圖示?

Tags: 新手, 圖示,

很多新手在bootstrap使用圖示很多時候都遇到過不生效的問題吧,我來教大家保險使用圖示,切讓你獲得更方便的輸入

bootstrap使用各種圖示

工具/原料

Dreamweaver

網際網路

方法/步驟

首先在bootstrap官網下載包,可以直接bootstrap百度官網,一共有3種包,下載中間那種就可以了,比較簡潔

bootstrap使用各種圖示

bootstrap使用各種圖示

開啟Dreamweaver,建立一個html檔案,儲存。

bootstrap使用各種圖示

之後將下載的bootstrap包,放入該檔案同目錄下。

bootstrap使用各種圖示

使用Dreamweaver的引入樣式表功能在head標籤內引用bootstrap包內的bootstrap.css和bootstrap.min.css

bootstrap使用各種圖示

在body標籤中輸入h3>圖示 ,這裡我舉例2個,其他請自行嘗試,在Dreamweaver中正確引入了css檔案後,你可以直接選擇新增glyphicon開頭的類選擇器,而不用記住這些名字,所有的圖示你都可以看到並且使用了,快試試效果吧

bootstrap使用各種圖示

使用瀏覽器開啟該檔案瀏覽吧,出現圖示就可以了

bootstrap使用各種圖示

注意事項

使用Dreamweaver,或者有css提示功能的軟體

單個網頁注意bootstrap包與檔案放入同一目錄下,站點則引入正確位置即可

bootstrap包整個包都需要放到一起,因為裡面有font字型,有時可能導致圖示無法顯示

相關問題答案