導(dǎo)航條（navbar）在Bootstrap中是一個(gè)獨(dú)立組件，導(dǎo)航條（navbar）和導(dǎo)航（nav）在Bootstrap中是有明顯的區(qū)別的。在導(dǎo)航條（navbar）中有一個(gè)背景色、而且導(dǎo)航條可以是純鏈接、表單、表單和導(dǎo)航一起結(jié)合等多種形式。

1.實(shí)戰(zhàn)一-帶二級(jí)菜單和表單的導(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)題通過(guò)“navbar-header”和“navbar-brand”來(lái)實(shí)現(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="##">首頁(yè)</a></li>
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">博客<span class="caret"></span></a>
 <!--二級(jí)菜單-->
 <ul class="dropdown-menu">
 <li><a href="##">二級(jí)菜單</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="請(qǐng)輸入關(guān)鍵詞" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>
<!-- 放置在文檔的結(jié)尾，使頁(yè)面加載速度更快 -->
<!-- 如果要使用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>

效果圖如下：

帶二級(jí)菜單和表單的導(dǎo)航條

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.實(shí)戰(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="##">首頁(yè)</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="##">首頁(yè)</a></li>
  <li><a href="##">博客</a></li>
  <li><a href="##">論壇</a></li>
  </ul>
</div>
<!--正文內(nèi)容-->
<div class="content">網(wǎng)頁(yè)正文內(nèi)容</div>

效果圖如下：

固定導(dǎo)航條

3.實(shí)戰(zhàn)三-響應(yīng)式導(dǎo)航條

效果圖如下：

響應(yīng)式導(dǎo)航條

有的時(shí)候會(huì)有需要反色的情況，Bootstrap為此提供了反色導(dǎo)航條，只是將navbar-deafult類名換成navbar-inverse，然后導(dǎo)航條的背景色和文本的顏色就會(huì)修改。

4.實(shí)戰(zhàn)四-分頁(yè)導(dǎo)航

1）帶頁(yè)碼的分頁(yè)導(dǎo)航

<!-- pagination：正常大小
 pagination-lg：讓分頁(yè)導(dǎo)航變大 
 pagination-sm：讓分頁(yè)導(dǎo)航變小-->
<ul class="pagination pagination">
 <li><a href="#">&laquo;首頁(yè)</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="#">尾頁(yè)&raquo;</a></li>
</ul>

效果圖如下：

帶頁(yè)碼的分頁(yè)導(dǎo)航

2）翻頁(yè)分頁(yè)導(dǎo)航

<ul class="pager">
 <li><a href="#">&laquo;上一頁(yè)</a></li>
 <!--禁用狀態(tài)-->
 <li class="disabled"><a href="#">下一頁(yè)&raquo;</a></li>
</ul> 
<!--左右對(duì)齊-->
<ul class="pager">
 <li class="previous"><a href="#">&laquo;上一頁(yè)</a></li>
 <li class="next"><a href="#">下一頁(yè)&raquo;</a></li>
</ul>

效果圖如下：

翻頁(yè)分頁(yè)導(dǎo)航

5.實(shí)戰(zhàn)五-標(biāo)簽

在一些Web頁(yè)面中常常會(huì)添加一個(gè)標(biāo)簽用來(lái)告訴用戶一些額外的信息，例如：

標(biāo)簽示例圖

Bootstrap中將這樣的效果提取出來(lái)成為一個(gè)標(biāo)簽組件，并且以“.label”樣式來(lái)實(shí)現(xiàn)高亮顯示。和按鈕元素button類似，label樣式也提供了多種顏色，主要是通過(guò)這幾個(gè)類名來(lái)修改背景顏色和文本顏色：

效果圖如下：

標(biāo)簽

6.實(shí)戰(zhàn)六-徽章

徽章多用于提醒有多少未讀消息這樣的需求，在Bootstrap中，使用“badge”樣式來(lái)實(shí)現(xiàn)徽章效果。

<!--navbar-default導(dǎo)航條勛章-->
<div class="navbar navbar-default" 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="##">首頁(yè)</a></li>
  <li><a href="##">博客</a></li>
  <li><a href="##">論壇<span class="badge">10</span></a></li>
  <li><a href="##">反饋</a></li>
 </ul>
</div>

效果圖如下：

7.實(shí)戰(zhàn)七-帶動(dòng)畫(huà)過(guò)渡的彈出框

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>帶動(dòng)畫(huà)過(guò)的渡彈出框</title>
 <link rel="stylesheet" >
 <!--css樣式-->
 <style >
  body{margin:30px;padding:30px;}
 </style>
</head>
<body>

<button class="btn btn-primary" type="button">點(diǎn)擊我</button>
<div class="modal fade" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
     <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
    </button>
    <h4 class="modal-title">彈出窗標(biāo)題</h4>
   </div>
   <div class="modal-body">
    <p>彈出窗主體內(nèi)容</p>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
    <button type="button" class="btn btn-primary">保存</button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 放置在文檔的結(jié)尾，使頁(yè)面加載速度更快 -->
<!-- 如果要使用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> 
<script>
 $(function(){
  $(".btn").click(function(){
   $("#mymodal").modal("toggle");
  });
 });
</script>
</body>
</html>

效果圖如下：

帶動(dòng)畫(huà)過(guò)渡的彈出框