[转]修改bootstrap模态框样式

bootstrap是一款非常流行的前端框架，但是有时候我们需要自定义其中的一些样式，这里的例子介绍了如何修改模态框，官方例子样式如下：

image.png

修改后的如下：

image.png

主要代码如下：

<div class="modal fade" id="transModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="width: 300px;height:270px;margin-left: 50%;margin-top: 550px;">
    <div class="modal-content" >
        <div class="modal-header myModal-header">
        <button type="button" class="close myModal-header-close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title myModal-header-font" id="myModalLabel">标题</h4>
        </div>
                
        <div class="modal-body myModal-body">
        <div class="form-group">
            <label for="name" class="myModal-header-font">输入</label>
            <input type="text" class="form-control myModal-input myModal-header-font" id="name" placeholder="请输入名称">
         </div>
 
         <div class="form-group">
            <label for="name" class="myModal-header-font">选择</label>
            <select id="model-select-trans_old" class="form-control myModal-input myModal-header-font myModal-select">
            </select>
          </div>
            </div>
 
            <div class="modal-footer myModal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" style="width:40px;height:24px;padding:1px;float:right;margin-right:150px;color:white;background-color:#1E253F;border:0px">取消
            </button>
            <button type="button" id="addTask" class="btn btn-primary" style="float:left;margin-left:30px;width:40px;height:24px;padding:1px">确定
            </button>
        </div>
        </div>
        </div>
</div>

相关的css代码如下：

.myModal-header{
    padding:6px 10px 6px 20px;
    background-color:#007DCF;
    border:0px;
    height:30px;
}
 
.myModal-body{
    padding:30px 40px 30px 40px;
    background-color:#1E253F;
    border-left:1px solid #007DCF;
    border-right:1px solid #007DCF;
}
 
.myModal-header-font{
    font-size:12px;
    color:#FFFFFF;
}
 
.myModal-header-close{
    color:white;
}
 
.myModal-select{
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    padding-right:10px;
    background:url("../css/images/newpic/chevron-down.png") no-repeat scroll right center transparent;
    background-position-x: 185px;
}
 
.myModal-input{
    background-color:#1E253F;
    border:1px solid #007DCF
}
 
.myModal-footer{
    background-color:#1E253F;
    border:1px solid #007DCF;
    border-top:none;
    padding:0px 15px 30px 15px;
}

另外在引入bootstrap的css文件就可以了

<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" type="text/css">

作者：cxxy
来源：CSDN
原文：https://blog.csdn.net/leijia_xing/article/details/81365940
版权声明：本文为博主原创文章，转载请附上博文链接！

最后编辑于：2019.05.09 11:21:17