bootstrap導(dǎo)航條-創(chuàng)新互聯(lián)

一、默認(rèn)的導(dǎo)航條

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供陸港網(wǎng)站建設(shè)、陸港做網(wǎng)站、陸港網(wǎng)站設(shè)計(jì)、陸港網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、陸港企業(yè)網(wǎng)站模板建站服務(wù)，10多年陸港做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

制作默認(rèn)的導(dǎo)航條，可分以下幾步：

1.在ul里加上（ul class="nav navbar-nav"）樣式；

2.在ul外加一層div或nav(ps:HTML5新屬性)，并且添加樣式（div class="navbar nabar-default"）;

bootstrap 導(dǎo)航條

1 2         3             吃飯4             睡覺
5             打勇士
6         7

bootstrap 導(dǎo)航條

如圖下：

bootstrap 導(dǎo)航條

So easy吧qaq

二、帶有表單的導(dǎo)航條

1.在默認(rèn)導(dǎo)航條的基礎(chǔ)上，再一個(gè)form。

2.form中應(yīng)用樣式（form class="navbar-form"）

bootstrap 導(dǎo)航條

 1  2          3             吃飯 4             睡覺
 5             打勇士
 6          7          8              9             10             11         12

bootstrap 導(dǎo)航條

如圖下：

bootstrap 導(dǎo)航條

擦，寫錯(cuò)了，其實(shí)我想寫打火箭的。。。

三、表單，下拉菜單等冗合的導(dǎo)航條

上一個(gè)綜合例子，不然一個(gè)一個(gè)寫，小編得coding到天亮，廢話少說，直說上料。

bootstrap 導(dǎo)航條

 1  2          3             吃飯 4             睡覺
 5             打勇士
 6              7               西決幾比幾 8                9                 4:0
10                 4:1
11                 4:212               13             14         15         16             17             18             19         20

bootstrap 導(dǎo)航條

如圖下：

bootstrap 導(dǎo)航條

咳咳，一般導(dǎo)航都有個(gè)大標(biāo)題，如圖下：

實(shí)現(xiàn)步驟：

1.在div里添加樣式（div class="navbar-header"）；

2.在此div添加a標(biāo)簽(a class="navbar-brand")；

navbar-brand(品牌)也就是大標(biāo)題啦！

bootstrap 導(dǎo)航條

 1  2          3             阿爾德里奇 4

5 6 吃飯 7

睡覺

打勇士

9 10 西決幾比幾11 12

4:0

4:1

14 4:215 16 17 18 19 20 21 22 23

bootstrap 導(dǎo)航條

四、反色導(dǎo)航條

反色導(dǎo)航條其實(shí)是Bootstrap框架為大家提供的第二種風(fēng)格的導(dǎo)航條，只是將"navbar-deafult"類名換成"navbar-inverse"。其他不變，見下圖：

bootstrap 導(dǎo)航條

個(gè)人還是比較喜歡這個(gè)風(fēng)格的，夠裝逼~

五、固定導(dǎo)航條

顧名思義，其實(shí)就是fixed樣式,

Bootstrap框架提供了兩種固定導(dǎo)航條的方式：

.navbar-fixed-top：導(dǎo)航條固定在瀏覽器窗口頂部

.navbar-fixed-bottom：導(dǎo)航條固定在瀏覽器窗口底部

使用方法很簡(jiǎn)單，只需要在制作導(dǎo)航條最外部容器navbar上追加對(duì)應(yīng)的類名即可

bootstrap 導(dǎo)航條

…

　…

我這是套的反色導(dǎo)航條的，現(xiàn)在分別看下寬屏和窄屏的顯示效果，如圖下：

網(wǎng)站建設(shè)知識(shí)

bootstrap導(dǎo)航條-創(chuàng)新互聯(lián)

其他資訊