Bootstrap NavBar基本範例詳解 ```htmlembedded= <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <!-- meta name="viewport"，MDN建議一定要設定"viewport"，這是對於行動裝置的畫面渲染優化! 可以參考下面MDN網址--> <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap包括CSS檔和JS檔。將CSS檔放在<link>標籤中，將JS檔放在<script>標籤中 --> <!-- 有套用Bootstrap下拉選單的地方，像是NavBar，一定要載入JS檔，因為JS套件包括用於 定位 [下拉清單]、[彈出視窗]和 [工具提示的 Popper]位置 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <title>Bootstrap Example</title> </head> <body class="p-3 m-0 border-0 bd-example"> <!-- Example Code --> <!-- navbar-expand-md 設定寬度縮小到多窄的時候，出現漢堡選單 --> <nav class="navbar navbar-expand-md bg-light"> <!-- container容器是Bootstrap基本建構區塊，container會限制最大寬度斷點(max-width)，也讓左右與螢幕有空白間距，但是container-fluid則不論何時都佔滿整個螢幕水平寬度(width:100%) --> <!-- 下面網址有官方動態範例 --> <!-- https://bootstrap5.hexschool.com/docs/5.0/examples/grid/#containers --> <div class="container-fluid"> <!-- navbar-brand讓公司名稱，一直維持顯示在bar上面，不會放到摺疊內容中 --> <a class="navbar-brand" href="#">導覽列</a> <!-- 以下<button>...</button> 與 <div class="navbar-collapse collapse"...></div> --> <!-- 這一段主要是摺疊控制，從一般文字用<a>摺疊或用<button>摺疊的設定，到一顆按鈕的一對一與一對多處(用id對應)內容折疊、摺疊預設是關閉還是開啟......等等細部控制 --> <!-- 詳細說明可以參考官方的[元件]>[摺疊Collapse]:https://bootstrap5.hexschool.com/docs/5.0/components/collapse/ --> <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切換導航"> <!-- 叫出很醜的漢堡選單圖示，就是下面這一行 --> <span class="navbar-toggler-icon"></span> </button> <!-- class="collapse"設定摺疊時會隱藏內容 class="collapse show"設定摺疊時會顯示內容 --> <!-- id="navbarSupportedContent"這邊id設定，對應上面 <button data-bs-target="#navbarSupportedContent">，表示要摺疊控制的<div>區塊是哪一塊 --> <div class="navbar-collapse collapse show" id="navbarSupportedContent" style=""> <!-- navbar-nav讓清單項目變水平排列+移除清單原點，有flex效果 --> <!-- me-auto mb-2 mb-lg-0，m-開頭都是設定margin間距，p-開頭都是設定padding間距 --> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">家</a> </li> <li class="nav-item"> <a class="nav-link" href="#">關聯</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 落下 </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">行動</a></li> <li><a class="dropdown-item" href="#">另一個動作</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">這裡還有其他東西</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled">殘障人士</a> </li> </ul> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="搜尋" aria-label="搜尋"> <button class="btn btn-outline-success" type="submit">搜尋</button> </form> </div> </div> </nav> <!-- End Example Code --> </body> </html> ```