首页 Bootstrap5组件手册

列表

========================================
<ul>、<div>
基础类:
.list-group

组合类:         
.list-group-flush        无边框
.list-group-horizontal   水平列表

===========================================
<li>、<a>
基础类:
.list-group-item

组合类:
.active                   选中样式
.disabled                 禁用样式
.list-group-item-action   <a>标签,去除默认样式

组合类:(背景颜色,单选)
.list-group-item-success      
.list-group-item-secondary    
.list-group-item-info         
.list-group-item-warning      
.list-group-item-danger       
.list-group-item-primary      
.list-group-item-dark         
.list-group-item-light        

示例

基础样式:
<ul class="list-group">
  <li class="list-group-item">项1</li>
  <li class="list-group-item">项2</li>
  <li class="list-group-item">项3</li>
</ul>

链接列表样式:
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">项1</a>
  <a href="#" class="list-group-item list-group-item-action">项2</a>
  <a href="#" class="list-group-item list-group-item-action">项3</a>
</div>





水平列表样式:
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">项1</li>
  <li class="list-group-item">项2</li> 
  <li class="list-group-item">项3</li> 
</ul>






不同颜色的项:
<ul class="list-group">
  <li class="list-group-item list-group-item-success">项1</li>
  <li class="list-group-item list-group-item-secondary">项2</li>
  <li class="list-group-item list-group-item-info">项3</li>
</ul>