怎样创建一个 Panel ?
通过 .panel .panel-default .panel-body 三个类可以创建一个 Panel
<div class = "panel panel-default">
<div class = "panel-body">
这是一个最简单 Panel
</div>
</div>
01.PNG
怎样为 Panel 添加一个 Heading ?
在 Panel 的 .panel-body 之前加入一个 .panel-heading 元素就可以为 Panel 添加一个 Heading
<div class = "panel panel-default">
<div class = "panel-heading">
面板的 Heading
</div>
<div class = "panel-body">
........
</div>
</div>
带 Heading 的面板
怎样为 Panel 添加一个 Footer ?
在 Panel 的 .panel-body 之后加入一个 .panel-footer 元素就可以为 Panel 添加一个 Footer
<div class="panel panel-danger">
<div class = "panel-heading">
带 Footer 的面板
</div>
<div class="panel-body">
带 Footer 的面板
</div>
<div class="panel-footer">这里是 Footer</div>
</div>
带 Footer 的面板
怎样为 Heading 增加预设样式 ？
在 Heading 内添加一个<h1> - <h6> 的标签，并设置 .panel-title 类，即可呈现为预设的样式。
注意：
<h1>-<h6>均可使用，效果是一样的
<!-- 不使用预设样式 -->
<div class = "panel panel-success">
<div class = "panel-heading">
这里的 Heading 没有设置预设样式
</div>
<div class = "panel-body">
面板内容
</div>
</div>
<!-- 使用预设样式 -->
<div class = "panel panel-success">
<div class = "panel-heading">
<h6 class = "panel-title">
这里的 Heading 内部多了一个 <h6> 标签，设置了预设样式
</h6>
</div>
<div class = "panel-body">
面板内容
</div>
</div>
预设样式
怎样在 Panel 的 Footer 中添加按钮 ？
直接将按钮包裹在一个 <div> 中，然后添加到 Footer 内部即可，要注意下面两点：
- 必须为 Footer 添加
.clearfix类，否则将破会 Footer 的布局 - 包裹按钮的
<div>可以设置一个.pull-right，让按钮向右侧对齐
<div class="panel panel-default">
<div class="panel-body">
......
</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<a href="#" class="btn btn-primary">了解更多</a>
<a href="#" class="btn btn-default">返回</a>
</div>
</div>
</div>
为 Footer 添加按钮
面板有几种情景模式 ？
.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger
<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 中添加一个 .table 即可在 Panel 中加入表格，可以保留 Panel 的 .panel-body
<!-- 带 body 的面板表格 -->
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<!-- 注意：这里保留了面板的 body -->
<div class = "panel-body">
这里是面板的 body
</div>
<!-- 注意：在这里添加了表格 -->
<table class = "table">
......
</table>
</div>
<!-- 不带 body 的面板表格 -->
<div class = "panel panel-default">
<div class = "panel-heading">Panel Heading</div>
<table class = "table">
......
</table>
</div>
表格面板
怎样在面板中添加列表组 ？
在 Panel 中添加一个 .list-group 即可在 Panel 中加入列表组，同样可以保留 Panel 的 .panel-body
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
这里是面板的 body
</div>
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
......
</ul>
</div>
06.PNG
