XOOPS輕鬆架 - 線上書籍

:::

PHP8入門
======

1. 列表可以用`<li>`清單及`<a>`連結兩種模式，我們用連結模式比較適當
2. 可參考：<https://bootstrap5.hexschool.com/docs/5.0/components/list-group/#links-and-buttons>
3. 輸入 `list`，選擇 `bs5-list-badge`，按 Enter，產生列表語法： 
 ```markup
 <ul class="list-group">
 <li class="list-group-item d-flex justify-content-between align-items-center active">
 Active list item
 pill1
 </li>
 <li class="list-group-item d-flex justify-content-between align-items-center">
 List item
 pill2
 </li>
 <li class="list-group-item d-flex justify-content-between align-items-center disabled">
 Disabled item
 pill3
 </li>
 </ul>
 ```
4. 可先修改其範例語法（將文字改為年度而已，標籤內的數字隨便設）： 
 ```markup
 <ul class="list-group">
 <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active">
 2023
 98
 </li>
 <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
 2022
 3623
 </li>
 <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
 2021
 3567
 </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>

:::