bootstrap框架必須有, 還有就是基礎(chǔ)的搭建模版, 如果不清楚, 請(qǐng)看"系列一"的文章.
方法/步驟
這里bootstrap使用了html5的一個(gè)新的標(biāo)簽nav.
<nav>標(biāo)簽定義導(dǎo)航鏈接的部分.
使用了樣式. .navbar樣式標(biāo)識(shí)的是一個(gè)導(dǎo)航條.
其中.navbar又包含了:.navbar-header, .navbar-toggle, .navbar-brand
下面先給出一個(gè)帶有鏈接的, 而且還支持移動(dòng)端的例子代碼.

bootstrap導(dǎo)航條的可選頁(yè)面, 有兩種(可自己寫(xiě)css定義), 第一種默認(rèn)的.navbar-default, 效果是:白色的背景黑色的字, 第二種是.navbar-inverse, 效果是:黑色的背景加上白色的字. 只需要選中自己想要的效果即可, 這里需要注意的地方有一點(diǎn). 就是如果想要這兩種默認(rèn)的其他效果, 就需要自己去實(shí)現(xiàn)樣式, 可以查看css的源代碼, 然后去看.navbar-inverse怎么實(shí)現(xiàn), 然后模仿實(shí)現(xiàn)即可, 這是一個(gè)笨辦法, 還有另外一種方式, 就是使用less, 重新寫(xiě)樣式, 因?yàn)閎ootstrap可運(yùn)行的樣式, 也是用less構(gòu)建的, 也有sass版的, 這里只是簡(jiǎn)單的介紹一下, 定義好的樣式, 這些在以后的經(jīng)驗(yàn)中還會(huì)繼續(xù)提到.

上面定義了一個(gè)簡(jiǎn)單的帶有鏈接的導(dǎo)航條, 然后相信的說(shuō)明一下, 這個(gè)簡(jiǎn)單的代碼.
1.導(dǎo)航條樣式的開(kāi)始. 這里需要注意一點(diǎn): 為了增強(qiáng)可訪問(wèn)性(和瀏覽器的兼容性)，務(wù)必給每個(gè)導(dǎo)航條加上 role="navigation" 屬性。方便bootstrap中js處理導(dǎo)航條的顯示樣式.
2.導(dǎo)航條的頁(yè)頭, 也就是顯示在最前面的導(dǎo)航條標(biāo)題. 這個(gè)是bootstrap中的一個(gè)帶有圖標(biāo)的標(biāo)簽, 然后這里也是在移動(dòng)端, 就是小于768設(shè)備顯示的效果.
3.這部分是移動(dòng)端折疊的部分, 也是為了能夠更好的展現(xiàn)頁(yè)面在移動(dòng)端.

導(dǎo)航條上除了能夠加上一些鏈接之外, 還可以加上一些按鈕, 和一些表單, 例如: 搜索框.
舉例子: 按鈕, 直接寫(xiě)button標(biāo)簽屬性即可. 需要注意的是, 一定要在button的樣式上加上.navbar-btn 這樣你看到的效果才是比較美觀的.

不僅還有按鈕, 還有一些下拉列表, 這里, 下拉列表, 就是bootstrap中的下拉. 使用一下的代碼來(lái)展示下拉樣式.

在這里, 如果我們想要把其中的按鈕, 鏈接或者文字, 放到右邊, 應(yīng)該怎么做呢? 我們可以使用bootstarp中的.navbar-left 和 .navbar-right 來(lái)做到按鈕, 下拉菜單等元素的居左和居右. 需要注意的是, 這個(gè)樣式只能寫(xiě)在ul中. 看實(shí)例, 就明白了.

有時(shí)候, 我們需要把我們的導(dǎo)航條固定在頂端, 和固定在底部. 這個(gè)的效果, 在bootstrap中, 很容易就實(shí)現(xiàn)了, 首先需要用到固定頂端的樣式..navbar-fixed-top 和固定底端的樣式.navbar-fixed-bottom

框架的功能樣式, 只是針對(duì)那些前端技術(shù)不是很好, 又想做出不錯(cuò)樣式的人來(lái)說(shuō), 是最好的選擇。