7.7 面板
面板就是一个矩形容器,它既可是一个只提供简单边框的盒子,也可是一个包含头和尾注的容器。
7.7.1 面板的基础结构
Bootstrap为面板提供了如下样式。
面板容器的样式
下面的样式设置在面板的最外层容器(div)中.
| 样式 |
描述 |
.panel |
所有面板都需要添加的基础样式。 |
.panel-default |
设置默认的面板样式。 |
.panel-primary |
设置首选项样式的面板。 |
.panel-success |
设置表示成功的面板样式。 |
.panel-info |
设置表示通用信息的面板样式。 |
.panel-warning |
设置表示警告的面板样式。 |
.panel-danger |
设置表示危险的面板样式。 |
面板内容的样式
下面的样式用于设置面板的内容。
| 样式 |
描述 |
.panel-body |
设置面板主体部分。 |
.panel-heading |
设置面板头,该面板头可作为面板标题的容器。 |
.panel-title |
设置面板的标题。面板标题要放在面板头中.面板标题一般通过为<h1>到<h6>的元素设置.panel-title 样式来实现,添加该样式后,<h1>到<h6>元素的字体大小将被.panel-heading的样式覆盖。为了给链接设置合适的颜色,务必将链接放到带有.panel-title 样式的标题标签内。 |
.panel-footer |
设置面板尾注。 |
程序示例 最简单的面板
最简单的面板只是在普通的.panel元素中放置一个.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
| <!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-default">
<div class="panel-body">
面板主体
</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-heading)、面板主体(.panel-body)和面板尾注(.panel-footer)。此外,本例还将为面板设置6种不同的样式。
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
| <!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="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">面板标题(.default)</h1>
</div>
<div class="panel-body">
面板主体
</div>
<div class="panel-footer">
<address>北京市xxxxx</address>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">面板标题(.primary)</h1>
</div>
<div class="panel-body">
面板主体
</div>
<div class="panel-footer">
<address>北京市xxxxx</address>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success">
<div class="panel-heading">
<h1 class="panel-title">面板标题(.success)</h1>
</div>
<div class="panel-body">
面板主体
</div>
<div class="panel-footer">
<address>北京市xxxxx</address>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-info">
<div class="panel-heading">
<h1 class="panel-title">面板标题(info)</h1>
</div>
<div class="panel-body">
面板主体
</div>
<div class="panel-footer">
<address>北京市xxxxx</address>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-warning">
<div class="panel-heading">
<h1 class="panel-title">面板标题(.warning)</h1>
</div>
<div class="panel-body">
面板主体
</div>
<div class="panel-footer">
<address>北京市xxxxx</address>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-danger">
<div class="panel-heading">
<h1 class="panel-title">面板标题(.danger)</h1>
</div>
<div class="panel-body">
面板主体
</div>
<div class="panel-footer">
<address>北京市xxxxx</address>
</div>
</div>
</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-heading、.panel-body和.panel-footer 这三种元素,这三种元素分别表示了面板头、面板主体和面板脚注。其中面板头将作为面板标题的容器。
- **不同
面板样式主要控制面板头的背景色和边框颜色**。
- 而面板的脚注部分则不受面板样式的影响,脚注部分总是灰色的背景。