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>