:::
3-2-3 設計文章版面
3-2-4 側邊欄的列表
- 列表可以用
<li>清單及<a>連結兩種模式，我們用連結模式比較適當 - 可參考：https://bootstrap5.hexschool.com/docs/5.0/components/list-group/#links-and-buttons
- 輸入
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> - 可先修改其範例語法（將文字改為年度而已，標籤內的數字隨便設）：
<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>- 每個項目基本的組成其實只有
.list-group-item就行 - 自行加上
.list-group-item-action是為了讓滑鼠移過去時，選項會有變色效果 .active表示目前顯示的選項.disbaled表示無法點擊的選項（若有請移除之）- 列表含badge標籤的用法，可參考：https://bootstrap5.hexschool.com/docs/5.0/components/list-group/#with-badges
- 徽章的基本用法可參考：https://bootstrap5.hexschool.com/docs/5.0/components/badge/
- 在選項中加入
d-flex justify-content-between align-items-center.d-flex是設定用flexbox方式來顯示，以下這兩種都需要用此模式才有作用：.justify-content-between是為了做出分散對齊的作法，可參考：https://bootstrap5.hexschool.com/docs/5.0/utilities/flex/#justify-content.align-items-center是為了垂直置中，可參考：https://bootstrap5.hexschool.com/docs/5.0/utilities/flex/#align-items
- 每個項目基本的組成其實只有
