<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap</title>
<style type="text/css">
div.col-xs-3{
text-align: center;
}
</style>
</head>
<body>
<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div style="width:800px;margin:20px">
<ul class="list-group">
<li class="list-group-item">html<span class="badge">3</span></li>
<li class="list-group-item"><span class="badge">4</span>css</li>
<li class="list-group-item"><span class="badge">5</span>js</li>
<li class="list-group-item">ajax</li>
<li class="list-group-item">json</li>
</ul>
<div class="list-group"><!--链接-->
<a href="#" class="list-group-item active">html</a>
<a href="#" class="list-group-item">css</a>
<a href="#" class="list-group-item">js</a>
<a href="#" class="list-group-item">ajax</a>
<a href="#" class="list-group-item">json</a>
</div>
<div class="list-group">
<button class="list-group-item active">html</button>
<button class="list-group-item list-group-item-info">css</button>
<button class="list-group-item list-group-item-warning">js</button>
<button class="list-group-item list-group-item-danger">ajax</button>
<button class="list-group-item">json</button>
</div>
</div>
</body>
</html>
bootstrap列表组
最新推荐文章于 2023-10-20 14:48:59 发布