Bootstrap模态样式

最新推荐文章于 2024-09-09 11:03:57 发布

Dragon.liu

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量70

点赞数

分类专栏： JavaScript 文章标签： bootstrap css html

本文链接：https://blog.csdn.net/weixin_42223701/article/details/121124676

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap表单样式一</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>
<body>
	<div class="container">
		<button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#adviceModal">打开窗口</button>
		<div class="modal" id="adviceModal" data-backdrop="static">
			<!-- data-backdrop:true：默认下的状态（点击窗口之外的位置关闭，有背景色
				false:点击窗口之外不能关闭，没有背景颜色
				static：点击窗口之外不能关闭，有背景颜色） -->
			<div class="modal-content">
				<div class="modal-header">
					<!-- data-dismiss="modal"：可以关闭窗口 -->
					<span class="close" data-dismiss="modal">&times;</span>
				</div>
				<div class="modal-body">
					<div class="panel panel-default panel-success">
					<div class="panel-heading">
						<span class="glyphicon glyphicon-heart"></span>请留言
					</div>
					<div class="panel-body">
						<form action="index_submit" class="form-horizontal">
							<div class="form-group">
								<label for="title" class="col-md-1 control-label">标&nbsp;&nbsp;题</label>
								<div class="col-md-10">
									<input type="text" placeholder="请输入标题" class="form-control" name="title" id="title">
								</div>
							</div>
							<div class="form-group">
								<label for="content" class="col-md-1 control-label">内&nbsp;&nbsp;容</label>
								<div class="col-md-10">
									<textarea name="content" rows="10" placeholder="请输入内容" id="content" class="form-control"></textarea>
								</div>
							</div>
							<div class="col-md-3 col-md-offset-1">
								<input type="submit" class="btn btn-success btn-xs" value ="提交">
								<input type="reset" class="btn btn-danger btn-xs" value ="重置">
							</div>
						</form>
					</div>
					<div class="panel-footer">
						感谢留言
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" data-dismiss="modal" class="btn btn-danger btn-xs">关闭</button>
				</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>