:::

3-2-2-2 側邊欄的列表

一、使用BootStrap的列表功能

  1. 側邊欄的列表也是典型的列表應用
  2. 列表可以用<li>清單及<a>連結兩種模式,我們用連結模式比較適當
  3. 可參考:https://bootstrap5.hexschool.com/docs/5.0/components/list-group/#links-and-buttons
  4. 可先修改其範例語法(將文字改為年度而已):
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        2021
      </a>
      <a href="#" class="list-group-item list-group-item-action">2020</a>
      <a href="#" class="list-group-item list-group-item-action">2019</a>
      <a href="#" class="list-group-item list-group-item-action">2018</a>
      <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">2017</a>
    </div>
    1. 每個項目基本的組成其實只有 .list-group-item 就行
    2. .list-group-item-action 是為了讓滑鼠移過去時,選項會有變色效果
    3. .active 表示目前顯示的選項
    4. .disbaled 表示無法點擊的選項

     

  5. 看起來像這樣:

二、在列表加上badge徽章

  1. 亦可加上badge標籤,可參考:https://bootstrap5.hexschool.com/docs/5.0/components/list-group/#with-badges
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active" aria-current="true">
        2021<span class="badge bg-success rounded-pill">2</span>  
      </a>
      <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
        2020<span class="badge bg-success rounded-pill">485</span>
      </a>
      <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
        2019<span class="badge bg-success rounded-pill">709</span>
      </a>
      <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
        2018<span class="badge bg-success rounded-pill">610</span>
      </a>
      <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center disabled" tabindex="-1" aria-disabled="true">
        2017<span class="badge bg-success rounded-pill">636</span>
      </a>
    </div>
    1. 徽章的基本用法可參考:https://bootstrap5.hexschool.com/docs/5.0/components/badge/
    2. 在選項中加入 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
         
  2. 看起來像這樣:

 


:::

書籍目錄

展開 | 闔起

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

計數器

今天: 4087408740874087
昨天: 5069506950695069
總計: 5134535513453551345355134535513453551345355134535