實例：
1 <!-- navbar 代表導航條|navbar-default 代表導航條默認樣式 --> 2 <nav class="navbar navbar-default"> 3 <!-- container-fluid 自適應瀏覽器大小布局|container 居中的固定寬度的布局 --> 4 <div class="container-fluid"> 5 <!-- Brand and toggle get grouped for better mobile display --> 6 <div class="navbar-header"> 7 <!-- 代表當瀏覽器寬度小於某個值時即顯示三橫圖標 --> 8 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 9 <span class="sr-only">Toggle navigation</span> 10 <span class="icon-bar"></span> 11 <span class="icon-bar"></span> 12 <span class="icon-bar"></span> 13 </button> 14 <!-- Brand 代表商標即左上方的logo --> 15 <a class="navbar-brand" href="#">Brand</a> 16 </div> 17 18 <!-- Collect the nav links, forms, and other content for toggling --> 19 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 20 21 <!-- 導航條中的導航選擇項 --> 22 <ul class="nav navbar-nav"> 23 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 24 <li><a href="#">Link</a></li> 25 <li class="dropdown"> 26 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 27 <ul class="dropdown-menu"> 28 <li><a href="#">Action</a></li> 29 <li><a href="#">Another action</a></li> 30 <li><a href="#">Something else here</a></li> 31 <li role="separator" class="divider"></li> 32 <li><a href="#">Separated link</a></li> 33 <li role="separator" class="divider"></li> 34 <li><a href="#">One more separated link</a></li> 35 </ul> 36 </li> 37 </ul> 38 39 <!-- 導航條中的表單 --> 40 <form class="navbar-form navbar-left"> 41 <div class="form-group"> 42 <input type="text" class="form-control" placeholder="Search"> 43 </div> 44 <button type="submit" class="btn btn-default">Submit</button> 45 </form> 46 <!-- 導航條右側的下拉菜單 --> 47 <ul class="nav navbar-nav navbar-right"> 48 <li><a href="#">Link</a></li> 49 <li class="dropdown"> 50 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 51 <ul class="dropdown-menu"> 52 <li><a href="#">Action</a></li> 53 <li><a href="#">Another action</a></li> 54 <li><a href="#">Something else here</a></li> 55 <li role="separator" class="divider"></li> 56 <li><a href="#">Separated link</a></li> 57 </ul> 58 </li> 59 </ul> 60 </div><!-- /.navbar-collapse --> 61 </div><!-- /.container-fluid --> 62 </nav>
※ 導航條依賴於javascript，響應式導航條依賴（collapse）插件
由於此處引入了bootstap的js，所以就不用單獨引用該插件了。
固定在頂部：
添加 .navbar-fixed-top 類可以讓導航條固定在頂部，還可包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，並在兩側添加內補（padding）
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> ... </div> </nav>
注意點：需要為 body 元素設置內補（padding）
這個固定的導航條會遮住頁面上的其它內容，除非你給 <body> 元素底部設置了 padding。用你自己的值，或用下面給出的代碼都可以。
提示：導航條的默認高度是 50px。
body { padding-top: 70px; }
為何設置70px而不是50px?（當設置為50px時，效果如下）
反色的導航條（黑底展示）
通過添加 .navbar-inverse 類可以改變導航條的外觀。
<nav class="navbar navbar-inverse"> ... </nav>
實例效果截圖：
對齊類：
通過添加 .navbar-left 和 .navbar-right 工具類讓導航鏈接、表單、按鈕或文本對齊。兩個類都會通過 CSS 設置特定方向的浮動樣式。
※ 當然關於其他細節事項請參看官方文檔。END