列表组件用于以列表形式呈现复杂的和自定义的内容。
创建一个列表组,只需要完成以下两步:
(1)向元素 <ul> 添加 class .list-group;
(2)向 <li> 添加 class .list-group-item。
看下面的例子:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<title>列表组</title>
</head>
<body>
<div class="container">
<div class="col-lg-3">
<div class="page-header">
<h1>排行榜</h1>
</div>
<ul class="list-group">
<li class="list-group-item">
<a href="#">
kikay
<span class="badge navbar-right">255</span>
</a>
</li>
<li class="list-group-item">
<a href="#">
Tom
<span class="badge navbar-right">125</span>
</a>
</li>
<li class="list-group-item">
<a href="#">
小花
<span class="badge navbar-right">101</span>
</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<div class="page-header">
<h1>新闻列表</h1>
</div>
<div class="list-group">
<div class="list-group-item active">
<h3 class="list-group-item-heading">新闻标题1</h3>
<p class="list-group-item-text">新闻内容新闻内容新闻内容新闻内容</p>
</div>
<div class="list-group-item list-group-item-info">
<h3 class="list-group-item-heading">新闻标题2</h3>
<p class="list-group-item-text">新闻内容新闻内容新闻内容新闻内容</p>
</div>
<div class="list-group-item list-group-item-danger">
<h3 class="list-group-item-heading">新闻标题3</h3>
<p class="list-group-item-text">新闻内容新闻内容新闻内容新闻内容</p>
</div>
</div>
</div>
</div>
</body>
</html>
效果如下:
最后说明下,上面的例子的“排行榜”中,向列表项添加徽章组件。只需要在<li>
元素中添加<span class="badge">
即可。