bootstrap——模态框

目录

模态框  类似js中alert();

1.模态框的主样式:modal

2.模态框的代码最好是直接作为body的子元素,而不是后代元素

3.模态框的区域:

4.与Bootstrap.js中的相关属性

5.Bootstrap.css

 模态框的实现流程

案例:订单页面


模态框  类似js中alert();

1.模态框的主样式:modal

2.模态框的代码最好是直接作为body的子元素,而不是后代元素

3.模态框的区域:

        (1)modal声明层  div.modal
        (2)modal-dialog窗口声明层  div.modal-dialog
        (3)modal-content 内容声明层  div.modal-conetnt
                        modal-header  头部
                        modal-body    身体
                        modal-foot    尾部

4.与Bootstrap.js中的相关属性

                data-backdrop = "false"  控制模态框的遮罩层点击不关闭模态框
                data-keyboard = "true" 控制模态框按键盘的esc键关闭
                data-dismiss="modal" 控制模态框手动点击关闭

5.Bootstrap.css

               fade 淡入淡出

 模态框的实现流程

                1.有按钮
                    data-toggle   识别该按钮控制模态框
                    data-target   通过锚链接的设计找到指定的模态框
                2.有模态框的布局代码

案例:订单页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!-- css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<!-- js -->
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.navbar-collapse {
				flex-grow: 0;
			}

			.form-group {
				width: 280px;
				margin: 0 auto;
			}
			/* 设置表格字体垂直居中 */
			.table tr td{
				vertical-align: middle;
				text-align: center;
			}
		</style>
	</head>
	<body>
		
		<!-- 设计一个模态框实现订单页面 -->
		<!-- Modal -->
		<div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
		  <div class="modal-dialog modal-lg" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="exampleModalLongTitle">结算页</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
		        <form>
		          <div class="form-row">
		            <div class="form-group col-md-6">
		              <label for="inputEmail4">Email</label>
		              <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
		            </div>
		            <div class="form-group col-md-6">
		              <label for="inputPassword4">Password</label>
		              <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
		            </div>
		          </div>
		          <div class="form-group">
		            <label for="inputAddress">Address</label>
		            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
		          </div>
		          <div class="form-group">
		            <label for="inputAddress2">Address 2</label>
		            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
		          </div>
		          <div class="form-row">
		            <div class="form-group col-md-6">
		              <label for="inputCity">City</label>
		              <input type="text" class="form-control" id="inputCity">
		            </div>
		            <div class="form-group col-md-4">
		              <label for="inputState">State</label>
		              <select id="inputState" class="form-control">
		                <option selected>Choose...</option>
		                <option>...</option>
		              </select>
		            </div>
		            <div class="form-group col-md-2">
		              <label for="inputZip">Zip</label>
		              <input type="text" class="form-control" id="inputZip">
		            </div>
		          </div>
		          <div class="form-group">
		            <div class="form-check">
		              <input class="form-check-input" type="checkbox" id="gridCheck">
		              <label class="form-check-label" for="gridCheck">
		                Check me out
		              </label>
		            </div>
		          </div>
		          <button type="submit" class="btn btn-primary">Sign in</button>
		        </form>
				
				
				
				
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary">确认订单</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		
		
		
		
		
		
		
		
		

		<!-- 导航条的设置 -->
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<!-- 固定容器 -->
			<div class="container">
				<a class="navbar-brand" href="#">您好!欢迎来到屌丝商城</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
					aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
					<div class="navbar-nav">
						<a class="nav-item nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
						<a class="nav-item nav-link" href="#">注册</a>
						<a class="nav-item nav-link" href="#">登录</a>
						<a class="nav-item nav-link disabled" href="#">我的购物车</a>
					</div>
				</div>
			</div>
		</nav>


		<!-- 利用栅格系统实现搜索区域,左侧列表,轮播图,热门书籍 -->
		<div class="container">
			<!-- 第一行  row  start-->
			<div class="row" style="margin-top: 10px;">
				<div class="col">
					<div class="jumbotron">
						<!-- 表单组件 -->
						<form action="" method="post">
							<div class="form-group">
								<!-- 输入框组 -->
								<div class="input-group mb-3">
									<input type="text" class="form-control" placeholder="书籍名"
										aria-label="Recipient's username" aria-describedby="button-addon2">
									<div class="input-group-append">
										<button class="btn btn-primary" type="button" id="button-addon2">搜索</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div><!-- 第一行row  end -->

			<!-- 第二行  左3右9 -->
			<div class="row">
				<div class="col-md-3 col-12">
					<!-- 列表组的核心样式  list-group -->
					<div class="accordion" id="accordionExample">
						<div class="card">
							<div class="card-header" id="headingOne">
								<h5 style="cursor: pointer;" class="mb-0 " data-toggle="collapse"
									data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
									书籍分类
								</h5>
							</div>

							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
								data-parent="#accordionExample">
								<div class="list-group">
									<button type="button" class="list-group-item list-group-item-action ">
										爱情
									</button>
									<button type="button" class="list-group-item list-group-item-action">恐怖</button>
									<button type="button"
										class="list-group-item list-group-item-action active">悬疑</button>
									<button type="button" class="list-group-item list-group-item-action">修鬼</button>
									<button type="button" class="list-group-item list-group-item-action">修鬼</button>
									<button type="button" class="list-group-item list-group-item-action">修鬼</button>
									<button type="button" class="list-group-item list-group-item-action">修鬼</button>
									<button type="button" class="list-group-item list-group-item-action">修鬼</button>
									<button type="button" class="list-group-item list-group-item-action"
										disabled>穿越</button>
								</div>
							</div>
						</div>

					</div>
					<!-- ---------------------------- -->
				</div>
				<div class="col-md-9 col-12">
					<!-- 购物车 -->
					<table class="table table-hover">
						<tr class="bg-primary text-white">
							<td><input type="checkbox">全选</td>
							<td>商品名称</td>
							<td>图片</td>
							<td>商品单价</td>
							<td>商品数量</td>
							<td>商品总价</td>
							<td>操作</td>
						</tr>
						<tr>
							<td><input type="checkbox"></td>
							<td>黄金手铐</td>
							<td><img src="img/bookList/1.png" alt=""></td>
							<td>&yen;999</td>
							<td>
								<div style="width: 100px;" class="input-group mb-3">
									<div class="input-group-append">
										<button class="btn btn-outline-secondary" type="button"
											id="button-addon2">-</button>
									</div>
									<input type="text" class="form-control" value="1"
										aria-label="Recipient's username" aria-describedby="button-addon2">
									<div class="input-group-append">
										<button class="btn btn-outline-secondary" type="button"
											id="button-addon2">+</button>
									</div>
								</div>
							</td>
							<td>&yen;999</td>
							<td>
								<button type="button" class="btn btn-danger">删除</button>
								<button type="button" class="btn btn-warning">修改</button>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox"></td>
							<td>黄金手铐</td>
							<td><img src="img/bookList/1.png" alt=""></td>
							<td>&yen;999</td>
							<td>
								<div style="width: 100px;" class="input-group mb-3">
									<div class="input-group-append">
										<button class="btn btn-outline-secondary" type="button"
											id="button-addon2">-</button>
									</div>
									<input type="text" class="form-control" value="1"
										aria-label="Recipient's username" aria-describedby="button-addon2">
									<div class="input-group-append">
										<button class="btn btn-outline-secondary" type="button"
											id="button-addon2">+</button>
									</div>
								</div>
							</td>
							<td>&yen;999</td>
							<td>
								<button type="button" class="btn btn-danger">删除</button>
								<button type="button" class="btn btn-warning">修改</button>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox"></td>
							<td>黄金手铐</td>
							<td><img src="img/bookList/1.png" alt=""></td>
							<td>&yen;999</td>
							<td>
								<div style="width: 100px;" class="input-group mb-3">
									<div class="input-group-append">
										<button class="btn btn-outline-secondary" type="button"
											id="button-addon2">-</button>
									</div>
									<input type="text" class="form-control" value="1"
										aria-label="Recipient's username" aria-describedby="button-addon2">
									<div class="input-group-append">
										<button class="btn btn-outline-secondary" type="button"
											id="button-addon2">+</button>
									</div>
								</div>
							</td>
							<td>&yen;999</td>
							<td>
								<button type="button" class="btn btn-danger">删除</button>
								<button type="button" class="btn btn-warning">修改</button>
							</td>
						</tr>
					</table>

					<p class="text-center">
						<button class="btn btn-danger  btn-outline-info">清空购物车</button>
						<button class="btn btn-success">继续购物</button>
						<button class="btn btn-warning" data-toggle = "modal" data-target = "#orderModal">立即结算</button>
					</p>



					<!-- 分页 -->
					<nav aria-label="Page navigation example">
						<ul class="pagination" style="padding-left: 40%;">
							<li class="page-item">
								<a class="page-link" href="#" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
									<span class="sr-only">Previous</span>
								</a>
							</li>
							<li class="page-item"><a class="page-link" href="#">1</a></li>
							<li class="page-item"><a class="page-link" href="#">2</a></li>
							<li class="page-item"><a class="page-link" href="#">3</a></li>
					  <li class="page-item">
								<a class="page-link" href="#" aria-label="Next">
									<span aria-hidden="true">&raquo;</span>
					    <span class="sr-only">Next</span>
								</a>
							</li>
						</ul>
					</nav>


				</div>
			</div>





			<!-- 第三行  版权信息 start -->
			<div class="row" style="margin: 20px 0px;border-top: 1px solid gainsboro;">
				<div class="col">
					<div class="text-center">&copy;所有版权信息归卓京教育所有</div>
				</div>
			</div>
			<!-- 第三行  版权信息  end-->

		</div>



	</body>
</html>

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小羊持续开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值