Bootstrap4 導航欄

導航欄一般放在頁面的頂部。

我們可以使用 .navbar 類來創建一個標準的導航欄，後面緊跟: .navbar-expand-xl|lg|md|sm 類來創建回應式的導航欄 (大螢幕水準鋪開，小螢幕垂直堆疊)。

導航欄上的選項可以使用 <ul> 元素並添加 class="navbar-nav" 類。 然後在 <li> 元素上添加 .nav-item 類， <a> 元素上使用 .nav-link 類:

實例

<!-- 小螢幕上水平導航欄會切換為垂直的 --> <nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>

垂直導航欄

通過刪除 .navbar-expand-xl|lg|md|sm 類來創建垂直導航欄:

實例

<!-- 垂直導航欄 --> <nav class="navbar bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>

不同顏色導航欄

可以使用以下類來創建不同顏色導航欄：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-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="#">Active</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> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</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>

啟動和禁用狀態: 可以在 <a> 元素上添加 .active 類來高亮顯示選中的選項。 .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 類來設置圖片自適應導航欄。

實例

<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 上包裹導航內容（鏈接）, div 元素上的 id 匹配按鈕 data-target 的上指定的 id:

實例

<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>

導航欄使用下拉菜單

導航欄上可以設置下拉菜單：

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </nav>

導航欄的表單與按鈕

導航欄的表單 <form> 元素使用 class="form-inline" 類來排版輸入框與按鈕：

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-success" type="submit">Search</button> </form> </nav>

你也可以使用其他的輸入框類，如 .input-group-addon 類用於在輸入框前添加小標籤。

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </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="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> </ul> <!-- Navbar text--> <span class="navbar-text"> Navbar text </span> </nav>

固定導航欄

導航欄可以固定在頭部或者底部。

我們使用 .fixed-top 類來實現導航欄的固定：

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>

.fixed-bottom 類用於設置導航欄固定在底部：

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>