Bootstrap3 _ 面板

面板

Bootstrap预设了一种组件叫面板（panel），有点类似操作系统弹出的窗口。

面板 - 基础示例

面板示例

<div class="panel panel-default">
  <div class="panel-body">
    面板示例
  </div>
</div>

运行一下

面板 - 添加标题

面板标题（不使用h3标题）

面板内容

面板标题

面板内容

<div class="panel panel-default">
  <div class="panel-heading">面板标题（不使用h3标题）</div>
  <div class="panel-body">
    面板内容
  </div>
</div>

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

运行一下

面板 - 添加脚注

面板内容

面板脚注

<div class="panel panel-default">
  <div class="panel-body">
    面板内容
  </div>
  <div class="panel-footer">面板脚注</div>
</div>

运行一下

面板 - 情境修饰

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

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

运行一下

面板 - 添加表格

面板标题

面板内容（panel-body部分即该部分，可以省略删除）...

编号	帮派名称	口号	领导人
1	天地会	反清复明	陈近南
2	义和团	扶清灭洋	赵三多
3	日月神教	东方教主，文成武德	东方不败
4	太平天国	耕者有其田	洪秀全
5	星宿派	星宿老仙，法力无边	丁春秋

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">
    <p>面板内容（panel-body部分即该部分，可以省略删除）...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

运行一下

面板 - 添加列表组

面板标题

面板内容（panel-body部分即该部分，可以省略删除）...

名砖家科男
我不是砖家
砖家一笑很倾城
风云砖家天下
砖家又见砖家

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">
     <p>面板内容（panel-body部分即该部分，可以省略删除）...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
      <li class="list-group-item">名砖家科男</li>
      <li class="list-group-item">我不是砖家</li>
      <li class="list-group-item">砖家一笑很倾城</li>
      <li class="list-group-item">风云砖家天下</li>
      <li class="list-group-item">砖家又见砖家</li>
  </ul>
</div>

运行一下

面板

推广