🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 面版 基础面板非常简单,就是一个div容器中运用了类.panel的样式,产生一个具有边框的文本显示块,由于panel不控制主题颜色,所以在.panel基础上增加一个控制颜色的主题的类.panel-default,在里面添加一个div.panel-body来放置面板主体内容。 **默认样式** 默认的`.panel`组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。其用法如下: ```html <div class="panel panel-default"> <div class="panel-body"> 默认样式 </div> </div> ``` ![](https://img.kancloud.cn/5f/0f/5f0f846627656d3964c5c53b4bb394ae_776x87.png) ***** **带标题的面版** 通过`.panel-heading`可以很简单地为面板加入一个标题容器。你也可以通过添加设置了`.panel-title`类的`<h1>`\-`<h6>`标签,添加一个预定义样式的标题。不过,`<h1>`\-`<h6>`标签的字体大小将被`.panel-heading`的样式所覆盖。为了给链接设置合适的颜色,务必将链接放到带有`.panel-title`类的标题标签内。 ```html <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> <div class="panel-body"> 面板内容 </div> </div> ``` ![](https://img.kancloud.cn/17/24/1724502fba254dc5d9ecb16717d9b4c9_776x135.png) ***** **带尾部的面版** 把按钮或次要的文本放入`.panel-footer`容器内。注意面版的脚注**不会**从情境效果中继承颜色,因为他们并不是主要内容。 ```html <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> <div class="panel-body"> 面板内容 </div> <div class="panel-footer">面板尾部</div> </div> ``` ![](https://img.kancloud.cn/0d/89/0d892be128c512355626c7dbe2a55935_776x184.png) ***** **彩色面板** 由于.panel样式并没有对主题颜色进行样式设置,bootstrap框架中的面板组件处理默认的主题(.panel-default)样式之外,还包括以下几种主题样式: | 类 | 状态 | | --- | --- | | `.panel-primary` | 重点  蓝色 | | `.panel-success` |成功   绿色| | `.panel-info` |信息   蓝色(浅的)| | `.panel-warning` |警告   黄色| | `.panel-danger` |危险   红色| ```html <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> <div class="panel-body"> 面板内容 </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> <div class="panel-body"> 面板内容 </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> <div class="panel-body"> 面板内容 </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> <div class="panel-body"> 面板内容 </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> <div class="panel-body"> 面板内容 </div> </div> ``` ![](https://img.kancloud.cn/7a/b9/7ab960f4d83d7c5ffb77c5551137045b_777x680.png) ***** **面板中嵌套表格** 为面板中不需要边框的表格添加`.table`类,是整个面板看上去更像是一个整体设计。如果是带有`.panel-body`的面板,我们为表格的上方添加一个边框,看上去有分隔效果。 ```html <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> <div class="panel-body"> 面板内容 </div> <table class="table"> <tr> <th>#</th> <th>name</th> <th>age</th> </tr> <tr> <td>1</td> <td>麦克</td> <td>23</td> </tr> <tr> <td>2</td> <td>玛丽</td> <td>20</td> </tr> <tr> <td>3</td> <td>莉莉</td> <td>21</td> </tr> </table> </div> ``` ![](https://img.kancloud.cn/95/d3/95d35f85a44c8b9270a44ad9471c5c4c_776x309.png) 当然也可以在 .panel-body 中添加表格。 如果没有`.panel-body`,面版标题会和表格连接起来,没有空隙。效果如下: ![](https://img.kancloud.cn/ea/ae/eaae54a446c842162d13e60a1c89e1f6_776x257.png) ***** **带列表组的面版** 可以简单地在任何面版中加入具有最大宽度的列表组(.ist-group),用法如下: ```html <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> <div class="panel-body"> 面板内容 </div> <div class="list-group"> <a class="list-group-item">item 1</a> <a class="list-group-item">item 2</a> <a class="list-group-item">item 3</a> <a class="list-group-item">item 4</a> </div> </div> ``` ![](https://img.kancloud.cn/ce/68/ce68d9b918ae6f42e1eebdb0ed898414_776x339.png)