36.Bootstrap(中文教程)元件：List group:列表群组

ㄧ.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