如何用Bootstrap製作導航條

工具/材料

Sublime Text

操作方法

首先我們需要搭建一個html頁面，如下圖所示，在頁面中匯入需要的bootstrap檔案

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

接下來就給導航新增內容，如下圖所示，運用的是ul元素，這裡也運用了nav導航樣式

如果想要啟用哪個導航，只需要像下圖的方式，在li元素中新增active樣式即可

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

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

最後我們執行頁面程式，你會看到如下圖所示的效果，下拉導航以及啟用狀態都已經顯示出來了