Bootstrap 列表组
Basic List Groups
The most basic list group is an unordered list with list items
- First item
- Second item
- Third item
To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item
示例
<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 新
- 5 删除
- 3 警告
要创建徽章，请在列表项内创建一个带有 .badge 类的 <span> 元素
示例
<ul class="list-group">
<li class="list-group-item">新 <span class="badge">12</span></li>
<li class="list-group-item">删除 <span class="badge">5</span></li>
<li class="list-group-item">警告 <span class="badge">3</span></li>
</ul>
自己动手试一试 »
List Group With Linked Items
列表组中的项目也可以是超链接。这将在鼠标悬停时添加一个灰色背景色
要创建带有链接项的列表组，请使用 <div> 而不是 <ul>，并使用 <a> 而不是 <li>
示例
<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 State
Use the .active class to highlight the current item
示例
<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>
自己动手试一试 »
Disabled Item
以下列表组包含一个禁用项
要禁用一个项目，请添加 .disabled 类
示例
<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>
自己动手试一试 »
Contextual Classes
可以使用上下文类来为列表项着色
- First item
- Second item
- Third item
- Fourth item
用于为列表项着色的类是： .list-group-item-success、list-group-item-info、list-group-item-warning 和 .list-group-item-danger
示例
<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。
Bootstrap 提供了 .list-group-item-heading 和 .list-group-item-text 类，它们可以按如下方式使用
示例
<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>
自己动手试一试 »
