3-2-4 側邊欄的列表

1. 列表可以用<li>清單及<a>連結兩種模式，我們用連結模式比較適當
2. 可參考：https://bootstrap5.hexschool.com/docs/5.0/components/list-group/#links-and-buttons
3. 輸入 list，選擇 bs5-list-badge，按 Enter，產生列表語法：

   <ul class="list-group">
     <li class="list-group-item d-flex justify-content-between align-items-center active">
       Active list item
       <span class="badge bg-secondary badge-pill">pill1</span>
     </li>
     <li class="list-group-item d-flex justify-content-between align-items-center">
       List item
       <span class="badge bg-secondary badge-pill">pill2</span>
     </li>
     <li class="list-group-item d-flex justify-content-between align-items-center disabled">
       Disabled item
       <span class="badge bg-secondary badge-pill">pill3</span>
     </li>
   </ul>

    

4. 可先修改其範例語法（將文字改為年度而已，標籤內的數字隨便設）：

   <ul class="list-group">
     <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active">
       2023
       <span class="badge bg-success badge-pill">98</span>
     </li>
     <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
       2022
       <span class="badge bg-success badge-pill">3623</span>
     </li>
     <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
       2021
       <span class="badge bg-success badge-pill">3567</span>
     </li>
   </ul>

   1. 每個項目基本的組成其實只有 .list-group-item 就行
   2. 自行加上 .list-group-item-action 是為了讓滑鼠移過去時，選項會有變色效果
   3. .active 表示目前顯示的選項
   4. .disbaled 表示無法點擊的選項（若有請移除之）
   5. 列表含badge標籤的用法，可參考：https://bootstrap5.hexschool.com/docs/5.0/components/list-group/#with-badges
   6. 徽章的基本用法可參考：https://bootstrap5.hexschool.com/docs/5.0/components/badge/
   7. 在選項中加入 d-flex justify-content-between align-items-center
      1. .d-flex 是設定用flexbox方式來顯示，以下這兩種都需要用此模式才有作用：
      2. .justify-content-between 是為了做出分散對齊的作法，可參考：https://bootstrap5.hexschool.com/docs/5.0/utilities/flex/#justify-content
      3. .align-items-center 是為了垂直置中，可參考：https://bootstrap5.hexschool.com/docs/5.0/utilities/flex/#align-items