文章前提

List group

List group

CH7 67
課程練習下載
Bootstrap 路徑 : Components / List group

| list group 基本架構 |

  • 效果呈現
    • .list-group-item 加入 .active 執行中,會呈現藍底白字 ; .list-group-item 加入 .disabled ,會呈現灰色字
    • .list-group-item .list-group-item-action 滑鼠滑入呈現灰底白字 。不適用 ul li 結構。
    • .list-group-item .list-group-item-目標 ,把目標換成 Bootstrap 主題色,可替 list 背景換色。這邊 Bootstrap 會把此背景色顏色調淡
  • ul 和 li 結構
    • 滑鼠滑入是不會有任何效果的
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
  • a 連結 與 button 結構 ( Links and buttons )
    • .list-group-item .list-group.item-action ,滑鼠滑入會呈現灰底白字。建議加上此 Class
<!--<a>-->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
</div>

<!--button-->
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active"> Cras justo odio  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
</div>

| Custom content |

Bootstrap-Listgroup_Custom content

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

| JavaScript behavior 分頁效果 | 範例

  • 點選左方選單,右方頁面會出現選單內容
  • 先以 grid ( .row .col- )分出版面大小 → 選單部分使用 .list-group 於外層包覆 ( 選單們使用 .list-group-item .list-group-item-action ) → 內文部分以 .tab-content 於外層包覆 ( 內們使用 .tab-pane .fade ) 。 .fade 有加入 transition 效果
    • row
      • .col-4
        • .list-group
          • a.list-group-item.list-group-item-action ( href 的 id須和 內容id 一致 )
      • .col-8
        • .tab-content
          • .tab-pane.fade
  • 使用到 Bootstrap JavaScript 效果,所以須於按鈕處加入 data-toggle="list" 啟用
  • a 選單 href 的 id 須和內容 id 一致 。href 內記得加 #

Bootstrap-Listgroup_分頁效果

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

| flush |

  • 使 list 外面邊框消失
  • .list-group .list-group-flush

Bootstrap-Listgroup_flush

<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

資料來源

最後修改日期: 2 4 月, 2020

作者