您的位置：首页 > Web前端 > BootStrap

BootStrap列表组

2015-08-07 01:06 501 查看

摘自《极客学院》

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航