修改bootstrap模态框样式

最新推荐文章于 2024-10-13 19:50:29 发布

cxxy

最新推荐文章于 2024-10-13 19:50:29 发布

阅读量1w

点赞数 4

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/leijia_xing/article/details/81365940

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

修改后的如下：

主要代码如下：

<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文件就可以了