:::

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

:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1967

計數器

今天: 1528152815281528
昨天: 1416141614161416
總計: 7340175734017573401757340175734017573401757340175