Bootstrap组件学习笔记（七）——列表组和面板
时间 2021-01-16
标签
bootstrap
面板
列表组
目录：
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>