Bootstrap 導航欄
導航欄
導航欄是放置在頁面頂部的導航標題
使用 Bootstrap，導航欄可以根據螢幕尺寸進行擴充套件或摺疊。
標準的導航欄使用 <nav class="navbar navbar-default"> 建立。
下面的示例展示瞭如何為頁面頂部新增一個導航欄
示例
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">網站名稱</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">頁面 1</a></li>
<li><a href="#">頁面 2</a></li>
<li><a href="#">頁面 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="#">網站名稱</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">頁面 1</a></li>
<li><a href="#">頁面 2</a></li>
<li><a href="#">頁面 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="#">網站名稱</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">頁面 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">頁面 1-1</a></li>
<li><a href="#">頁面 1-2</a></li>
<li><a href="#">頁面 1-3</a></li>
</ul>
</li>
<li><a href="#">頁面 2</a></li>
<li><a href="#">頁面 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="#">網站名稱</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">頁面 1</a></li>
<li><a href="#">頁面 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 註冊</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登入</a></li>
</ul>
</div>
</nav>
自己動手試一試 »
導航欄按鈕
要在導航欄中新增按鈕，請在 Bootstrap 按鈕上新增 .navbar-btn 類
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">網站名稱</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>
<button class="btn btn-danger navbar-btn">按鈕</button>
</div>
</nav>
自己動手試一試 »
導航欄表單
要在導航欄中新增表單元素，請將 .navbar-form 類新增到表單元素並新增輸入項。請注意，我們已將 .form-group 類新增到包含輸入項的 div 容器中。如果您有多個輸入項，這將新增適當的間距（您將在表單章節中瞭解更多關於此資訊）。
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">網站名稱</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">頁面 1</a></li>
<li><a href="#">頁面 2</a></li>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="搜尋">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
</nav>
自己動手試一試 »
您還可以使用 .input-group 和 .input-group-addon 類來在輸入欄位旁邊附加圖示或幫助文字。您將在 Bootstrap 輸入章節中瞭解更多關於這些類的資訊。
示例
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜尋">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
自己動手試一試 »
導航欄文字
使用 .navbar-text 類來垂直對齊導航欄中的任何非連結元素（確保正確的間距和文字顏色）。
示例
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">連結</a></li>
<li><a href="#">連結</a></li>
</ul>
<p class="navbar-text">一些文字</p>
</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="#">網站名稱</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">頁面 1</a></li>
<li><a href="#">頁面 2</a></li>
<li><a href="#">頁面 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="#">網站名稱</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">頁面 1</a></li>
<li><a href="#">頁面 2</a></li>
<li><a href="#">頁面 3</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="#">網站名稱</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">頁面 1</a></li>
<li><a href="#">頁面 2</a></li>
<li><a href="#">頁面 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 註冊</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登入</a></li>
</ul>
</div>
</div>
</nav>
自己動手試一試 »
