如何用Bootstrap制作導航條
Bootstrap作為目前比較流行的前端框架，它給我們開發頁面提供了便捷。下面小編給大家介紹一下如何用Bootstrap制作導航條
東西/材料
Sublime Text
操作方式
-
01
起首我們需要搭建一個html頁面，如下圖所示，在頁面中導入需要的bootstrap文件
-
02
然后我們在body標簽中寫下nav元素，如下圖所示，注重給nav元素添加導航條樣式
-
03
接下來就給導航添加內容，如下圖所示，運用的是ul元素，這里也運用了nav導航樣式
-
04
若是想要激活哪個導航，只需要像下圖的體例，在li元素中添加active樣式即可
-
05
Bootstrap中的導航有下拉結果的設計，若是想用這種結果，需要用dropdown樣式，如下圖所示
-
06
別的，值得一提的下拉導航條中可以加朋分線，如下圖所示，運用divider樣式即可
-
07
最后我們運行頁面法式，你會看到如下圖所示的結果，下拉導航以及激活狀況都已經顯示出來了
- End
- 發表于 2018-02-14 00:00
- 閱讀 ( 711 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章