關閉→
當前位置:趣知常識網>遊戲數碼>IT技術>如何用Bootstrap製作導航條

如何用Bootstrap製作導航條

趣知常識網 人氣:1.37W

工具/材料

Sublime Text

操作方法

首先我們需要搭建一個html頁面,如下圖所示,在頁面中導入需要的bootstrap文件

如何用Bootstrap製作導航條

然後我們在body標籤中寫下nav元素,如下圖所示,注意給nav元素添加導航條樣式

如何用Bootstrap製作導航條 第2張

接下來就給導航添加內容,如下圖所示,運用的是ul元素,這裏也運用了nav導航樣式

如何用Bootstrap製作導航條 第3張

如果想要激活哪個導航,只需要像下圖的方式,在li元素中添加active樣式即可

如何用Bootstrap製作導航條 第4張

Bootstrap中的導航有下拉效果的設計,如果想用這種效果,需要用dropdown樣式,如下圖所示

如何用Bootstrap製作導航條 第5張

另外,值得一提的下拉導航條中可以加分割線,如下圖所示,運用divider樣式即可

如何用Bootstrap製作導航條 第6張

最後我們運行頁面程序,你會看到如下圖所示的效果,下拉導航以及激活狀態都已經顯示出來了

如何用Bootstrap製作導航條 第7張
TAG標籤:#Bootstrap #導航條 #