W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 列表组



列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。


基础列表组

最简单的列表组仅仅是一个带有多个列表条目的无序列表,另外还需要设置适当的类。我们提供了一些预定义的样式,你可以根据自身的需求通过 CSS 自己定制。

  • First item
  • Second item
  • Third item

Example

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>
尝试一下 »

徽章

给列表组加入徽章组件,它会自动被放在右边。

  • 12 New
  • 5 Deleted
  • 3 Warnings

创建徽章列表组只需要在 <li> 元素中添加 <span class="badge"> 即可。

Example

<ul class="list-group">
  <li class="list-group-item"><span class="badge">12</span> New</li>
  <li class="list-group-item"><span class="badge">5</span> Deleted</li>
  <li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul>
尝试一下 »

链接

<a> 标签代替 <li> 标签可以组成一个全部是链接的列表组(还要注意的是,我们需要将 <ul> 标签替换为 <div> 标签)。没必要给列表组中的每个元素都加一个父元素。

Example

<div class="list-group">
  <a href="#" class="list-group-item">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>
尝试一下 »

激活状态

使用 .active 可以加强当前条目的显示:

Example

<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>
尝试一下 »

被禁用的条目

.list-group-item 添加 .disabled 类可以让单个条目显示为灰色,表现出被禁用的效果。

Example

<div class="list-group">
  <a href="#" class="list-group-item disabled">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>
尝试一下 »

情境类

为列表中的条目添加情境类,默认样式或链接列表都可以。还可以为列表中的条目设置 .active 状态。

  • First item
  • Second item
  • Third item
  • Fourth item

这些类分别是: .list-group-item-successlist-group-item-info list-group-item-warning.list-group-item-danger

Example

<ul class="list-group">
  <li class="list-group-item list-group-item-success">First item</li>
  <li class="list-group-item list-group-item-info">Second item</li>
  <li class="list-group-item list-group-item-warning">Third item</li>
  <li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
尝试一下 »

定制内容

列表组中的每个元素都可以是任何 HTML 内容,甚至是像下面的带链接的列表组。

Example

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">First List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
</div>
尝试一下 »