4.16、Bootstrap V4自学之路-----组件---列表组
基本示例
最基本的列表组就是一个无序列表，带有几个列表项，以及适当的类。在这基础上可以使用下列选项，或者有需要的话可以是你自己的CSS。
.list-group 包含 .list-group-item。
<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>
标签
向任意一个列表组项添加标签，以显示未阅读的计数、活动，等等。
这个组合拳我喜欢。
<ul class="list-group"> <li class="list-group-item"> <span class="label label-default label-pill pull-xs-right">14</span> ul class="list-group" </li> <li class="list-group-item"> <span class="label label-default label-pill pull-xs-right">2</span> --| li class="list-group-item" </li> <li class="list-group-item"> <span class="label label-default label-pill pull-xs-right">1</span> --| --| span class="label label-default label-pill pull-right" </li> </ul>
PS ： 中文文档又出问题了。.pull-right无效果。已经更换为 .pull-xs-right。
带链接的项
使用锚标记而不是列表项标记来给列表组的项添加链接（这也意味着可以用一个父<div>代替<ul>）。不需要对每个元素提供单独的父元素。
<div class="list-group"> <a href="#" class="list-group-item"> 《div class="list-group"》</a> <a href="#" class="list-group-item active">--| 《a href="#" class="list-group-item active"》</a> <a href="#" class="list-group-item">--| 《a href="#" class="list-group-item"》</a> <a href="#" class="list-group-item">--| 《a href="#" class="list-group-item"》</a> </div>
PS：当鼠标hover时，有浮动效果。
按钮项
列表组项可以是按钮，而不是<li>项（这也意味着可以用一个父<div>代替<ul>）。不需要对每个元素提供单独的父元素。不要在这里使用标准的.btn类。
<div class="list-group"> <button type="button" class="list-group-item">《div class="list-group"》</button> <button type="button" class="list-group-item">--| 《button type=button class=list-group-item》</button> <button type="button" class="list-group-item">--| 《button type=button class=list-group-item》</button> <button type="button" class="list-group-item">--| 《button type=button class=list-group-item》</button> <button type="button" class="list-group-item">--| 《button type=button class=list-group-item》</button> </div>
PS：这里注意，.list-group列表组中的<button>标签，并没有使用class=btn等类。
禁用的项
给一个.list-group-item上添加.disabled类，可以让它显示灰色，呈现禁用状态。
<div class="list-group"> <a href="#" class="list-group-item">《div class="list-group"》</a> <a href="#" class="list-group-item disabled"> --| 《a href="#" class="list-group-item disabled"》 </a> <a href="#" class="list-group-item">--| 《a href="#" class="list-group-item"》</a> <a href="#" class="list-group-item">--| 《a href="#" class="list-group-item"》</a> <a href="#" class="list-group-item">--| 《a href="#" class="list-group-item"》</a> </div>
上下文类
使用上下文类以样式化列表项，呈默认或链接状态。同样包括.active状态。
<ul class="list-group"> <li class="list-group-item">《ul class="list-group"》</li> <li class="list-group-item list-group-item-success">《li class="list-group-item list-group-item-success"》</li> <li class="list-group-item list-group-item-info">--| 《li class="list-group-item list-group-item-info"》</li> <li class="list-group-item list-group-item-warning">--| 《li class="list-group-item list-group-item-warning""》</li> <li class="list-group-item list-group-item-danger">--| 《li class="list-group-item list-group-item-danger"》</li> </ul> <div class="list-group"> <a href="#" class="list-group-item">《div class="list-group"》</a> <a href="#" class="list-group-item list-group-item-success">--| 《a class="list-group-item list-group-item-success"》</a> <a href="#" class="list-group-item list-group-item-info">--| 《a class="list-group-item list-group-item-info"》</a> <a href="#" class="list-group-item list-group-item-warning">--| 《a class="list-group-item list-group-item-item-warning"》</a> <a href="#" class="list-group-item list-group-item-danger">--| 《a class="list-group-item list-group-item-danger"》</a> </div>
自定义内容
里面几乎可以添加任何HTML内容，甚至可以添加列表组，如下所示。
<div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">整个列表组</h4> <p class="list-group-item-text"> 《div class="list-group"》<br> --| 《a href="#" class="list-group-item active"》<br> --| --| 《h4 class="list-group-item-heading"》<br> --| --| 《p class="list-group-item-heading"》<br> --| 《a href="#" class="list-group-item"》<br> --| --| 《h4 class="list-group-item-heading"》<br> --| --| 《p class="list-group-item-heading"》<br> --| 《a href="#" class="list-group-item"》<br> --| --| 《h4 class="list-group-item-heading"》<br> --| --| 《p class="list-group-item-heading"》 </p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">每个子列表</h4> <p class="list-group-item-text"> 《a href="#" class="list-group-item》<br> --| 《h4 class="list-group-item-heading"》<br> --| 《p class="list-group-item-heading"》 </p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">每个子列表</h4> <p class="list-group-item-text"> 《a href="#" class="list-group-item》<br> --| 《h4 class="list-group-item-heading"》<br> --| 《p class="list-group-item-heading"》 </p> </a> </div