🐥 新手開發日記
本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主，如果發現內容較為簡單，(沒錯！你是對的xD！)還請多多包涵。

上一篇我們運用了 Bootstrap 5 的網格系統（Grid System），讓畫面在不同裝置尺寸下（以 768px 為分界點）能呈現響應式的佈局。

接下來，我們要先來搭建左側的選單結構，讓使用者未來可以透過點擊清單按鈕，切換對應的頁面內容。

1. 認識 List Group 元件

我們先從左側選單開始著手。這裡使用了 Bootstrap 5 Components 中的 List Group（列表群組）。

Bootstrap 的 List Group 提供相當豐富且彈性的樣式變化：

• 基礎與連結/按鈕清單：支援標準 <ul> 清單，也可以用 <a> 連結與 <button>按鈕形式。

• 帶有編號與標籤：在 <ul> 加上 .list-group-numbered 可自動加上順序編號，亦可結合 .badge 展示狀態徽章。

• 核取方塊 (Checkbox/Radio)：可在清單內內嵌選取方塊。

• 無邊框無圓角：若不想要預設的外框與圓角，只要在 <ul> 加上 .list-group-flush 即可輕鬆移除邊框。

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

(參考資料：Bootstrap 5 components-list group)

2. 套用 List Group 按鈕清單

根據我們的設計稿需求，這裡選擇使用按鈕清單 (<button>) 形式，讓選單具備良好的點擊視覺回饋。

我們將 Bootstrap 官方範例程式碼複製並放入上一篇寫好的 <div class="col-md-3"> 欄位中，將按鈕名稱修改為我們專案對應的頁面：

<div class="col-md-3">
  <div class="list-group">
    <button
      type="button"
      class="list-group-item list-group-item-action active"
      aria-current="true"
    >
      計時器
    </button>
    <button
      type="button"
      class="list-group-item list-group-item-action"
    >
      任務列表
    </button>
    <button
      type="button"
      class="list-group-item list-group-item-action"
    >
      常見QA
    </button>
  </div>
</div>

關鍵 Class 說明：

• .list-group-item-action：讓按鈕具備 Hover 懸停效果與點擊態。

• .active：標示當前選中的選項（預設先停留在「計時器」頁面）。

3. 畫面呈現結果

將程式碼寫入後，左側的 List Group 選單呈現如下：