Bootstrap 列表组

列表组（List Group）把多条内容排成一组带边框的整齐列表，常见于"热门文章、待办事项、分类目录"。它比普通 <ul> 更精致，支持徽章计数、整行链接跳转、按钮点击以及情景色警示等扩展用法，是内容型页面的高频组件。

基本列表组

<ul class="list-group">
  <li class="list-group-item">第一章 安装环境</li>
  <li class="list-group-item">第二章 栅格系统</li>
  <li class="list-group-item">第三章 排版样式</li>
</ul>

效果：三项内容被浅色边框围成整体，每项之间有细分割线，首尾带圆角，视觉整齐划一。

带徽章的列表组

列表项内放入 .badge，徽章会自动靠右显示：

<ul class="list-group">
  <li class="list-group-item">收件箱 <span class="badge">12</span></li>
  <li class="list-group-item">垃圾邮件 <span class="badge">3</span></li>
</ul>

效果：文字在左、数字徽章在右，适合做带"未读数"的菜单或任务清单。

链接与按钮型列表组

把 .list-group-item 用在 <a> 或 <button> 上，整行即可点击且悬停高亮：

<div class="list-group">
  <a href="#" class="list-group-item active">首页</a>
  <a href="#" class="list-group-item">产品中心</a>
  <a href="#" class="list-group-item disabled">关于我们（建设中）</a>
</div>

效果：第一行蓝底白字表示当前所在页，最后一行灰字不可点击，其余行鼠标移上时背景变灰，整行都是热区。

情景颜色与自定义内容

追加 list-group-item-success/info/warning/danger 可整行着色；列表项内部还能放入任意 HTML，组合成富内容条目：

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-warning">磁盘使用率已超过 90%</a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">今晚 20:00 直播</h4>
    <p class="list-group-item-text">点击进入直播间，不见不散。</p>
  </a>
</div>

效果：第一条整行呈黄色警示；第二条含一行加粗小标题与一行说明文字，list-group-item-heading 与 list-group-item-text 负责控制两行的字号与颜色。

小结：.list-group 是比普通列表更完整的导航与内容组件，搭配 .badge、链接元素或情景色类即可覆盖菜单、计数、警示等常见需求，值得作为默认的"条目列表"方案。