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

Bootstrap组件之列表组

2015-08-03 11:24 615 查看

.list-group——指定ul/div元素为列表组组件；

.list-group-item——指定元素为列表组的列表项；

.list-group-item-success、.list-group-item-info、.list-group-item-warning、.list-group-item-danger——设置列表项的情境效果；

.active——设置列表项为激活状态；

.disabled——设置列表项为禁用状态；

.list-group-item-heading——用于设置列表项的标题；

.list-group-item-text——用于设置列表项的文本内容；

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>饭盒儿——发现身边不一样的世界</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>

</style>
</head>
<body>
<div class="container">
<h4>列表组示例</h4>
<ul class="list-group">
<li class="list-group-item list-group-item-success"><span class="badge">45</span>上海上港</li>
<li class="list-group-item list-group-item-info"><span class="badge">44</span>广州恒大</li>
<li class="list-group-item list-group-item-warning"><span class="badge">43</span>山东鲁能</li>
<li class="list-group-item list-group-item-danger"><span class="badge">40</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 active">
<h4 class="list-group-item-heading">上海上港</h4>
<p class="list-group-item-text">目前排名榜首，进亚冠的希望很大，但板凳深度不够，会不会酿造亚冠惨案！</p>
</a>
<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">
<h4 class="list-group-item-heading">山东鲁能</h4>
<p class="list-group-item-text">状态起伏不定，即时进了亚冠，仍让人看的惊心动魄，内战龙，外战虫，每次去亚冠也是一轮游。</p>
</a>
<a href="#" class="list-group-item disabled">
<h4 class="list-group-item-heading">北京国安</h4>
<p class="list-group-item-text">目前已经掉队，每次夺冠的嗓门喊得最大，但总是关键时刻掉链子，投入不够约束了与其它豪门争冠的机会。</p>
</a>
</div>

</div>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航