以下理論內容copy自Bootstrap中文網 （一個不錯的bootstrap學習網站）
導航條
默認樣式的導航條
導航條是在您的應用或網站中作為導航頁頭的響應式基礎組件。它們在移動設備上可以折疊（並且可開可關），且在視口（viewport）寬度增加時逐漸變為水平展開模式。
以下代碼和注釋是我學習過程中的理解
（注意 引入必要的.css 和 .js查看）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 導航條模板</title>
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<!-- <div class="container-fluid"> -->
<!-- 將 100% 寬度的布局轉換為固定寬度的柵格布局。 -->
<div class="container">
<!-- 品牌商標 和 獲得更好的移動分組顯示-->
<!-- .navbar-header元素裡放了一個button按鈕和一個a鏈接
先說簡單的a鏈接，用於放置網頁logo，導航欄上通常都需要
button按鈕 是一個開關，當在移動設備上顯示是，導航條一行顯示不完，導航具體內容部分變會崩塌原有的顯示形式，收集為多行顯示，並隱藏，使用button 按鈕可控制其（顯示/隱藏）
-->
<!-- Brand and toggle get grouped for better mobile display -->
<!-- 以下導航頭部 -->
<div class="navbar-header">
<!-- 當屏幕縮小時 id為bs-example-navbar-collapse-1的元素隱藏，使用下面這個button 調出 #bs-example-navbar-collapse-1元素 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!-- <span class="sr-only">Toggle navigation</span> -->
<!-- 下面三個span 只是用來顯示 三條 橫線樣式，可以清除注釋看看 -->
<!-- <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span> -->
更多
</button>
<!-- 將導航條內放置品牌標志的地方替換為 <img> 元素即可展示自己的品牌圖標。由於 .navbar-brand 已經被設置了內補（padding）和高度（height），你需要根據自己的情況添加一些 CSS 代碼從而覆蓋默認設置。 -->
<!-- 放置商標的地方 -->
<a class="navbar-brand" href="#">Brand</a>
<!-- a鏈接裡當然也可以圖片 或 字體圖標 -->
</div>
<!-- 以下為導航具體內容，身體部分 -->
<!-- 收集導航鏈接、表單和其他內容 方便移動設備時。收集隱藏 -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- 導航條的內容裡有五部分 根據需求更改-->
<!-- 第一部分 -->
<ul class="nav navbar-nav">
<li class="active"><a href="#">鏈接<span class="sr-only">(current)</span></a></li>
<li><a href="#">鏈接</a></li>
<li class="dropdown">
<!-- 用來控制 下拉列表顯示/隱藏 -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">一個行為</a></li>
<li><a href="#">另一個行為</a></li>
<li><a href="#">其他的行為</a></li>
<!-- .divider 分隔器 與上面分隔一條線 -->
<li role="separator" class="divider"></li>
<li><a href="#">分隔開的鏈接</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">另一個分隔開的鏈接</a></li>
</ul>
</li>
</ul>
<!-- 第二部分 一個文本 -->
<!-- 把文本包裹在 .navbar-text中時，為了有正確的行距和顏色，通常使用 <p> 標簽。 -->
<p class="navbar-text">文本內容</p>
<!-- 第三部分 是一個表單-->
<!-- 將表單放置於 .navbar-form 之內可以呈現很好的垂直對齊，並在較窄的視口（viewport）中呈現折疊狀態。 使用對齊選項可以規定其在導航條上出現的位置。 -->
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="請輸入內容">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
<!-- 第四部分是一個獨立按鈕 -->
<!-- 對於不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 後，可以讓它在導航條裡垂直居中。有一些對於為輔助設備提供可識別標簽的方法，例如， aria-label、aria-labelledby 或者 title 屬性。如果這些方法都沒有，屏幕閱讀器將使用 placeholder 屬性（如果這個屬性存在的話），但是請注意，使用 placeholder 代替其他識別標簽的方式是不推薦的。 -->
<button type="button" class="btn btn-default navbar-btn">獨立按鈕</button>
<!-- 第五部分 -->
<!-- 或許你希望在標准的導航組件之外添加標准鏈接，那麼，使用 .navbar-link 類可以讓鏈接有正確的默認顏色和反色設置。 -->
<p class="navbar-text">正常文本<a href="#" class="navbar-link"> 非導航鏈接</a></p>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
</body>
</html>
組件排列
通過添加 .navbar-left 和 .navbar-right 工具類讓導航鏈接、表單、按鈕或文本對齊。兩個類都會通過 CSS 設置特定方向的浮動樣式。例如，要對齊導航鏈接，就要把它們放在個分開的、應用了工具類的 <ul> 標簽裡。
這些類是 .pull-left 和 .pull-right 的 mixin 版本，但是他們被限定在了媒體查詢（media query）中，這樣可以更容易的在各種尺寸的屏幕上處理導航條組件。
向右側對齊多個組件
導航條目前不支持多個 .navbar-right 類。為了讓內容之間有合適的空隙，我們為最後一個 .navbar-right 元素使用負邊距（margin）。如果有多個元素使用這個類，它們的邊距（margin）將不能按照你的預期正常展現。
我們將在 v4 版本中重寫這個組件時重新審視這個功能。
固定在頂部
添加 .navbar-fixed-top 類可以讓導航條固定在頂部，還可包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，並在兩側添加內補（padding）。
需要為 body 元素設置內補（padding）
這個固定的導航條會遮住頁面上的其它內容，除非你給 <body> 元素底部設置了 padding。用你自己的值，或用下面給出的代碼都可以。提示：導航條的默認高度是 50px。
body { padding-top: 70px; }
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> ... </div> </nav>
固定在底部
添加 .navbar-fixed-bottom 類可以讓導航條固定在底部，並且還可以包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，並在兩側添加內補（padding）。
需要為 body 元素設置內補（padding）
這個固定的導航條會遮住頁面上的其它內容，除非你給 <body> 元素底部設置了 padding。用你自己的值，或用下面給出的代碼都可以。提示：導航條的默認高度是 50px。
body { padding-bottom: 70px; }
<nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> ... </div> </nav>
靜止在頂部
通過添加 .navbar-static-top 類即可創建一個與頁面等寬度的導航條，它會隨著頁面向下滾動而消失。還可以包含一個 .container 或 .container-fluid 容器，用於將導航條居中對齊並在兩側添加內補（padding）。
通過添加 .navbar-static-top 類即可創建一個與頁面等寬度的導航條，它會隨著頁面向下滾動而消失。還可以包含一個 .container 或 .container-fluid 容器，用於將導航條居中對齊並在兩側添加內補（padding）。to center and pad navbar content.
<nav class="navbar navbar-default navbar-static-top"> <div class="container"> ... </div> </nav>
反色的導航條
通過添加 .navbar-inverse 類可以改變導航條的外觀。
<nav class="navbar navbar-inverse"> ... </nav>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。