Bootstrap 列表组（List Groups）
默认列表组
最基本的列表组是带有列表项的无序列表:
- 第一项
- 第二项
- 第三项
To create a basic list group, use an <ul> element with class .list-group, and<li> elements with class .list-group-item:
实例
<!DOCTYPE html><html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>默认列表组</h2><ul class="list-group"><li class="list-group-item">第一项</li><li class="list-group-item">第二项</li><li class="list-group-item">第三项</li></ul></div></body></html>
徽章样式的列表组
您还可以向列表组添加徽章样式。徽章将自动放置在右侧:
- 12 新增
- 5 删除
- 3 警告
要添加徽章样式, 可以在列表项里面添加一个带有 .badge 样式的 <span> 元素:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>带徽章的列表组</h2><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></div></body></html>
带链接项的列表组
列表组中的项目也可以是超链接。并且在悬停时添加灰色背景色:
要创建包含链接项的列表组，请使用 <div> 代替 <ul> 和 <a> 代替 <li>:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>链接项列表组</h2><div class="list-group"><a href="#" class="list-group-item">第一项</a><a href="#" class="list-group-item">第二项</a><a href="#" class="list-group-item">第三项</a></div></div></body></html>
活动状态
使用 .active 类来高亮显示当前列表项:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>列表组中的活动项</h2><div class="list-group"><a href="#" class="list-group-item active">第一项</a><a href="#" class="list-group-item">第二项</a><a href="#" class="list-group-item">第三项</a></div></div></body></html>
禁用项
以下列表组中有一个已禁用的项:
要禁用项，请添加 .disabled 样式:
实例
<!DOCTYPE html><html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>带禁用项的列表</h2><div class="list-group"><a href="#" class="list-group-item disabled">第一项</a><a href="#" class="list-group-item">第二项</a><a href="#" class="list-group-item">第三项</a></div></div></body></html>
上下文类
上下文类可用于为列表项添加颜色:
- 第一项
- 第二项
- 第三项
- 第四项
为列表项添加颜色的类是: .list-group-item-success, list-group-item-info, list-group-item-warning, 和 .list-group-item-danger:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>使用上下文类的列表组</h2><ul class="list-group"><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><h2>带有上下文类的链接项</h2><p>将鼠标移到链接的项上以查看悬停效果:</p><div class="list-group"><a href="#" class="list-group-item list-group-item-success">第一项</a><a href="#" class="list-group-item list-group-item-info">第二项</a><a href="#" class="list-group-item list-group-item-warning">第三项</a><a href="#" class="list-group-item list-group-item-danger">第四项</a></div></div></body></html>
自定义内容
您几乎可以在列表组的项中添加任何 HTML。
Bootstrap 提供了 .list-group-item-heading 和 .list-group-item-text 样式，可以按如下方式:
实例
<!DOCTYPE html><html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>自定义内容的列表组</h2><div class="list-group"><a href="#" class="list-group-item active"><h4 class="list-group-item-heading">第一个列表组项标题</h4><p class="list-group-item-text">列表组项文本</p></a><a href="#" class="list-group-item"><h4 class="list-group-item-heading">第二个列表组项标题</h4><p class="list-group-item-text">列表组项文本</p></a><a href="#" class="list-group-item"><h4 class="list-group-item-heading">第三个列表组项标题</h4><p class="list-group-item-text">列表组项文本</p></a></div></div></body></html>