panel 面板

默认面板效果，内容放到panel-body

带标题的面板

其他颜色面板

默认面板之间是紧挨在一起，没有间距的，如果需要设置间距，请在 class="panel 后面追加间距样式，如：mt-20，效果如同上面的例子。

举个栗子： <div class="panel panel-danger mt-20">

HTML 代码

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

CSS代码

.panel{ background-color:#fff; border:solid 1px transparent}
	.panel-header{ border-bottom:solid 1px transparent; padding:8px 15px; font-size:14px; font-weight:700}/*面板标题*/
	.panel-body{ padding:15px}/*面板内容*/
	.panel-footer{background-color: #f5f5f5;border-top: 1px solid #ddd;padding:5px 20px}/*面板页脚*/
/*默认面板*/
.panel-default{border-color:#ddd}
.panel-default > .panel-header{ border-color:#ddd; background-color:#f5f5f5; color:#444}

/*主要面板*/
.panel-primary{border-color:#5a98de}
.panel-primary > .panel-header{ border-color:#5a98de; background-color:#5a98de; color:#fff}

/*次要面板*/
.panel-secondary{border-color:#3bb4f2}
.panel-secondary > .panel-header{ border-color:#3bb4f2; background-color:#3bb4f2; color:#fff}

/*成功面板*/
.panel-success{border-color:#5eb95e}
.panel-success > .panel-header{ border-color:#5eb95e; background-color:#5eb95e; color:#fff}

/*警告面板*/
.panel-warning{border-color:#f37b1d}
.panel-warning > .panel-header{ border-color:#f37b1d; background-color:#f37b1d; color:#fff}

/*危险面板*/
.panel-danger{border-color:#dd514c}
.panel-danger > .panel-header{ border-color:#dd514c; background-color:#dd514c; color:#fff}