工具/材料

Sublime Text

操作方法

• 01

  首先我們需要搭建一個html頁面，如下圖所示，在頁面中導(dǎo)入需要的bootstrap文件

  
• 02

  然后我們在body標(biāo)簽中寫下nav元素，如下圖所示，注意給nav元素添加導(dǎo)航條樣式

  
• 03

  接下來就給導(dǎo)航添加內(nèi)容，如下圖所示，運用的是ul元素，這里也運用了nav導(dǎo)航樣式

  
• 04

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

  
• 05

  Bootstrap中的導(dǎo)航有下拉效果的設(shè)計，如果想用這種效果，需要用dropdown樣式，如下圖所示

  
• 06

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

  
• 07

  最后我們運行頁面程序，你會看到如下圖所示的效果，下拉導(dǎo)航以及激活狀態(tài)都已經(jīng)顯示出來了