定制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
- 定制bootstrap模态框的header
- 定制bootstrap的表格
- 关于Bootstrap的定制
- 编译Bootstrap,定制自己的模板。
- 对定制的Bootstrap进行修改
- 定制bootstrap的按钮btn-primary
- 定制bootstrap的carousel-indicators li
- bootstrap在线定制工具
- bootstrap在线设计,快速定制自己的网站!
- 如何更高效地定制你的bootstrap
- Less及定制bootstrap--less
- Bootstrap table 定制提示语
- Apache CXF: 如何为 Web 请求增加定制的 HTTP header?
- nginx定制header返回信息模块ngx_headers_more
- content+header+breadcrumb+container+toolbar(Bootstrap)
- Bootstrap 页面标题(Page Header)
- Bootstrap 模态框的使用
- bootstrap的模态框例子
- 如何提交表单
- HTTP协议使用cookie
- xlistview上拉刷新、下拉加载
- hdu 5686 Problem B【水题】
- OKHttp通信使用(二)
- 定制bootstrap模态框的header
- windows7下安装ruby,rubyGems和devkit
- leetcode-230. Kth Smallest Element in a BST
- js页面跳转整理
- viewpager Scrollview fragment 滑动
- 面试总结CSS HTML
- 射线和三角面的相交判断
- 数据类型、变量和数组
- 最短路径(Shortest Path)