引用bootstrap的css和js文件
在html添加以下代码可显示不同颜色的面板
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">面板标题:panel-default</h3>
</div>
<div class="panel-body">
primary：这是一个基本的面板
</div>
<div class="panel-footer" >
页脚
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">面板标题:panel-primary</h3>
</div>
<div class="panel-body">
primary：这是一个基本的面板
</div>
<div class="panel-footer" >
页脚
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">面板标题:panel-success</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">面板标题:panel-info</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
<div class="panel-footer" >
页脚
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">面板标题:panel-warning</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
<div class="panel-footer" >
页脚
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">面板标题:panel-danger</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
<div class="panel-footer" >
页脚
</div>
</div>展示的效果