面板

创建拥有不同样式的布局盒。

默认

示例

面板标题 控件
面板内容

代码

<div class="panel">
    <div class="panel-heading">...<span class="panel-control">...</span></div>
    <div class="panel-body">...</div>
    <div class="panel-footer">...</div>
</div>

面板框

示例

最新

标题

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。

代码

<div class="panel panel-box">
    <span class="badge badge-success">...</span>
    <h3><i class="icon-asthis"></i> ...</h3>
    <p>...</p>
</div>

面板状态

示例

信息 控件
面板内容
成功 控件
面板内容
警告 控件
面板内容
危险 控件
面板内容
抽屉中的面板 控件
面板内容

代码

<div class="panel panel-info">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

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

面板附带表格

示例

面板标题

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。

编号
1 梅梅
2

代码

<div class="panel">
    <div class="panel-heading">面板标题</div>
    <div class="panel-body">
        <p>...</p>
    </div>
    <table class="table">
        ...
    </table>
</div>

面板附带图像

示例

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。

代码

<div class="panel">
    <img width="100%" alt="" src="">
    <div class="panel-body">
        <p>...</p>
    </div>
</div>