前言
導覽列是網頁的任意門，可以更快讓使用者找到想閱讀的資訊，所以對於一個多頁面的網站要有更縝密的分類與規劃，而 Bootstrap 的導覽列就是套用開發商製作好的東西，因為已經寫好 JavaScript 所以讓你在做互動的時候可以變得非常簡單。
（ 圖片來源 ）
官方網站的 navbar 頁面
在開始使用導覽列之前，需要了解它們是如何運作
- 導覽列需要使用 .navbar 包裝，並透過 .navbar-expand{-sm|-md|-lg|-xl} 給予響應式的折疊。
- 導覽列預設的內容寬度是浮動的，更改 containers 以不同的方式來限制水平寬度。
- 使用 spacing （ 可以參考 CSS保健室｜margin 、 CSS保健室｜padding ） 及 flex （ 可以參考 CSS保健室｜flex ） 通用類別來控制物件在導覽列的間隔及對齊。
- 導覽列預設是響應式的，但也可以輕易的修改這個選項。響應式行為會使用到折疊的 JavaScript 插件。
- 使用
<nav>元素確保親和性，或者如果使用更通用的元素，如<div>，在每一個導覽列中添加 role="navigation" 為輔助技術的使用者明確標識導覽區域。 - 透過設置 aria-current="page" 於當前頁面，或將 aria-current="true" 設置於群組中的當前項目來指示目前位置。
支援內容
.navbar-brand用於您的公司，產品或專案名稱，可在裡面打字或新增 logo 圖片檔。.navbar-nav提供高度完整和輕便的導航（ 包括對下拉清單的支持 ）。.navbar-toggler用於我們的折疊插件和其他 navigation toggling 行為。- Flex 與 spacing 通用類別，用於表單控制與行為。
.navbar-text用於垂直居中的文本字串。.collapse.navbar-collapse透過父層斷點來群組、隱藏導覽列內容。- 加入一個選填的屬性
.navbar-scroll來設置 max-height ，然後滾動展開內容。
基本導覽列
.navbar-expand-lg 就是自動在 lg 尺寸（ 992px ）中斷點處摺疊的響應式導覽列。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
桌機畫面
平板畫面
作用中項目
用 .active 表示當前頁面，可直接用於 .nav-link 或直屬的 .nav-item （ 並在 .nav-link 本身上添加 aria-current 屬性 ）。
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">關於我們</a>
</li>
禁用中項目
用 .disabled 表示當前頁面，可直接用於 .nav-link 或直屬的 .nav-item （ 並在 .nav-link 本身上添加 aria-disabled 和 tabindex 屬性 ）。
tabindex
開發網頁時，有時我們會需要去調整 tab 的順序，在 HTML 中，有一個叫做 tabindex 的屬性可以幫我們辦到這件事情，若值為 -1 不會遵守 tab 鍵的控制順序，但是可以透過 JavaScript focus() 方法取得焦點。
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">聯絡我們</a>
</li>
顏色
從 .navbar-light 選用淺色背景顏色，或者 .navbar-dark 用於深色背景顏色，然後使用 .bg-* 通用類別自訂。
<nav class="navbar navbar-expand-lg navbar-light bg-info">
...
</nav>
.bg-info 淺藍色背景就搭配 .navbar-light 。
定位
可以選擇固定到頂部、底部、或黏貼到頂部（ 會隨著頁面滾動，直到物件達到頂部，並停留在原處 ）。固定的導覽列使用 position：fixed ，所以可能需要自定義 CSS（ 例如 <body> 上的 padding-top ），以防止與其他元素重疊。
但要注意 .sticky-top 使用 position：sticky ，並沒有被所有瀏覽器支持。
固定到頂部（ Fixed top ）
固定到底部（ Fixed bottom ）
黏貼到頂部（ Sticky top ）
![[Day05] Functor](https://www.coderbridge.com/@yanglin5689446/3fd87b06aeda4e8a81b5dd8008a27f35?utm_source=coderbridge-io&utm_medium=blog_related_post_img&utm_campaign=wonderland_[Day05] Functor_@yanglin5689446_https://static.coderbridge.com/images/covers/default-post-cover-1.jpg)
