摘自《极客学院》
1、效果图:
2、html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.min.css">
<title>BootStrap列表组</title>
</head>
<body>
<div class="container">
<ul class="list-group">
<li class="list-group-item"><span class="badge">30</span>我是程序员</li>
<li class="list-group-item">我是程序员</li>
<li class="list-group-item"><span class="badge">20</span>我是程序员</li>
<li class="list-group-item"><span class="badge">450</span>我是程序员</li>
</ul>
<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>
<a href="#" class="list-group-item">我是程序员</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-danger">我是程序员</a>
<a href="#" class="list-group-item list-group-item-success">我是程序员</a>
<a href="#" class="list-group-item list-group-item-warning">我是程序员</a>
<a href="#" class="list-group-item list-group-item-info">我是程序员</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-danger">
<h4>我是一个程序员</h4>
<p>我知道</p>
</a>
<a href="#" class="list-group-item list-group-item-success">我是程序员</a>
<a href="#" class="list-group-item list-group-item-warning">我是程序员</a>
<a href="#" class="list-group-item list-group-item-info">我是程序员</a>
</div>
</div>
</body>
</html>