Bootstrap 面板

面板（Panel）是 Bootstrap 提供的带边框"盒子"组件，用来把标题与内容框在一起。当页面需要展示分组信息——如账号设置、订单卡片、新闻区块——用它比手写边框更规范；它是 3.x 的经典组件，在 4.x 中由卡片（Card）接棒。

基础面板

给块级元素同时加上 panel 与 panel-default 类即可生成默认面板，内容放在 panel-body 中：

<div class="panel panel-default">
    <div class="panel-body">这是一个基础面板</div>
</div>

显示效果：文字四周出现浅灰色圆角边框，整体为白底卡片。

面板标题与脚注

panel-heading 放标题（标题常用带 panel-title 类的标题标签），panel-footer 放说明或操作按钮：

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">面板标题</h4>
    </div>
    <div class="panel-body">这里是面板主体内容</div>
    <div class="panel-footer">脚注：点击查看详情</div>
</div>

显示效果：顶部出现灰底标题栏，中间为白底正文，底部有一条灰底脚注，三段层次分明。

带语境色彩的面板

把 panel-default 换成 panel-primary、panel-success、panel-info、panel-warning 或 panel-danger 之一，标题栏即呈现对应语义色：

<div class="panel panel-success">
    <div class="panel-heading">操作成功</div>
    <div class="panel-body">您的数据已保存。</div>
</div>

显示效果：标题栏变为绿色，一眼就能读出"成功"的含义；其余四个颜色类同理。

带表格或列表组的面板

面板内容区可直接放 .table 表格或列表组，拼成完整的报表卡片：

<div class="panel panel-default">
    <div class="panel-heading">订单列表</div>
    <table class="table">
        <tr><td>商品A</td><td>¥19.9</td></tr>
        <tr><td>商品B</td><td>¥29.9</td></tr>
    </table>
</div>

显示效果：表格紧贴面板内边缘，边框融为一体；把 <table> 换成 <ul class="list-group"> 就是带列表组的面板。

小结：面板 = panel + 语境类打底，由 panel-heading、panel-body、panel-footer 划分上中下三区，还可内嵌表格与列表组，是内容分组展示的利器。