bootstrap栅格系统弹出层及其样式详解(弹出层实例)

作者(出处):百宝箱工作室发布时间:2018年4月11日 12:10:48查阅量:382

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<title></title>
	</head>
	<body style="height: 3000px;">
	<!--
        	作者:百宝箱工作室      微课堂教学QQ:425680248
        	时间:2018-04-11
        	描述:弹出层及其样式
        	
        	1.弹出层必须放在body标签里面。
        	2.弹出层里面不能再嵌套别的层。
        	3.弹出层出来以后,页面的滚动条会被覆盖。
        	
        	点击按钮弹出侧,需要在按钮里面增加data-toggle="modal"属性,使按钮与js关联起来。
        	一个网页中有很多个弹出层,如果要弹出指定的层,要在按钮里面增加data-target="#Modal1"属性。
        	data-target的属性值也可以是这样data-target=".Modal2",就是看属性值是用ID命名还是用class命名来决定。
        	关闭按钮与js关联要增加data-dismiss="modal"属性,modal是弹出层的父级样式。
        	
        	modal		弹出层父级
        	modal-dialog	弹出层
        	modal-content	弹出层的内容区域
        	modal-header	弹出层的内容区域的头部
        	modal-title	弹出层的内容区域的头部标题
        	modal-body	弹出层的内容区域的主体
        	modal-footer	弹出层的内容区域的底部
        	fade		让弹出层有渐变滚动弹出效果,要与modal样式放在一起
        	
        	modal-lg、modal-md、modal-sm用于设置弹出层的尺寸大小,如果省略不写则默认值是modal-md。
        	以上三个尺寸样式要与modal-dialog样式放在一起。
        -->
		<div class="container">
			<div class="row">
				<button class="btn btn-primary" data-toggle="modal" data-target="#Modal1">弹出默认尺寸的层</button>
				<button class="btn btn-primary" data-toggle="modal" data-target=".Modal2">弹出1个大层</button>
				<button class="btn btn-primary" data-toggle="modal" data-target=".Modal3">弹出1个小层</button>
			</div>
		</div>
		<div class="modal fade" id="Modal1">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<!--关闭按钮-->
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">百宝箱网站建设与维护</h4>
					</div>
					<div class="modal-body">
						<p>如果您的网站需要一个专业的技术员来建设与维护,那么您可以跟百宝箱工作室洽谈。网站建设与维护一般按月收费,长期合作的网站可以按年收费。网站维护收费标准:个人站300元-600元/月、企业站600元-1800元/月,具体价格以网站业务繁简以及客户要求来洽谈协商。</p>
						<p>如果您的网站需要一个专业的技术员来建设与维护,那么您可以跟百宝箱工作室洽谈。网站建设与维护一般按月收费,长期合作的网站可以按年收费。网站维护收费标准:个人站300元-600元/月、企业站600元-1800元/月,具体价格以网站业务繁简以及客户要求来洽谈协商。</p>
					</div>
					<div class="modal-footer">
						<button class="btn btn-danger">咨询QQ 425680248</button>
						<button class="btn btn-primary" data-dismiss="modal">确  定</button>
					</div>
				</div>
			</div>
		</div>
		
		<div class="modal fade Modal2">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">百宝箱网站建设与维护</h4>
					</div>
					<div class="modal-body">
						<p>如果您的网站需要一个专业的技术员来建设与维护,那么您可以跟百宝箱工作室洽谈。网站建设与维护一般按月收费,长期合作的网站可以按年收费。网站维护收费标准:个人站300元-600元/月、企业站600元-1800元/月,具体价格以网站业务繁简以及客户要求来洽谈协商。</p>
						<p>如果您的网站需要一个专业的技术员来建设与维护,那么您可以跟百宝箱工作室洽谈。网站建设与维护一般按月收费,长期合作的网站可以按年收费。网站维护收费标准:个人站300元-600元/月、企业站600元-1800元/月,具体价格以网站业务繁简以及客户要求来洽谈协商。</p>
					</div>
					<div class="modal-footer">
						<button class="btn btn-danger">咨询QQ 425680248</button>
						<button class="btn btn-primary" data-dismiss="modal">确  定</button>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade Modal3">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">百宝箱网站建设与维护</h4>
					</div>
					<div class="modal-body">
						<p>如果您的网站需要一个专业的技术员来建设与维护,那么您可以跟百宝箱工作室洽谈。网站建设与维护一般按月收费,长期合作的网站可以按年收费。网站维护收费标准:个人站300元-600元/月、企业站600元-1800元/月,具体价格以网站业务繁简以及客户要求来洽谈协商。</p>
						<p>如果您的网站需要一个专业的技术员来建设与维护,那么您可以跟百宝箱工作室洽谈。网站建设与维护一般按月收费,长期合作的网站可以按年收费。网站维护收费标准:个人站300元-600元/月、企业站600元-1800元/月,具体价格以网站业务繁简以及客户要求来洽谈协商。</p>
					</div>
					<div class="modal-footer">
						<button class="btn btn-danger">咨询QQ 425680248</button>
						<button class="btn btn-primary" data-dismiss="modal">确  定</button>
					</div>
				</div>
			</div>
		</div>
		
		<!--弹出层的基本结构-->
		<!--
		<div class="modal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header"></div>
					<div class="modal-body"></div>
					<div class="modal-footer"></div>
				</div>
			</div>
		</div>
		-->
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2099
点击这里给我发消息