如何用Bootstrap製作導航條
- IT技術
- 關注:1.44W次
工具/材料
Sublime Text
操作方法
首先我們需要搭建一個html頁面,如下圖所示,在頁面中導入需要的bootstrap文件
然後我們在body標籤中寫下nav元素,如下圖所示,注意給nav元素添加導航條樣式
接下來就給導航添加內容,如下圖所示,運用的是ul元素,這裏也運用了nav導航樣式
如果想要激活哪個導航,只需要像下圖的方式,在li元素中添加active樣式即可
Bootstrap中的導航有下拉效果的設計,如果想用這種效果,需要用dropdown樣式,如下圖所示
另外,值得一提的下拉導航條中可以加分割線,如下圖所示,運用divider樣式即可
最後我們運行頁面程序,你會看到如下圖所示的效果,下拉導航以及激活狀態都已經顯示出來了
- 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/sm/itjishu/8e2z2.html