Bootstrap面板 容器panel

1.正常包含有头，主体，底部

Container>panel + panel-default>panel-heading + panel-body +panel-footer

<div class="container">
    <div class="row">
        <div class="col-lg-2">
            <div class="panel panel-default">
                <div class="panel-heading">Panel-heading</div>
                <div class="panel-body">
                    吉特仓库系统是一个以Bootstrap为前端的智能化仓库管理系统
                </div>
                <div class="panel-footer">Panel-footer</div>
            </div>
        </div>
</div>
</div>

2.基础样式panel-default panel-primary panel-success panel-info panel-warning panel-danger

3.panel嵌套表格

Panel>panel-heading panel-body(>table>thead + tbody) + panel-footer

<div class="panel panel-primary">
        <div class="panel-heading">Bootstrap标题</div>
        <div class="panel-body">
            吉特仓库系统是一个以Bootstrap为前端的智能化仓库管理系统
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>入库单号</th>
                        <th>供应商</th>
                        <th>入库时间</th>
                        <th>产品</th>
                        <th>数量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>20160426</td>
                        <td>天极物流</td>
                        <td>2015-04-12</td>
                        <td>电子芯片</td>
                        <td>100pcs</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="panel-footer">智能机器人</div>
    </div>
</div>

4.嵌套列表

Panel>panel-heading + panel-body(>list-group>list-group-item) + panel-footer

    <div class="panel panel-primary">
        <div class="panel-heading">Bootstrap标题</div>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item">入库管理</li>
                <li class="list-group-item">出库管理</li>
                <li class="list-group-item">盘点管理</li>
            </ul>
        </div>
        <div class="panel-footer">智能机器人</div>
    </div>