本文档展示了如何使用Bootstrap创建一个简洁的模态框注册界面。模态框包括一个头部、主体和尾部，通过按钮触发显示和关闭。代码中包含了必要的HTML结构和JavaScript引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<body>
<div class="btn btn-primary" data-toggle="modal" data-target=".modal">打开注册</div>
<!--最外层容器-->
<div class="modal fade" id="mtv">
<!--第二层-->
<div class="modal-dialog">
<!--内容开始-->
<div class="modal-content">
<!--头部开始-->
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h2 class="modal-title">注册</h2>
</div>
<!--头部结束-->
<!--身体开始-->
<div class="modal-body">
<p>呵呵哒</p>
<p>呵呵哒</p>
</div>
<!--身体结束-->
<!--尾部开始-->
<div class="modal-footer">
<div class="btn btn-default" data-dismiss="modal">关闭</div>
<div class="btn btn-info">保存</div>
</div>
<!--尾部结束-->
</div>
<!--内容结束--->
</div>
<!--第二层结束--->
</div>
<!--最外层结束-->
</body>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<body>
<div class="btn btn-primary" data-toggle="modal" data-target=".modal">打开注册</div>
<!--最外层容器-->
<div class="modal fade" id="mtv">
<!--第二层-->
<div class="modal-dialog">
<!--内容开始-->
<div class="modal-content">
<!--头部开始-->
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h2 class="modal-title">注册</h2>
</div>
<!--头部结束-->
<!--身体开始-->
<div class="modal-body">
<p>呵呵哒</p>
<p>呵呵哒</p>
</div>
<!--身体结束-->
<!--尾部开始-->
<div class="modal-footer">
<div class="btn btn-default" data-dismiss="modal">关闭</div>
<div class="btn btn-info">保存</div>
</div>
<!--尾部结束-->
</div>
<!--内容结束--->
</div>
<!--第二层结束--->
</div>
<!--最外层结束-->
</body>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
</script>
</html>
扫一扫
241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
