基本类型

默认的.panel所做的只是提供基本的边界和内部,来包含内容。
<div class="panel">
  <div class="panel-body">
    ...
  </div>
</div>

带标题的面板

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

带脚注的面板

面板内容
<div class="panel">
  <div class="panel-body">
    ...
  </div>
  <div class="panel-footer">
    ...
  </div>
</div>

使用不同色彩主题

.panel-primary
面板内容
.panel-success
面板内容
.panel-warning
面板内容
.panel-danger
面板内容
.panel-info
面板内容
<div class="panel panel-primary">
  ...
</div>
<div class="panel panel-success">
  ...
</div>
<div class="panel panel-warning">
  ...
</div>
<div class="panel panel-danger">
  ...
</div>
<div class="panel panel-info">
  ...
</div>

包含表格

Panel heading
Lorem ipsum. Repudiandae, harum! Tenetur, corporis. Perspiciatis, porro?
Lorem ipsum. Officiis, non. Molestias, qui. Odit, ducimus.
Lorem ipsum. Repellendus, exercitationem! Velit, eos. Eius, officiis.
Lorem ipsum. Amet, esse! Quis, pariatur! Totam, quae.
<div class="panel">
  <div class="panel-heading">
    ...
  </div>
  <table class="table">
    ...
  </table>
</div>

包含列表

项目
  • 待办
  • 需求
  • 任务
  • Bug
  • 用例
<div class="panel">
  <div class="panel-heading">
    ...
  </div>
  <ul class="list-group">
    ...
  </ul>
</div>

面板组

面板标题
面板内容
面板标题
面板内容
面板标题
面板内容
<div class="panel-group">
  <div class="panel">
    ...
  </div>
  <div class="panel">
    ...
  </div>
  <div class="panel">
    ...
  </div>
  ...
</div>