默认面板之间是紧挨在一起,没有间距的,如果需要设置间距,请在 class="panel 后面追加间距样式,如:mt-20,效果如同上面的例子。
举个栗子:
HTML 代码
面板标题
面板内容
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}
此文由 at-lib网站目录 编辑,未经允许不得转载!: