x
1
•<section>
2
<h2>Default</h2>
3
<p>
4
Panel is a style that is is implemented by inheriting the vertical group, just like the vertical menu.
5
6
<div class="panel">
7
<div class="head">
8
<i class="icon-left"></i> <strong>Panel Heading</strong>
9
</div>
10
<div class="body">
11
The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effect.
12
It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin.
13
</div>
14
<div class="foot">
15
Panel Footer
16
</div>
17
</div>
18
</p>
19
20
<p class="br">
21
The following is an example that can be implemented more simply by excluding the <strong>head</strong> and/or the <strong>foot</strong>.
22
23
<div class="row">
24
<div class="col col-6">
25
<div class="panel">
26
<div class="head">
27
<strong>Panel Heading</strong>
28
</div>
29
<div class="body">
30
Panel Body
31
</div>
32
</div>
33
</div>
34
<div class="col col-6" style="padding-left: 5px;">
35
<div class="panel">
36
<div class="body">
37
Panel Body
38
</div>
39
<div class="foot">
40
<strong>Panel Footer</strong>
41
</div>
42
</div>
43
</div>
44
</div>
45
</p>
46
</section>
47
48
<section>
49
<h2>Combine</h2>
50
<p>
51
Panel provides a function that enables combination with other components. and that can be used instead of <strong>body</strong>.
52
53
<div class="panel">
54
<div class="head">
55
<strong>Panel Heading</strong>
56
</div>
57
<table class="table classic hover">
58
<thead>
59
<tr>
60
<th>A</th><th>B</th><th>C</th><th>D</th><th>E</th>
61
</tr>
62
</thead>
63
<tbody>
64
<tr>
65
<td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>
66
</tr>
67
<tr>
68
<td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>
69
</tr>
70
<tr>
71
<td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>
72
</tr>
73
</tbody>
74
</table>
75
</div>
76
</p>
77
</section>
78
79
<section>
80
<h2>Close</h2>
81
<p>
82
Panel provides a closed option. The user needs to add a panel-close class as shown below.
83
84
<div class="panel close">
85
<div class="head">
86
<i class="icon-left"></i> <strong>Panel Heading</strong>
87
</div>
88
<div class="body">
89
Panel Body
90
</div>
91
<div class="foot">
92
Panel Footer
93
</div>
94
</div>
95
</p>
96
</section>
97
98
<section>
99
<h2>Fit</h2>
100
<p>
101
When you want to set the padding value in the body area to 0, add a <strong>fit </strong>class to the body.
102
103
<div class="panel">
104
<div class="head">
105
<i class="icon-left"></i> <strong>Panel Heading</strong>
106
</div>
107
<div class="body fit">
108
The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects.
109
It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.
110
It also supports, but does not require, the Easing Plugin.
111
</div>
112
</div>
113
</p>
114
</section>
115
116
<section>
117
<h2>Include</h2>
118
<p>
119
Panel can add a component such as a <strong>small</strong> button or a label to the header or the footer.
120
121
<div class="panel">
122
<div class="head">
123
<i class="icon-left"></i> <strong>Panel Heading</strong>
124
125
<div style="float: right;">
126
<div class="combo">
127
<a class="btn small" style="width: 150px;">Select...</a>
128
<a class="btn small toggle"><i class="icon-arrow2"></i></a>
129
</div>
130
</div>
131
</div>
132
<div class="body">
133
Panel Body
134
</div>
135
</div>
136
</p>
137
</section>
138
139
<section>
140
<h2>Tab Header</h2>
141
<p>
142
Panel can add a tab component to the header.
143
144
<div class="panel">
145
<div class="head">
146
<ul class="tab top">
147
<li class="active">
148
<a href="#">Home</a>
149
</li>
150
<li><a href="#">CSS</a></li>
151
<li><a href="#">Script</a></li>
152
<li class="checked">
153
<a href="#">Menu <i class="icon-arrow1"></i></a>
154
</li>
155
</ul>
156
</div>
157
<div class="body">
158
Panel Body
159
</div>
160
</div>
161
</p>
162
</section>
163
164
<section>
165
<h2>Panel Group</h2>
166
<p>
167
Panel Group can combine several panels as a group.
168
169
<div class="pgroup">
170
<div class="panel" style="width: 33.3%;">
171
<div class="head">
172
<strong>Panel Heading</strong>
173
</div>
174
<div class="body">
175
Panel Body
176
</div>
177
</div>
178
<div class="panel" style="width: 33.3%;">
179
<div class="head">
180
<strong>Panel Heading</strong>
181
</div>
182
<div class="body">
183
Panel Body
184
</div>
185
</div>
186
<div class="panel" style="width: 33.3%;">
187
<div class="head">
188
<strong>Panel Heading</strong>
189
</div>
190
<div class="body">
191
Panel Body
192
</div>
193
</div>
194
</div>
195
</p>
196
</section>