3-2-1 設計導覽列

1. BootStrap5 的導覽列：https://getbootstrap.com/docs/5.0/components/navbar
2. 輸入 nav，選擇 bs5-navbar-default 按 Enter，快速產生導覽列語法

   <nav class="navbar navbar-expand-sm navbar-light bg-light">
       <div class="container">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavId" aria-controls="collapsibleNavId"
         aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="collapsibleNavId">
         <ul class="navbar-nav me-auto mt-2 mt-lg-0">
           <li class="nav-item">
             <a class="nav-link active" href="#" aria-current="page">Home <span class="visually-hidden">(current)</span></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="dropdownId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
             <div class="dropdown-menu" aria-labelledby="dropdownId">
               <a class="dropdown-item" href="#">Action 1</a>
               <a class="dropdown-item" href="#">Action 2</a>
             </div>
           </li>
         </ul>
         <form class="d-flex my-2 my-lg-0">
           <input class="form-control me-sm-2" type="text" placeholder="Search">
           <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
         </form>
       </div>
     </div>
   </nav>

3. 調整在平板以上的螢幕下，導覽列才會完整出現（手機就出現導覽列小按鈕即可）

   <nav class="navbar navbar-expand-md navbar-light bg-light">

   • .navbar-expand-md：展開選項，其中 md 是斷點（當螢幕寬度符合斷點大小時，才會執行指定之樣式）
     • sm >= 576px（手機）
     • md >= 768px（平板）
     • lg >= 992px（桌機）
     • xl >= 1200px（高解析度螢幕）
4. 調整底色為藍色，文字為白色

   <nav class="navbar navbar-expand-md navbar-dark bg-info">

   • .navbar-dark：設定導覽列為深色背景（此時文字會是白色），相反設定為 .navbar-light（此時文字會是深色）
   • .bg-info：設定背景色，顏色設定有這幾種：https://bootstrap5.hexschool.com/docs/5.0/utilities/colors/#background-color
5. 調整導覽列離下方元件距離：

   <nav class="navbar navbar-expand-md navbar-dark bg-info mb-5">

   • m 代表 margin（邊界）
   • b 代表 bottom 的縮寫（下方）；t 代表上方 top 的縮寫
   • mb-5 就是下邊界加入5個距離單元
   • 詳情可參考：https://bootstrap5.hexschool.com/docs/5.0/utilities/spacing/
6. 調整導覽列為全螢幕

   <div class="container-fluid">

   • .container 是寬度有上限的容器（約1170px）
   • .container-fluid 是全螢幕容器
   • 一個畫面中，可以有好多個.container容器
   • 容器也可以巢狀使用（容器中還有容器）
7. 調整導覽列標題，導覽列可以用.navbar-brand定義文字Logo

   <a class="navbar-brand" href="/">XX國小學校日誌</a>

   • 我們在 href 屬性中加入點擊Logo時要連結的檔案，例如 index.php，或直接用相對路徑，指向到網頁根目錄 /
   • 用手機觀看時，Logo部份會作為主要呈現部份，選項則會被隱藏起來
8. 設定導覽列選項，選項放在 ul.navbar-nav 裡面：

   <ul class="navbar-nav me-auto mt-2 mt-lg-0">
     各個選項
   </ul>
   

   1. me-auto：選項外框的右側距離自動調整（會將右邊元件推到最右邊），可產生「分散對齊」的效果
   2. mt-2：選項距離上方兩個距離單位
   3. mt-lg-0：選項外框當螢幕大於 lg 斷點時，上方無距離（也就是用桌機看時，選項會比較垂直置中一點，上方不會空太大）
      1. e 代表右邊，end 的縮寫（左邊即 s，start 的縮寫）
      2. 詳情可參考：https://bootstrap5.hexschool.com/docs/5.0/utilities/spacing/
9. 完成選項內容，請自訂幾個分類：

   <ul class="navbar-nav me-auto mt-2 mt-lg-0">
     <li class="nav-item">
       <a class="nav-link active" 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>
   </ul>

   • 若是要顯示目前所在頁面，.nav-link 後可加上 .active 
10. 調整搜尋框

    <form class="d-flex my-2 my-lg-0">
      <input class="form-control me-sm-2" type="text" placeholder="搜尋文章">
      <button class="btn btn-warning my-2 my-sm-0 text-nowrap" type="submit">搜尋</button>
    </form>

    • 這個搜尋框目前尚不完整，等系統做完再來改它，暫時修改 placeholder（佔位提示）屬性為中文即可
    • 調整搜尋按鈕顏色為 btn-warning，使之稍微明顯一點。
    • 此外，加上 . text-nowrap 讓中文字不會被換行
    • 其中 my-2 的 y 代表 Y 軸，也就是上下方之意；x 代表 X 軸，就是左右邊之意
    • .d-flex 等同於 display: flex; 的意思，flex可參考：https://wcc723.github.io/css/2017/07/21/css-flex/
    • d 工具可參考：https://bootstrap5.hexschool.com/docs/5.0/utilities/display/ 
11. 導覽列完語法：

    <nav class="navbar navbar-expand-md navbar-dark bg-info mb-5">
        <div class="container-fluid">
        <a class="navbar-brand" href="/">XX國小學校日誌</a>
        <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavId" aria-controls="collapsibleNavId"
          aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavId">
          <ul class="navbar-nav me-auto mt-2 mt-lg-0">
            <li class="nav-item">
              <a class="nav-link active" 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>
          </ul>
          <form class="d-flex my-2 my-lg-0">
            <input class="form-control me-sm-2" type="text" placeholder="搜尋文章">
            <button class="btn btn-warning my-2 my-sm-0 text-nowrap" type="submit">搜尋</button>
          </form>
        </div>
      </div>
    </nav>