列表组 - 基础示例

<ul class="list-group">
  <li class="list-group-item">名砖家科男</li>
  <li class="list-group-item">我不是砖家</li>
  <li class="list-group-item">砖家一笑很倾城</li>
  <li class="list-group-item">风云砖家天下</li>
  <li class="list-group-item">砖家又见砖家</li>
</ul>

运行一下

列表组 - 添加徽章

<ul class="list-group">
  ...
  <li class="list-group-item">
      <span class="badge">36</span>我不是砖家
  </li>
  ...
</ul>

运行一下

列表组 - 超链接

<ul class="list-group">
  <a href="#" class="list-group-item">名砖家科男</a>
  <a href="#" class="list-group-item">我不是砖家</a>
  <a href="#" class="list-group-item">砖家一笑很倾城</a>
  <a href="#" class="list-group-item">风云砖家天下</a>
  <a href="#" class="list-group-item">砖家又见砖家</a>
</ul>

运行一下

列表组 - 按钮

<ul class="list-group">
  <button type="button" class="list-group-item">名砖家科男</button>
  <button type="button" class="list-group-item">我不是砖家</button>
  <button type="button" class="list-group-item">砖家一笑很倾城</button>
  <button type="button" class="list-group-item">风云砖家天下</button>
  <button type="button" class="list-group-item">砖家又见砖家</button>
</ul>

运行一下

列表组 - 使用辅助类进行修饰

<ul class="list-group">
  <li class="list-group-item disabled">名砖家科男</li>
  <li class="list-group-item active">我不是砖家</li>
  <li class="list-group-item">砖家勿扰</li>
  <li class="list-group-item list-group-item-success">砖家一笑很倾城</li>
  <li class="list-group-item list-group-item-info">风云砖家天下</li>
  <li class="list-group-item list-group-item-warning">砖家又见砖家</li>
  <li class="list-group-item list-group-item-danger">金陵十三砖家</li>
</ul>

运行一下

列表组 - 自定义内容

<div class="list-group">
  ...
  <button type="button" class="list-group-item">
    <h4 class="list-group-item-heading">小标题</h4>
    <p class="list-group-item-text">描述性内容...</p>
  </button>
  ...
</div>

运行一下