目录： 1. 列表组
2. 面板
1.列表组
1.1 总结
1.2 示例效果截图
1.3 示例代码
1
<!DOCTYPE html> 2
<html> 3
<head lang="en"> 4
<meta charset="UTF-8"> 5
<title>组件</title> 6
<!--引入bootstrap样式文件--> 7
<link href="css/bootstrap.min.css" rel="stylesheet"> 8
<!--引入jq（必须在bootstrap.min.js文件之前）--> 9
<script type="application/javascript" src="js/jquery-3.2.0.js"></script> 10
<!--引入bootstrap js--> 11
<script type="application/javascript" src="js/bootstrap.min.js"></script> 12
13
</head> 14
<body style="margin: 60px"> 15
16
<div class="panel panel-warning"> 17
<div class="panel-heading"> 18
基本列表组 19
</div> 20
<div class="panel-body"> 21
<ul class="list-group"> 22
<li class="list-group-item"> 23
网络让人足不出户就可以感受更远更大的世界，但网络没想到的是，有些人还真不出门了。 24
</li> 25
<li class="list-group-item"> 26
20年后，当我们这辈生出来的熊孩子绞尽脑汁也想不出一个可用的用户名时，他们就再也调皮不起来了。 27
</li> 28
<li class="list-group-item"> 29
人会陷入负螺旋，比如暴饮暴食，生活无规律，绝望；但同样，人也可以陷入正螺旋，试着休整后保持环境整洁、勤于运动、工 30
作上心、注意形象，慢慢地会有很多人称赞、喜欢你，你也会越享受变好的感觉，从而一切更可控、更有动力，甚至毫不费力。不说人脉，自我才是最值得经营的。 31
</li> 32
</ul> 33
</div> 34
</div> 35
36
<div class="panel panel-info"> 37
<div class="panel-heading"> 38
列表组添加徽章 39
</div> 40
<div class="panel-body"> 41
<ul class="list-group"> 42
<li class="list-group-item"> 43
<span class="badge">10000</span> 44
你媳妇儿的消息 45
</li> 46
<li class="list-group-item"> 47
你老妈子的消息 48
<span class="badge">99</span> 49
</li> 50
<li class="list-group-item"> 51
你老情人的消息 52
<span class="badge">99999999999</span> 53
</li> 54
</ul> 55
</div> 56
</div> 57
58
<div class="panel panel-danger"> 59
<div class="panel-heading"> 60
链接列表组 61
</div> 62
<div class="panel-body"> 63
<div class="list-group"> 64
<a class="list-group-item" href="#">www.baidu.com</a> 65
<a class="list-group-item active" href="#">www.google.com</a> 66
<a class="list-group-item" href="#">www.36kr.com</a> 67
</div> 68
</div> 69
</div> 70
71
<div class="panel panel-primary"> 72
<div class="panel-heading"> 73
按钮列表组（注意不能用.btn类） 74
</div> 75
<div class="panel-body"> 76
<div class="list-group"> 77
<button type="button" class="list-group-item">btn1</button> 78
<button type="button" class="list-group-item">btn1</button> 79
</div> 80
</div> 81
</div> 82
83
<div class="panel panel-success"> 84
<div class="panel-heading"> 85
列表组条目禁用 86
</div> 87
<div class="panel-body"> 88
<div class="list-group"> 89
<a class="list-group-item disabled" href="#">禁用</a> 90
</div> 91
</div> 92
</div> 93
94
<div class="panel panel-warning"> 95
<div class="panel-heading"> 96
情境列表组 97
</div> 98
<div class="panel-body"> 99
<ul class="list-group"> 100
<li class="list-group-item list-group-item-danger"> 101
借了同学的公交卡，不小心落在了校门口的小食店里，出门去拿，走到半路下雨了困在半路，雨小了冒雨走，鞋子湿了，在回来 102
路上手又一滑，公交卡掉进了下水道…FML 103
</li> 104
<li class="list-group-item list-group-item-info"> 105
一树一影几孤舟 一湾皱水披星霜 三两稚儿笑我愚 个中风霜我唯知 忽闻胡笳乱晚寒 快马无马欲加鞭 遁至星海化恶鬼 俗尘光色我清静 106
</li> 107
<li class="list-group-item list-group-item-success"> 108
自从我用了智能移动电话之后，我的智能、移动和电话都在减少。 109
</li> 110
<li class="list-group-item list-group-item-warning"> 111
感觉那种 情深不移 生死相随的爱情 只存在小说里，反正我是没见到也没听到过是要是见过 告诉我 好期待 112
</li> 113
</ul> 114
</div> 115
</div> 116
117
<div class="panel panel-success"> 118
<div class="panel-heading"> 119
自定义列表组 120
</div> 121
<div class="panel-body"> 122
<div class="list-group"> 123
<a class="list-group-item" href="#"> 124
<h3 class="list-group-item-heading">哪有什么职场瓶颈？只是你没做这3步而已</h3> 125
<p class="list-group-item-text">比起跳槽，更有效的升职方法是......</p> 126
</a> 127
128
<a class="list-group-item active" href="#"> 129
<h3 class="list-group-item-heading">苹果秋季发布会定档9月12日，你想知道的一切“剧透”都在这里了</h3> 130
<p class="list-group-item-text">今天苹果官方终于宣布，于9月12日在Apple Park举行秋季发布会，随着新机iPhone 131
8发布的临近，相关的“剧透”也越来越密集，果粉们一定很好奇，新一代iPhone颜值到底怎样？科技到底有多“黑”？你想知 132
道的一切“剧透”都在这里了！</p> 133
</a> 134
<a class="list-group-item" href="#"> 135
<h3 class="list-group-item-heading">Uber离职潮暂停：新招募火狐浏览器创始人负责产品</h3> 136
<p class="list-group-item-text">在科罗沙执掌大权后，Uber的人才离职潮是否能够宣告终止，是否能够招募到一批优秀 137
人才加盟这家全世界最值钱的非上市公司，这将值得关注。</p> 138
</a> 139
</div> 140
</div> 141
</div> 142
</body> 143
</html> 2. 面板 其实前面的代码示例中一直在使面板，在面板中我们可以嵌入各种，前面用到的我们就不进行学习了，主要是使用一下面板的注脚，下面是效果截图。
2.1 带注脚面板效果图
2.2 示例代码
1
<!DOCTYPE html> 2
<html> 3
<head lang="en"> 4
<meta charset="UTF-8"> 5
<title>组件</title> 6
<!--引入bootstrap样式文件--> 7
<link href="css/bootstrap.min.css" rel="stylesheet"> 8
<!--引入jq（必须在bootstrap.min.js文件之前）--> 9
<script type="application/javascript" src="js/jquery-3.2.0.js"></script> 10
<!--引入bootstrap js--> 11
<script type="application/javascript" src="js/bootstrap.min.js"></script> 12
13
</head> 14
<body style="margin: 60px"> 15
16
<div class="panel panel-success"> 17
<div class="panel-heading"> 18
panel-heading 19
</div> 20
<div class="panel-body"> 21
panel-body 22
</div> 23
<div class="panel-footer"> 24
panel-footer 25
</div> 26
</div> 27
</body> 28
</html>