分类目录 共计收录4187站; 资讯文章4691篇; 待审网站 1049站; 当月收录27站; 今日审核0站; 已收到1个打赏!
快审详情
快审qq
首页 > 教程收藏 > CSS教程

panel 面板


OwQ网站目录

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

举个栗子: OwQ网站目录

HTML 代码OwQ网站目录

OwQ网站目录

OwQ网站目录

面板标题OwQ网站目录

OwQ网站目录

面板内容OwQ网站目录


OwQ网站目录


OwQ网站目录

CSS代码OwQ网站目录

.panel{ background-color:#fff; border:solid 1px transparent}OwQ网站目录

.panel-header{ border-bottom:solid 1px transparent; padding:8px 15px; font-size:14px; font-weight:700}/*面板标题*/OwQ网站目录

.panel-body{ padding:15px}/*面板内容*/OwQ网站目录

.panel-footer{background-color: #f5f5f5;border-top: 1px solid #ddd;padding:5px 20px}/*面板页脚*/OwQ网站目录

/*默认面板*/OwQ网站目录

.panel-default{border-color:#ddd;}OwQ网站目录

.panel-default > .panel-header{ border-color:#ddd; background-color:#f5f5f5; color:#444}OwQ网站目录

 OwQ网站目录

/*主要面板*/OwQ网站目录

.panel-primary{border-color:#5a98de;}OwQ网站目录

.panel-primary > .panel-header{ border-color:#5a98de; background-color:#5a98de; color:#fff}OwQ网站目录

 OwQ网站目录

/*次要面板*/OwQ网站目录

.panel-secondary{border-color:#3bb4f2;}OwQ网站目录

.panel-secondary > .panel-header{ border-color:#3bb4f2; background-color:#3bb4f2; color:#fff}OwQ网站目录

 OwQ网站目录

/*成功面板*/OwQ网站目录

.panel-success{border-color:#5eb95e;}OwQ网站目录

.panel-success > .panel-header{ border-color:#5eb95e; background-color:#5eb95e; color:#fff}OwQ网站目录

 OwQ网站目录

/*警告面板*/OwQ网站目录

.panel-warning{border-color:#f37b1d;}OwQ网站目录

.panel-warning > .panel-header{ border-color:#f37b1d; background-color:#f37b1d; color:#fff}OwQ网站目录

 OwQ网站目录

/*危险面板*/OwQ网站目录

.panel-danger{border-color:#dd514c;}OwQ网站目录

.panel-danger > .panel-header{ border-color:#dd514c; background-color:#dd514c; color:#fff}OwQ网站目录


OwQ网站目录

此文由 网站目录 编辑,未经允许不得转载!:

评论 暂无评论
-->