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

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

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

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

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

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

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

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