http://v3.bootcss.com/components/#list-group
mark
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表组</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="list-group">
<li class="list-group-item"><span class="badge">10</span>我喜欢苹果</li>
<li class="list-group-item"><span class="badge">1</span>我喜欢梨子</li>
<li class="list-group-item"><span class="badge">7</span>我喜欢橘子</li>
<li class="list-group-item">我喜欢桃子</li>
</ul>
<!--可点击的-->
<div class="list-group">
<a href="#" class="list-group-item">我喜欢苹果</a>
<!--active选中的-->
<a href="#" class="list-group-item active">我喜欢苹果</a>
<a href="#" class="list-group-item">我喜欢苹果</a>
<!--禁用的-->
<a href="#" class="list-group-item disabled">我喜欢苹果</a>
</div>
<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>
<!--定制内容,在a标签里面写就行,按钮、图片……-->
<div class="list-group">
<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">
</a>
<a href="#" class="list-group-item">
</a>
<a href="#" class="list-group-item">
</a>
</div>
</div>
</body>
</html>