列表組是靈活又強(qiáng)大的組件，不僅能用于顯示一組簡(jiǎn)單的元素，還能用于復(fù)雜的定制的內(nèi)容。

基本實(shí)例

最簡(jiǎn)單的列表組僅僅是一個(gè)帶有多個(gè)列表?xiàng)l目的無(wú)序列表，另外還需要設(shè)置適當(dāng)?shù)念?。我們提供了一些預(yù)定義的樣式，你可以根據(jù)自身的需求通過(guò) CSS 自己定制。

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

徽章

給列表組加入徽章組件，它會(huì)自動(dòng)被放在右邊。

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

鏈接

用 <a> 標(biāo)簽代替 <li> 標(biāo)簽可以組成一個(gè)全部是鏈接的列表組（還要注意的是，我們需要將 <ul> 標(biāo)簽替換為 <div> 標(biāo)簽）。沒(méi)必要給列表組中的每個(gè)元素都加一個(gè)父元素。

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

按鈕

列表組中的元素也可以直接就是按鈕（也同時(shí)意味著父元素必須是 <div> 而不能用 <ul> 了），并且無(wú)需為每個(gè)按鈕單獨(dú)包裹一個(gè)父元素。注意不要使用標(biāo)準(zhǔn)的 .btn 類！

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

被禁用的條目

為 .list-group-item 添加 .disabled 類可以讓單個(gè)條目顯示為灰色，表現(xiàn)出被禁用的效果。

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

情境類

為列表中的條目添加情境類，默認(rèn)樣式或鏈接列表都可以。還可以為列表中的條目設(shè)置 .active 狀態(tài)。

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

定制內(nèi)容

列表組中的每個(gè)元素都可以是任何 HTML 內(nèi)容，甚至是像下面的帶鏈接的列表組。

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>