目录
2.模态框的代码最好是直接作为body的子元素，而不是后代元素
模态框 类似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">×</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>¥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>¥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>¥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>¥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>¥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>¥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">«</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">»</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">©所有版权信息归卓京教育所有</div>
</div>
</div>
<!-- 第三行 版权信息 end-->
</div>
</body>
</html>
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
