Bootstrap 组件：面板组件（panel）

作者:WangMin
格言:努力做好自己喜欢的每一件事

基础面板非常简单，就是一个div容器中运用了类.panel的样式，产生一个具有边框的文本显示块，由于panel不控制主题颜色，所以在.panel基础上增加一个控制颜色的主题的类.panel-default,在里面添加一个div.panel-body来放置面板主体内容。

默认样式

默认的.panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。其用法如下：

<div class="panel panel-default">
    <div class="panel-body">
        默认样式
    </div>
</div>

带标题的面版

通过.panel-heading可以很简单地为面板加入一个标题容器。你也可以通过添加设置了.panel-title类的<h1>-<h6>标签，添加一个预定义样式的标题。不过，<h1>-<h6>标签的字体大小将被.panel-heading的样式所覆盖。为了给链接设置合适的颜色，务必将链接放到带有.panel-title类的标题标签内。

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>

带尾部的面版

把按钮或次要的文本放入.panel-footer容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。

<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>

彩色面板

由于.panel样式并没有对主题颜色进行样式设置，bootstrap框架中的面板组件处理默认的主题（.panel-default）样式之外，还包括以下几种主题样式：

<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>

面板中嵌套表格

为面板中不需要边框的表格添加.table类，是整个面板看上去更像是一个整体设计。如果是带有.panel-body的面板，我们为表格的上方添加一个边框，看上去有分隔效果。

<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>

当然也可以在 .panel-body 中添加表格。
如果没有.panel-body，面版标题会和表格连接起来，没有空隙。效果如下：

带列表组的面版

可以简单地在任何面版中加入具有最大宽度的列表组（.list-group），用法如下：

<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>

就先分享到这里!! :smile: 后续继续更新!!