導(dǎo)航條（navbar）在Bootstrap中是一個獨(dú)立組件，導(dǎo)航條（navbar）和導(dǎo)航（nav）在Bootstrap中是有明顯的區(qū)別的。在導(dǎo)航條（navbar）中有一個背景色、而且導(dǎo)航條可以是純鏈接、表單、表單和導(dǎo)航一起結(jié)合等多種形式。
1.實戰(zhàn)一-帶二級菜單和表單的導(dǎo)航條
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>導(dǎo)航條</title> <link rel="stylesheet" > <!--css樣式--> <style > body{margin:30px;padding:30px;} </style></head><body><div class="navbar navbar-default" role="navigation"> <!--標(biāo)題通過“navbar-header”和“navbar-brand”來實現(xiàn)--> <div class="navbar-header"> <a href="##" class="navbar-brand">標(biāo)題</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">首頁</a></li> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">博客<span class="caret"></span></a> <!--二級菜單--> <ul class="dropdown-menu"> <li><a href="##">二級菜單</a></li> </ul> </li> <li><a href="##">論壇</a></li> </ul> <!--表單--> <form action="##" class="navbar-form navbar-left" rol="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="請輸入關(guān)鍵詞" /> </div> <button type="submit" class="btn btn-default">搜索</button> </form></div><!-- 放置在文檔的結(jié)尾，使頁面加載速度更快 --><!-- 如果要使用Bootstrap的js插件，必須先調(diào)入jQuery --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script><!-- 包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用 --><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>效果圖如下：
Bootstrap的導(dǎo)航條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，還可以使用其他元素：
1）導(dǎo)航條中的按鈕navbar-btn
2）導(dǎo)航條中的文本navbar-text
3）導(dǎo)航條中的普通鏈接navbar-link
2.實戰(zhàn)二-固定導(dǎo)航條
<!--頂部導(dǎo)航條--><div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">標(biāo)題</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">首頁</a></li> <li><a href="##">博客</a></li> <li><a href="##">論壇</a></li> </ul></div><!--底部導(dǎo)航條--><div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">標(biāo)題</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">首頁</a></li> <li><a href="##">博客</a></li> <li><a href="##">論壇</a></li> </ul></div><!--正文內(nèi)容--><div class="content">網(wǎng)頁正文內(nèi)容</div>
效果圖如下：
3.實戰(zhàn)三-響應(yīng)式導(dǎo)航條
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <!-- .navbar-toggle樣式用于toggle收縮的內(nèi)容，即nav-collapse collapse樣式所在元素 --> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 確保無論是寬屏還是窄屏，navbar-brand都顯示 --> <a href="##" class="navbar-brand">標(biāo)題</a> </div> <!-- 屏幕寬度小于768px時，div.navbar-responsive-collapse容器里的內(nèi)容都會隱藏， 顯示icon-bar圖標(biāo)，當(dāng)點(diǎn)擊icon-bar圖標(biāo)時，再展開。屏幕大于768px時，默認(rèn)顯示。 --> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="##">首頁</a></li> <li><a href="##">博客</a></li> <li><a href="##">論壇</a></li> </ul> </div></div>
效果圖如下：
有的時候會有需要反色的情況，Bootstrap為此提供了反色導(dǎo)航條，只是將navbar-deafult類名換成navbar-inverse，然后導(dǎo)航條的背景色和文本的顏色就會修改。
4.實戰(zhàn)四-分頁導(dǎo)航
1）帶頁碼的分頁導(dǎo)航
<!-- pagination：正常大小 pagination-lg：讓分頁導(dǎo)航變大 pagination-sm：讓分頁導(dǎo)航變小--><ul class="pagination pagination"> <li><a href="#">«首頁</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <!--當(dāng)前狀態(tài)--> <li class="active"><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <!--禁用狀態(tài)--> <li class="disabled"><a href="#">尾頁»</a></li></ul>
效果圖如下：
2）翻頁分頁導(dǎo)航
<ul class="pager"> <li><a href="#">«上一頁</a></li> <!--禁用狀態(tài)--> <li class="disabled"><a href="#">下一頁»</a></li></ul> <!--左右對齊--><ul class="pager"> <li class="previous"><a href="#">«上一頁</a></li> <li class="next"><a href="#">下一頁»</a></li></ul>
效果圖如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
