BootStrap 導(dǎo)航條實(shí)例代碼
更新時(shí)間：2017年05月18日 08:56:08 作者：realDanielWu
本文通過實(shí)例代碼給大家介紹了bootstrap導(dǎo)航條效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
一、默認(rèn)的導(dǎo)航條
制作默認(rèn)的導(dǎo)航條，可分以下幾步：
1.在ul里加上（ul class="nav navbar-nav"）樣式；
2.在ul外加一層div或nav(ps:HTML5新屬性)，并且添加樣式（div class="navbar nabar-default"）;
<nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li> </ul> </nav>
如圖下：
So easy吧qaq
二、帶有表單的導(dǎo)航條
1.在默認(rèn)導(dǎo)航條的基礎(chǔ)上，再一個(gè)form。
2.form中應(yīng)用樣式（form class="navbar-form"）
<nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li> </ul> <form class="navbar-form"> <input type="text" class="form-control" placeholder="猜猜是誰？"> <input type="submit" class="form-control" value="我瞧瞧~"> </form> </nav>
如圖下：
擦，寫錯(cuò)了，其實(shí)我想寫打火箭的。。。
三、表單，下拉菜單等冗合的導(dǎo)航條
上一個(gè)綜合例子，不然一個(gè)一個(gè)寫，小編得coding到天亮，廢話少說，直說上料。
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li>
<li class="dropdown">
<a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="dropdown" class="dropdown-toggle">西決幾比幾<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:0</a></li>
<li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:1</a></li>
<li class="disabled"><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:2</a></li>
</ul>
</li>
</ul>
<form class="navbar-form">
<input type="text" class="form-control" placeholder="猜猜是誰？">
<input type="submit" class="form-control" value="我瞧瞧~">
</form>
</nav>如圖下：
咳咳，一般導(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)題啦！
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">阿爾德里奇</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li>
<li class="dropdown">
<a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="dropdown" class="dropdown-toggle">西決幾比幾<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:0</a></li>
<li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:1</a></li>
<li class="disabled"><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:2</a></li>
</ul>
</li>
</ul>
<form class="navbar-form">
<input type="text" class="form-control" placeholder="猜猜是誰？">
<input type="submit" class="form-control" value="我瞧瞧~">
</form>
</nav>四、反色導(dǎo)航條
反色導(dǎo)航條其實(shí)是Bootstrap框架為大家提供的第二種風(fēng)格的導(dǎo)航條，只是將"navbar-deafult"類名換成"navbar-inverse"。其他不變，見下圖：
個(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)的類名即可
<!--導(dǎo)航條固定在瀏覽器窗口頂部--> <div class="navbar navbar-default navbar-fixed-top"> … </div> <!--導(dǎo)航條固定在瀏覽器窗口底部--> <div class="navbar navbar-default navbar-fixed-bottom"> … </div>
六、響應(yīng)式導(dǎo)航條
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- .navbar-toggle樣式用于toggle收縮的內(nèi)容，即navbar-collapse collapse樣式所在元素，-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 確保無論是寬屏還是窄屏，navbar-brand都顯示 -->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">我的主頁</a>
</div>
<!-- 屏幕寬度小于768px時(shí)，div.navbar-collapse容器里的內(nèi)容都會(huì)隱藏，顯示icon-bar圖標(biāo)，當(dāng)點(diǎn)擊icon-bar圖標(biāo)時(shí)，再展開。屏幕大于768px時(shí)，默認(rèn)顯示。 -->
<div id="navbar" class=" collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打火箭</a></li>
</ul>
</div>
</div>
</div>我這是套的反色導(dǎo)航條的，現(xiàn)在分別看下寬屏和窄屏的顯示效果，如圖下：
<button>里面是窄屏右上角的按鈕，span標(biāo)簽是三道杠，
現(xiàn)在說一下上面代碼中第5行，data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"，這都什么跟什么啊，我這逐一介紹一下；
data-toggle="collapse" 代表 告訴js要什么事件來觸發(fā),此處的coolapse為“伸展折疊”；
data-target="#navbar" 代表 誰要以伸展折疊的方式來展示，綁定的是ID；
aria-expanded="false" 代表 是否展開，false。
談到這aria-*，為無障礙網(wǎng)頁應(yīng)用。主要針對(duì)的是視覺缺陷，失聰，行動(dòng)不便的殘疾人以及假裝殘疾的測(cè)試人員。尤其像盲人，眼睛看不到，其瀏覽網(wǎng)頁則需要借助輔助設(shè)備，如屏幕閱讀器，屏幕閱讀機(jī)可以大聲朗讀或者輸出盲文。
以上所述是小編給大家介紹的BootStrap 導(dǎo)航條實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript(JS) 壓縮 / 混淆 / 格式化 批處理工具
本工具所有的功能實(shí)現(xiàn)都是由 ttp://jscompress.sinaapp.com/api 處理.（包括現(xiàn)在可以使用的這個(gè)在線壓縮）2010-12-12
JavaScript高級(jí)程序設(shè)計(jì)（第三版）學(xué)習(xí)筆記1~5章
這篇文章主要介紹了JavaScript高級(jí)程序設(shè)計(jì)（第三版）學(xué)習(xí)筆記1~5章 的相關(guān)資料,需要的朋友可以參考下2016-03-03
給moz-firefox下添加IE方法和屬性...2007-04-04
下面小編就為大家?guī)硪黄獪\談JS函數(shù)定義方式的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了JavaScript中獲取樣式的原生方法小結(jié),本文總結(jié)了5種JS獲取樣式的原生方法,并分別給出了實(shí)例,需要的朋友可以參考下2014-10-10
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)多條件篩選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
javascript創(chuàng)建函數(shù)的20種方式匯總
這篇文章主要介紹了javascript創(chuàng)建函數(shù)的20種方式匯總的相關(guān)資料,需要的朋友可以參考下
2015-06-06 
原生JavaScript實(shí)現(xiàn)todolist功能
本篇文章給大家介紹了通過原生JavaScript實(shí)現(xiàn)todolist功能相關(guān)知識(shí)點(diǎn)，對(duì)此有需要的朋友可以學(xué)習(xí)下。
2018-03-03 
JavaScript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁面功能【實(shí)用】
本文分享了JavaScript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁面功能的具體實(shí)例代碼，頁面代碼簡(jiǎn)單，直接拷貝就能運(yùn)行，頁面可以自己美化下哦。需要的朋友一起來看下吧
2016-12-12