0%

7.7.2 面板嵌套表格

发表于 更新于 分类于 ， ，

7.7.2 面板嵌套表格

如果想将表格添加到面板中,只要为表格添加.table样式即可,这样面板和表格看上去更像一个整体。表格既可放在面板的主体(.panel-body元素)内,也可直接放在面板中。

在面板主体中放置表格

下面是将表格放在面板主体(.panel-body元素)内的示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title> 面板嵌套表格 </title>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
	<div class="container">
		<!-- 面板 -->
		<div class="panel panel-primary">
			<!-- 面板头 -->
			<div class="panel-heading">
				<h1 class="panel-title">疯狂软件教育中心</h1>
			</div>
			<!-- 面板主体 -->
			<div class="panel-body">
				疯狂软件的系列教材
				<!-- 在面板主体中添加表格 -->
				<table class="table table-hover table-condensed table-bordered">
					<thead>
						<tr>
							<th>ID</th>
							<th>书名</th>
							<th>价格</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>疯狂前端开发讲义</td>
							<td>79</td>
						</tr>
						<tr>
							<td>2</td>
							<td>疯狂Android讲义</td>
							<td>108</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- 面板脚注 -->
			<div class="panel-footer">
				<address>天河区沣宏大厦3楼</address>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../jquery-3.1.1.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

直接在面板容器下放置表格

如果直接将表格放在面板内,而不是放在.panel-body元素内,那么面板标题会和表格连接起来,没有空隙。

例如如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title> 面板嵌套表格 </title>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
	<div class="container">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h1 class="panel-title">疯狂软件教育中心</h1>
			</div>
			<table class="table table-hover table-bordered">
				<thead>
					<tr>
						<th>ID</th>
						<th>书名</th>
						<th>价格</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>疯狂前端开发讲义</td>
						<td>79</td>
					</tr>
					<tr>
						<td>2</td>
						<td>疯狂Android讲义</td>
						<td>108</td>
					</tr>
				</tbody>
			</table>
			<div class="panel-footer">
				<address>天河区沣宏大厦3楼</address>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../jquery-3.1.1.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

该代码直接将<table>元素放在面板中,这样该表格将会和面板标题连接起来。

原文链接: 7.7.2 面板嵌套表格