BootStrap 面板（panel） 

 1 <div class="container">
 2         <h1>面板</h1>
 3         <div class="panel panel-default">
 4             <div class="panel-heading">
 5                 面板头部
 6             </div>
 7             <div class="panel-body">
 8                 面板主体
 9             </div>
10             <div class="panel-footer">
11                 面板底部
12             </div>
13         </div>
14         <div class="panel panel-danger">
15             <div class="panel-heading">
16                 面板头部
17             </div>
18             <div class="panel-body">
19                 面板主体
20             </div>
21         </div>
22         <div class="panel panel-success">
23             <div class="panel-heading">
24                 面板头部
25             </div>
26             <div class="panel-body">
27                 面板主体
28             </div>
29         </div>
30         <div class="panel panel-warning">
31             <div class="panel-heading">
32                 面板头部
33             </div>
34             <div class="panel-body">
35                 面板主体
36             </div>
37         </div>
38         <div class="panel panel-info">
39             <div class="panel-heading">
40                 面板头部
41             </div>
42             <div class="panel-body">
43                 面板主体
44             </div>
45         </div>
46         <div class="panel panel-primary">
47             <div class="panel-heading">
48                 面板头部
49             </div>
50             <div class="panel-body">
51                 面板主体
52             </div>
53         </div>
54     </div>

以上代码效果图如下：

posted @ 2016-12-22 16:09  时间脱臼  阅读(138)  评论(0)    收藏  举报