怎样创建一个 Panel ?

通过 .panel .panel-default .panel-body 三个类可以创建一个 Panel

<div class = "panel panel-default">
    <div class = "panel-body">
        这是一个最简单 Panel
    </div>
</div>

01.PNG

怎样为 Panel 添加一个 Heading ?

在 Panel 的 .panel-body 之前加入一个 .panel-heading 元素就可以为 Panel 添加一个 Heading

<div class = "panel panel-default">
    <div class = "panel-heading">
        面板的 Heading
    </div>

    <div class = "panel-body">
        ........
    </div>
</div>

带 Heading 的面板

怎样为 Panel 添加一个 Footer ?

在 Panel 的 .panel-body 之后加入一个 .panel-footer 元素就可以为 Panel 添加一个 Footer

<div class="panel panel-danger">
    <div class = "panel-heading">
        带 Footer 的面板
    </div>
    <div class="panel-body">
        带 Footer 的面板
    </div>

    <div class="panel-footer">这里是 Footer</div>
</div>

带 Footer 的面板

怎样为 Heading 增加预设样式 ？

在 Heading 内添加一个<h1> - <h6> 的标签，并设置 .panel-title 类，即可呈现为预设的样式。

注意：<h1> - <h6> 均可使用，效果是一样的

<!-- 不使用预设样式 -->
<div class = "panel panel-success">
    <div class = "panel-heading">
        这里的 Heading 没有设置预设样式
    </div>

    <div class = "panel-body">
        面板内容
    </div>
</div>

<!-- 使用预设样式 -->
<div class = "panel panel-success">
    <div class = "panel-heading">
        <h6 class = "panel-title">
            这里的 Heading 内部多了一个 <h6> 标签，设置了预设样式
        </h6>
    </div>

    <div class = "panel-body">
        面板内容
    </div>
</div>

预设样式

怎样在 Panel 的 Footer 中添加按钮 ？

直接将按钮包裹在一个 <div> 中，然后添加到 Footer 内部即可，要注意下面两点：

1. 必须为 Footer 添加 .clearfix 类，否则将破会 Footer 的布局
2. 包裹按钮的 <div> 可以设置一个 .pull-right，让按钮向右侧对齐

<div class="panel panel-default">
    <div class="panel-body">
        ......
    </div> 


    <div class="panel-footer clearfix">
        <div class="pull-right">
            <a href="#" class="btn btn-primary">了解更多</a>
            <a href="#" class="btn btn-default">返回</a>
        </div>
    </div>
</div>

为 Footer 添加按钮

面板有几种情景模式 ？

.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger

<div class="panel panel-primary">
    ......
</div>


<div class="panel panel-success">
    ......
</div>


<div class="panel panel-info">
    ......
</div>


<div class="panel panel-warning">
    ......
</div>


<div class="panel panel-danger">
    ......
</div>

面板的情景模式

怎样在面板中添加表格 ？

在 Panel 中添加一个 .table 即可在 Panel 中加入表格，可以保留 Panel 的 .panel-body

<!-- 带 body 的面板表格 -->
<div class = "panel panel-default">
    <div class = "panel-heading">
        <h3 class = "panel-title">Panel title</h3>
    </div>

    <!-- 注意：这里保留了面板的 body -->
    <div class = "panel-body">
        这里是面板的 body
    </div>

    <!-- 注意：在这里添加了表格 -->
    <table class = "table">
        ......
    </table>
</div>


<!-- 不带 body 的面板表格 -->
<div class = "panel panel-default">
    <div class = "panel-heading">Panel Heading</div>

    <table class = "table">
        ......
    </table>

</div>

表格面板

怎样在面板中添加列表组 ？

在 Panel 中添加一个 .list-group 即可在 Panel 中加入列表组，同样可以保留 Panel 的 .panel-body

<div class = "panel panel-default">
    <div class = "panel-heading">
        <h3 class = "panel-title">Panel title</h3>
    </div>

    <div class = "panel-body">
        这里是面板的 body
    </div>

    <ul class = "list-group">
        <li class = "list-group-item">Free Domain Name Registration</li>
        <li class = "list-group-item">Free Window Space hosting</li>
        ......
    </ul>
</div>

06.PNG