Bootstrap 4 導航欄
導航欄
導航欄是放置在頁面頂部的導航標題
基本導航欄
使用 Bootstrap，導航欄可以根據螢幕尺寸進行擴充套件或摺疊。
標準導航欄使用 .navbar 類建立，後面跟著一個響應式摺疊類：.navbar-expand-xl|lg|md|sm（在超大、大、中或小螢幕上垂直堆疊導航欄）。
要在導航欄中新增連結，請使用帶有 class="navbar-nav" 的 <ul> 元素。然後新增帶有 .nav-item 類的 <li> 元素，後面跟著帶有 .nav-link 類的 <a> 元素
示例
<!-- 一個灰色水平導航欄，在小螢幕上會變成垂直 -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- 連結 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">連結 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">連結 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">連結 3</a>
</li>
</ul>
</nav>
自己動手試一試 »
垂直導航欄
移除 .navbar-expand-xl|lg|md|sm 類以建立垂直導航欄
示例
<!-- 一個垂直導航欄 -->
<nav class="navbar bg-light">
<!-- 連結 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">連結 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">連結 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">連結 3</a>
</li>
</ul>
</nav>
自己動手試一試 »
居中導航欄
新增 .justify-content-center 類以居中導航欄。
以下示例將在中、大和超大螢幕上居中導航欄。在小螢幕上，它將垂直顯示並左對齊（因為有 .navbar-expand-sm 類）
彩色導航欄
使用任何 .bg-color 類來更改導航欄的背景顏色（.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger、.bg-secondary、.bg-dark 和 .bg-light）
提示：使用 .navbar-dark 類為導航欄中的所有連結新增白色文字顏色，或使用 .navbar-light 類新增黑色文字顏色。
示例
<!-- 灰色，黑色文字 -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">啟用</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">連結</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">連結</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">停用</a>
</li>
</ul>
</nav>
<!-- 黑色，白色文字 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 藍色，白色文字 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
自己動手試一試 »
活動/停用狀態：將 .active 類新增到 <a> 元素以突出顯示當前連結，或使用 .disabled 類表示連結不可點選。
品牌/Logo
.navbar-brand 類用於突出顯示頁面品牌/Logo/專案名稱
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
...
</nav>
自己動手試一試 »
當在圖片上使用 .navbar-brand 類時，Bootstrap 4 將自動將圖片樣式設定為適合導航欄的垂直尺寸。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="Logo" style="width:40px;">
</a>
...
</nav>
自己動手試一試 »
摺疊導航欄
通常，尤其是在小螢幕上，您希望隱藏導航連結，並用一個按鈕替換它們，該按鈕應在點選時顯示它們。
要建立可摺疊導航欄，請使用帶有 class="navbar-toggler", data-toggle="collapse" 和 data-target="#thetarget" 的按鈕。然後將導航欄內容（連結等）包裝在一個帶有 class="collapse navbar-collapse" 的 div 元素中，後面跟著一個與按鈕 data-target 匹配的 id：“thetarget”。
示例
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
自己動手試一試 »
提示：您也可以移除 .navbar-expand-md 類以始終隱藏導航欄連結並顯示切換按鈕。
帶下拉選單的導航欄
導航欄也可以包含下拉選單
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- 連結 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">連結 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">連結 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
下拉菜單鏈接
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">連結 1</a>
<a class="dropdown-item" href="#">連結 2</a>
<a class="dropdown-item" href="#">連結 3</a>
</div>
</li>
</ul>
</nav>
自己動手試一試 »
導航欄表單和按鈕
新增一個帶有 class="form-inline" 的 <form> 元素，以便將輸入和按鈕並排分組
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="搜尋">
<button class="btn btn-success" type="submit">搜尋</button>
</form>
</nav>
自己動手試一試 »
您還可以使用其他輸入類，例如 .input-group-prepend 或 .input-group-append，將圖示或幫助文字附加到輸入欄位旁邊。您將在 Bootstrap 輸入章節中瞭解有關這些類的更多資訊。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="使用者名稱">
</div>
</form>
</nav>
自己動手試一試 »
導航欄文字
使用 .navbar-text 類來垂直對齊導航欄內的任何非連結元素（確保正確的內邊距和文字顏色）。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">連結 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">連結 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
導航欄文字
</span>
</nav>
自己動手試一試 »
固定導航欄
導航欄也可以固定在頁面頂部或底部。
固定的導航欄在固定位置（頂部或底部）可見，與頁面滾動無關。
.fixed-top 類使導航欄固定在頂部
使用 .fixed-bottom 類使導航欄停留在頁面底部
使用 .sticky-top 類使導航欄在您滾動過後固定/停留在頁面頂部。注意：此類在 IE11 及更早版本中不起作用（將被視為 position:relative）。
