導航欄
導航欄是一個導航標題被放置在頁面的頂部：
有了Bootstrap ，導航欄可以擴展或收縮，這取決於屏幕尺寸。
一個標準的導航欄與創建<nav class="navbar navbar-default"> 。
下面的示例演示如何將導航欄添加到頁面的頂部：
例
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
試一試» 所有這些頁面上的例子顯示一個導航欄，佔用了在小屏幕上太多的空間（但是，導航欄將是在一個單獨的一行在大屏幕上-因為Bootstrap響應）。 這個問題（與小屏幕）將在此頁面上的最後一個例子來解決。
倒導航欄
如果你不喜歡默認的導航欄的風格， Bootstrap提供了另一種選擇，黑色導航欄：
只要改變.navbar-default全班分成.navbar-inverse ：
例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
試一試» 固定導航欄
導航欄，也可以固定在上面或在頁面的底部。
固定導航欄停留在獨立的頁面滾動的固定位置（頂部或底部）可見。
該.navbar-fixed-top類使得固定在頂部的導航欄：
例
<nav class="navbar navbar-inverse
navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> 試一試» 該.navbar-fixed-bottom類使得導航欄留在底部：
例
<nav class="navbar navbar-inverse
navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> 試一試» 導航欄帶有下拉
導航欄也可以按住下拉菜單。
下面的示例添加一個下拉菜單，為“第1頁”按鈕：
例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Page
1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Page
1-1</a></li>
<li><a href="#">Page
1-2</a></li>
<li><a href="#">Page
1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> 試一試» 右對齊導航欄
該.navbar-right類用於右對齊的導航欄按鈕。
在下面的例子中，我們插入一個“註冊”按鈕和一個“登錄”按鈕，在導航欄的右側。 我們還對每兩個新按鈕添加一個glyphicon：
例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav
navbar-right">
<li><a href="#"><span
class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</nav> 試一試» 折疊導航欄
導航欄佔用了小屏幕上太多的空間。
我們應該隱藏導航欄; 並只顯示它在需要時。
在下面的例子中，導航欄是由在右上角的一個按鈕所取代。 單擊該按鈕只有當，將顯示的導航欄：
例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav
navbar-right">
<li><a href="#"><span
class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</div>
</nav> 試一試»