BootStrap 面板组件

面板组件是用来设置控件内容的：适合做登录，注册小窗口

基本面板
<div class="panel panel-default">
    <div class="panel-body">
        面板
    </div>
</div>    

带标题的面板
<div class="panel panel-default">
    <div class="panel-heading">
        标题
    </div>
    <div class="panel-body">
        面板
    </div>
    <div class="panel-footer">
        页脚
    </div>
</div>    

结合表格的面板
<div class="panel panel-default">
    <div class="panel-heading">
        <span class="panel-title">标题</span>
    </div>
    <div class="panel-body">
        面板
    </div>
    <table class="table">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <div class="panel-footer">
        页脚
    </div>
</div>    

结合列表的面板
<div class="panel panel-default">
    <div class="panel-heading">
        <span class="panel-title">标题</span>
    </div>
    <div class="panel-body">
        面板
    </div>
    <div class="list-group">
        <a href="#" class="list-group-item active">首页 <span class="badge">10</span> </a>
        <a href="#" class="list-group-item">第一页</a>
        <a href="#" class="list-group-item">第二页</a>
        <a href="#" class="list-group-item">第三页</a>
    </div>
    <div class="panel-footer">
        页脚
    </div>
</div>