## 導航條 Bootstrap中的導航條（navbar）是放在應用或網站的頭部，作為導航的響應式基礎組件，它能夠根據瀏覽器窗口寬度，自動調整導航條的顯示狀態，在移動設備上折疊（并且可開可關），在視口（viewport）寬度增加時逐漸變為水平展開模式。 **默認樣式的導航條** Bootstrap的導航條包含兩部分內容：一部分用來放置圖標按鈕，由`.navbar-header`的容器定義；另一部分用來放置導航組件，由`.nav-collapse.collapse`的容器定義。 .navbar-header 容器中通常包含站點名稱和圖標按鈕，站點名稱總是可見的，而圖標按鈕卻只在小屏幕下可見。站點名稱是一個 .navbar-brand 的鏈接。圖標按鈕是一個.navbar-toggle類的按鈕，其中包含三個 class="icon-bar" 的 <span> 元素。定義按鈕時，還要為它提供 data-toggle 和 data-target?屬性。data-toggle 屬性告訴 JavaScript 這個按鈕要做什么，data-target?屬性指示點擊按鈕時要顯示的菜單元素。 **.nav-collapse.collapse** 容器中通常只包含導航組件，如導航鏈接、表單、按鈕、下拉菜單、文本、非導航鏈接等，導航組件只在大屏幕下水平展開，在小屏幕下要點擊圖標按鈕后才顯示出來。對于簡單的導航條，這里通常只包含導航鏈接。導航鏈接使用 .nav.navbar 的列表元素定義。 為了讓導航條具有響應式特性，通常使用一個 .navbar 的 \<nav\>元素來包裹它。當然，你也可以使用\<div\>元素，但務必要設置role="navigation"屬性，以確保讓使用輔助設備的用戶明確知道這是一個導航區域。另外，為了獲得適當的對齊和內邊距，可以把整個導航條放在 .container或 .container-fluid 的容器中。 ```html <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="navbar1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="##" class="navbar-brand">logo</a> </div> <div class="collapse navbar-collapse" id="navbar1"> <ul class="nav navbar-nav"> <li class="active"><a href="##">link<span class="sr-only"></span></a></li> <li><a herf="##">link</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Messages <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> </ul> </li> </ul> <form action="" class="navbar-form navbar-left"> <div class="form-group"> <input type="text" name="" id="" placeholder="search" class="form-control"/> </div> <button type="submit" class="btn btn-default">提交</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="##">link</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Messages <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> </ul> </li> </ul> </div> </div> </nav> ``` 隨著瀏覽器窗口寬度逐步增大，當大于 768px 時，導航菜單就會顯示出來，而按鈕圖標則自動隱藏。如圖所示：  Bootstrap中，響應式導航條的默認屏幕分界點是 768px。在視口寬度小于 768px 時，導航菜單將被隱藏起來，導航條將表現為三條短橫線組成的圖標按鈕，即所謂的漢堡按鈕。如圖所示：  點擊圖標按鈕，隱藏的導航菜單就會顯示出來。如圖所示：  ***** **品牌圖標** 將導航條內放置品牌標志( .navbar-brand )的地方替換為`<img>`元素即可展示自己的品牌圖標。由于`.navbar-brand`已經被設置了內補（padding）和高度（height），你需要根據實際需求添加一些 CSS樣式從而覆蓋默認設置。 ```html <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a href="##" class="navbar-brand"> <img src="../img/boot.png" alt="logo" width="20" height="20"/> </a> </div> </div> </nav> ```  ***** **表單** 將表單放置于`.navbar-form`之內可以呈現很好的垂直對齊，并在較窄的視口（viewport）中呈現折疊狀態。使用對齊方式選項來決定導航欄中的內容放置在哪里。 ```html <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a href="##" class="navbar-brand"> <img src="../img/boot.png" alt="logo" width="20" height="20"/> </a> </div> <form action="" class="navbar-form navbar-left"> <div class="form-group"> <input type="text" name="" id="" placeholder="search" class="form-control"/> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div> </nav> ```  ***** **按鈕** 對于不包含在`<form>`中的`<button>`元素，加上`.navbar-btn`后，可以讓它在導航條里垂直居中。 ```html <button type="button" class="btn btn-default navbar-btn">Sign in</button> ```  就像標準的[按鈕類](https://v3.bootcss.com/css/#buttons)一樣，`.navbar-btn`可以被用在`<a>`和`<input>`元素上。然而，在`.navbar-nav`內，`.navbar-btn`和標準的按鈕類都不應該被用在`<a>`元素上。 ***** **文本** 把文本包裹在`.navbar-text`中時，為了有正確的行距和顏色，通常使用`<p>`標簽。 ```html <p class="navbar-text">把文本包裹在 .navbar-text中時，為了有正確的行距和顏色，通常使用 p標簽。</p> ```  ***** **非導航的鏈接** 如果你希望在標準的導航組件之外添加標準鏈接，那么，使用`.navbar-link`類可以讓鏈接有正確的默認顏色和反色設置。 ```html <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">非導航的鏈接</a></p> ```  ***** **組件排列** 通過添加`.navbar-left`和`.navbar-right`工具類讓導航鏈接、表單、按鈕或文本對齊。兩個類都會通過 CSS 設置特定方向的浮動樣式，就是對導航條中的元素進行左右浮動。 注意：向右側對齊多個組件。導航條目前不支持多個`.navbar-right`類。為了讓內容之間有合適的空隙，給最后一個`.navbar-right`元素使用負邊距（margin）。如果有多個元素使用這個類，它們的邊距（margin）將不能按照你的預期正常展現。 ***** **固定導航條** **1.** 導航條固定在頂部 添加`.navbar-fixed-top`類可以讓導航條固定在頂部，還可包含一個`.container`或`.container-fluid`容器，從而讓導航條居中，并在兩側添加內補（padding）。  **2.** 導航條固定在底部 添加`.navbar-fixed-bottom`類可以讓導航條固定在底部，并且還可以包含一個`.container`或`.container-fluid`容器，從而讓導航條居中，并在兩側添加內補（padding）。  以上兩種固定方式的導航條會遮住頁面上的其它內容，除非你給`<body>`元素底部設置了`padding`。用你自己的值，或用下面給出的代碼都可以。提示：導航條的默認高度是 50px。 ***** **導航條靜止在頂部** 通過添加`.navbar-static-top`類即可創建一個與頁面等寬度的導航條，它會隨著頁面向下滾動而消失。還可以包含一個`.container`或`.container-fluid`容器，用于將導航條居中對齊并在兩側添加內補（padding）。 ***** **反色的導航條** 通過添加`.navbar-inverse`類可以改變導航條的外觀。 ```html <nav class="navbar navbar-default navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a href="##" class="navbar-brand"> <img src="../img/boot.png" alt="logo" width="20" height="20"/> </a> </div> <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">非導航的鏈接</a></p> </div> </nav> ```