• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<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>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul class="list-group list-group-flush">
  <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>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-000-list" data-toggle="list" href="#list-000" role="tab" aria-controls="111">000</a>
      <a class="list-group-item list-group-item-action" id="list-111-list" data-toggle="list" href="#list-111" role="tab" aria-controls="111">111</a>
      <a class="list-group-item list-group-item-action" id="list-222-list" data-toggle="list" href="#list-222" role="tab" aria-controls="333">222</a>
      <a class="list-group-item list-group-item-action" id="list-333-list" data-toggle="list" href="#list-333" role="tab" aria-controls="444">333</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-000" role="tabpanel" aria-labelledby="list-000-list">000</div>
      <div class="tab-pane fade" id="list-111" role="tabpanel" aria-labelledby="list-111-list">111</div>
      <div class="tab-pane fade" id="list-222" role="tabpanel" aria-labelledby="list-222-list">222</div>
      <div class="tab-pane fade" id="list-333" role="tabpanel" aria-labelledby="list-333-list">333</div>
    </div>
  </div>
</div>

<!-- List group -->
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">显示AAA</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">显示BBB</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">显示CCC</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">显示DDD</a>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">AAA</div>
  <div class="tab-pane" id="profile" role="tabpanel">BBB</div>
  <div class="tab-pane" id="messages" role="tabpanel">CCC</div>
  <div class="tab-pane" id="settings" role="tabpanel">DDD</div>
</div>