列表组 以后凡是带sm、lg 那些 都是响应式的啊 主要你自己看提示..好多啊 讲不完的...
-学这个主要还是看他的官方API
最基本的列表组：
<ul class="list-group"> <li class="list-group-item active" >列表项1</li> <!--active活动项--> <li class="list-group-item" >列表项2</li> <li class="list-group-item disabled" >列表项3</li> <!--disabled 禁止项--> </ul>
链接和按钮
使用<a>s 或<button>s 创建具有悬停、禁用和活动状态的可操作列表组项目，方法是
添加.list-group-item-action //有悬停的效果而已... 还有吧a的默认样式全清除
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">百度一下？</a> <a href="#" class="list-group-item list-group-item-action">百度一下？</a> <a href="#" class="list-group-item list-group-item-action disabled ">百度一下？</a> <!--被禁止的a--> </div>
清除外边框：
添加.list-group-flush以移除一些边框和圆角以在父容器（例如卡片）中边对边呈现列表组项目。
好比如说 你在卡片内写 就会有两个边框 这时候你就可以清除掉自己的 即可。
<div class="list-group list-group-flush"> <!--list-group-flush： 清除外边框--> <a href="#" class="list-group-item list-group-item-action active ">百度一下？</a> <a href="#" class="list-group-item list-group-item-action">百度一下？</a> <a href="#" class="list-group-item list-group-item-action disabled ">百度一下？</a> </div>
水平的
添加.list-group-horizontal以在所有断点上将列表组项的布局从垂直更改为水平。
意思就是横着来---
专业提示：水平时想要等宽列表组项目吗？添加.flex-fill到每个列表组项目【加不加都无所谓 本来就是响应式的】
<ul class="list-group list-group-horizontal"> <!--横着来--> <li class="list-group-item list-group-item-action">百度一下？</li> <li class="list-group-item list-group-item-action">百度一下？</li> <li class="list-group-item list-group-item-action">百度一下？</li> </ul>
设置颜色
list-group-item-*
<!--在列表项中 用list-group-item-* 设置颜色--> <ul class="list-group"> <li class="list-group-item">A simple default list group item</li> <li class="list-group-item list-group-item-primary">A simple primary list group item</li> <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li> <li class="list-group-item list-group-item-success">A simple success list group item</li> <li class="list-group-item list-group-item-danger">A simple danger list group item</li> <li class="list-group-item list-group-item-warning">A simple warning list group item</li> <li class="list-group-item list-group-item-info">A simple info list group item</li> <li class="list-group-item list-group-item-light">A simple light list group item</li> <li class="list-group-item list-group-item-dark">A simple dark list group item</li> </ul>
带徽章
在某些实用程序的帮助下，将徽章添加到任何列表组项目以显示未读计数、活动等。【类似于未读 什么什么的】
<!--下面演示 列表项 + 胶囊徽章：--> <!--align-items-center : 这个很主要 他是设置 flexbox 子项的排列 不然你的胶囊会很胖 不响应式--> <ul class="list-group"> <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">Home <span class="badge badge-info badge-pill ">3</span> </li> <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">Content <span class="badge badge-info badge-pill ">5</span> </li> <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center ">End <span class="badge badge-info badge-pill ">0</span> </li> </ul>