ㄧ.List group:基礎範例

<div class="component" id="demo">
  <ul class="list-group">
    <li class="list-group-item active">HTML</li>
    <li class="list-group-item">CSS</li>
    <li class="list-group-item">JavaScript</li>
  </ul>
</div>



.demo.component{
  padding: 50px;
}

重點：

1.父元素為.list-group
2.第二層元素為.list-group-item
3..active也可以改成.disabled

二.List group:連結和按鈕

<div class="component" id="demo">
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">HTML</a>
    <a href="#" class="list-group-item list-group-item-warning">CSS</a>
    <a href="#" class="list-group-item list-group-item-action 
                       d-flex justify-content-between align-items-center">
      JavaScript
      <span class="badge badge-primary badge-pill">12</span>
    </a>
  </div>
</div>



.demo.component{
  padding: 50px;
}

重點：

1.將ul以及li改成div與a
2.在a連結加.list-group-item-action，action可以改成樣式像warning
3.另外添加標籤
4.在a連結加.d-flex .justify-content-between .align-items-start

codepen
參考：bootstrap4