定制bootstrap模态框的header

来源:互联网 发布:js获取当前时间加一年 编辑:程序博客网 时间:2024/05/17 07:06

原bootstrap模态框的header是这样的



.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}


因为它的上下padding已经占了15px

所以显得header比较大

所以我们重新定制一下,让它的上下padding为0就好

.com-modal .modal-header {
    padding: 0 15px;
    border-bottom: 0;
    background: #ffe8d9 url(../img/modal_header_bg.png) 0 0 repeat-x;
}




<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="attNotice">新增收货人地址</h4></div>

.com-modal .modal-header .modal-title {
    font-family: tahoma, arial, 'Hiragino Sans GB', '\5FAE\8F6F\96C5\9ED1', sans-serif;
    font-size: 16px;
    line-height: 40px;
    height: 40px;
    color: #585657;

.com-modal .close {
    margin-top: 7px;
}

效果如下:




0 0