案例介绍
案例一.搜索书籍页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<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">
a:hover{
background-color: white;
color: #0056B3;
}
.carousel-control-prev-icon{
background-color: #007BFF;
}
.carousel-control-next-icon{
background-color: #007BFF;
}
p:hover{
color: #007BFF;
}
h5:hover{
color: #17A2B8;
}
#xssj{
background-image:url(img/title_bj.png) ;
height: 30px;
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
border: 2px #7ABAFF solid;
background-color: #F7F6F6;
color: whitesmoke;
padding-left: 20px;
line-height: 30px;
}
#rmsj{
background-image:url(img/title_bj.png) ;
height: 30px;
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
border: 2px #7ABAFF solid;
background-color: #F7F6F6;
color: whitesmoke;
padding-left: 20px;
line-height: 30px;
}
</style>
</head>
<body>
<!-- 都需要包裹在一个container固定容器中 -->
<div class="container" style=" padding-left: 200px;">
<!-- 第一行 --------------------------------------------------------------------- -->
<div class="row" style="margin-top:10px;">
<!-- nav导航... -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">欢迎来到我的图书世界</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">登录 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">注册</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
首页
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">购物车</a>
<a class="dropdown-item" href="#">分类</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">个人中心</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">退出</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="书籍名称或作者姓名" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>
</div>
</nav>
<!-- 第二行.3分类 --------------------------------------------------------------------- -->
<div class="row"style="margin-top:10px;">
<!-- 背景颜色 -->
<div class="col-md-3 col-12" style="background-color: wheat; width: 400px;">
分类
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
书籍分类
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
科幻
</div>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
搞得好呀
</button>
<button type="button" class="list-group-item list-group-item-action">真的C</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 class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
没有分类
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
婚礼
</div>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
搞得不好呢
</button>
<button type="button" class="list-group-item list-group-item-action">真的C</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 class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
<!-- 背景颜色 -->
<!-- 第二行.9，商城首页的书籍搜索页 -->
<div class="col-md-9 col-12"style="background-color: #005CBF; width: 400px;">
<ul class="list-unstyled">
<li class="media">
<img class="mr-3 align-self-center" src="img/tpsj/1.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">我的世界</h5>
<p>作者：阿阿斯顿</p>
<p>价格：111</p>
<p>出版社：中华人民出版社</p>
<p>简介：真的C</p>
<button style="width: 130px;" type="button" class=" btn btn-outline-danger">加入购物车</button>
<button style="width: 130px;" type="button" class=" btn btn-outline-warning">结算</button>
</div>
</li>
<hr >
<li class="media my-4">
<img class="mr-3 align-self-center" src="img/tpsj/2.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">孔融让梨</h5>
<p>作者：阿斯顿</p>
<p>价格：222</p>
<p>出版社：中华出版社</p>
<p>简介：真的是C</p>
<button style="width: 130px;" type="button" class=" btn btn-outline-danger">加入购物车</button>
<button style="width: 130px;" type="button" class=" btn btn-outline-warning">结算</button>
</div>
</li>
<hr >
<li class="media">
<img class="mr-3 align-self-center" src="img/tpsj/3.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">好看看看</h5>
<p>作者：萨达</p>
<p>价格：333</p>
<p>出版社：kk出版社</p>
<p>简介：完结</p>
<button style="width: 130px;" type="button" class=" btn btn-outline-danger">加入购物车</button>
<button style="width: 130px;" type="button" class=" btn btn-outline-warning">结算</button>
</div>
</li>
</ul>
</div>
<!-- 分页 -->
<nav aria-label="Page navigation example" style="margin-left: 400px; margin-top: 20px;">
<ul class="pagination">
<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>
<!-- 第三行 版权信息 start
<div class="row" style="margin: 0 auto; padding: 200px; margin-top: 10px;">
<div class="col">
<br><br><br>
<div class="text-center" >©所有版权信息归卓京教育所有</div>
</div>
</div> -->
</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>
<!-- 大的固定容器div -->
</div>
</body>
</html>案例二.购物车页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<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">
a:hover{
background-color: white;
color: #0056B3;
}
.carousel-control-prev-icon{
background-color: #007BFF;
}
.carousel-control-next-icon{
background-color: #007BFF;
}
p:hover{
color: #007BFF;
}
h5:hover{
color: #17A2B8;
}
#xssj{
background-image:url(img/title_bj.png) ;
height: 30px;
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
border: 2px #7ABAFF solid;
background-color: #F7F6F6;
color: whitesmoke;
padding-left: 20px;
line-height: 30px;
}
#rmsj{
background-image:url(img/title_bj.png) ;
height: 30px;
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
border: 2px #7ABAFF solid;
background-color: #F7F6F6;
color: whitesmoke;
padding-left: 20px;
line-height: 30px;
}
/* 设置表格字体垂直居中 */
.table tr td{
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<!-- 都需要包裹在一个container固定容器中 -->
<div class="container" style=" padding-left: 200px;">
<!-- 第一行 --------------------------------------------------------------------- -->
<div class="row" style="margin-top:10px;">
<!-- nav导航... -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">欢迎来到我的图书世界</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">登录 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">注册</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
首页
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">购物车</a>
<a class="dropdown-item" href="#">分类</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">个人中心</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">退出</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="书籍名称或作者姓名" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>
</div>
</nav>
<!-- 第二行.3分类 --------------------------------------------------------------------- -->
<div class="row"style="margin-top:10px;">
<!-- 背景颜色 -->
<div class="col-md-3 col-12" style="background-color: wheat; width: 400px;">
分类
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
书籍分类
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
科幻
</div>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
搞得好呀
</button>
<button type="button" class="list-group-item list-group-item-action">真的C</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 class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
没有分类
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
婚礼
</div>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
搞得不好呢
</button>
<button type="button" class="list-group-item list-group-item-action">真的C</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 class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
<!-- 背景颜色 -->
<!-- 第二行.9，商城首页的书籍搜索页 -->
<div class="col-md-9 col-12"style="background-color: #005CBF; width: 400px;">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col"><input type="checkbox" name="" id="" value="" /></th>
<th scope="col">商品名称</th>
<th scope="col">商品图片</th>
<th scope="col">商品单价</th>
<th scope="col">商品数量</th>
<th scope="col">商品总价</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<!-- table-dark:给表格属性设置对应的颜色 -->
<!-- table-bordered:给表格属性设置有边框线 （带边框）-->
<tr style="text-align: center; line-height: 20px;">
<th scope="row" class="hidden-xs"><input type="checkbox" name="" id="" value="" /></th>
<td class="table-bordered">阿达</td>
<td><img src="img/tpsj/3.png" ></td>
<td >111</td>
<td class="table-dark">6</td>
<td class="table-active table-primary">666</td>
<td>
<button type="button" class="btn-outline-primary">删除</button>
<button type="button" class="btn-outline-secondary">修改</button>
</td>
</tr>
<tr>
<th scope="row"><input type="checkbox" name="" id="" value="" /></th>
<td>阿达</td>
<td><img src="img/tpsj/3.png" ></td>
<td>111</td>
<td>6</td>
<td>666</td>
<td>
<button type="button" class="btn-outline-primary">删除</button>
<button type="button" class="btn-outline-secondary">修改</button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- div class="text-center">
<button type="button" class="btn-outline-primary">清空购物车</button>
<button type="button" class="btn-outline-info">继续购物</button>
<button type="button" class="btn-outline-success">立即结算</button>
</div> -->
<!-- 分页 -->
<nav aria-label="Page navigation example" style="margin-left: 400px; margin-top: 20px;">
<div class="text-center" style="margin-bottom: 20px; margin-right: 400px;">
<button type="button" class="btn-outline-primary">清空购物车</button>
<button type="button" class="btn-outline-info">继续购物</button>
<button type="button" class="btn-outline-success">立即结算</button>
</div>
<ul class="pagination">
<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>
<!-- 大的固定容器div -->
</div>
</body>
</html>案例三.购物车订单信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<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">
a:hover{
background-color: white;
color: #0056B3;
}
.carousel-control-prev-icon{
background-color: #007BFF;
}
.carousel-control-next-icon{
background-color: #007BFF;
}
p:hover{
color: #007BFF;
}
h5:hover{
color: #17A2B8;
}
#xssj{
background-image:url(img/title_bj.png) ;
height: 30px;
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
border: 2px #7ABAFF solid;
background-color: #F7F6F6;
color: whitesmoke;
padding-left: 20px;
line-height: 30px;
}
#rmsj{
background-image:url(img/title_bj.png) ;
height: 30px;
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
border: 2px #7ABAFF solid;
background-color: #F7F6F6;
color: whitesmoke;
padding-left: 20px;
line-height: 30px;
}
/* 设置表格字体垂直居中 */
.table tr td{
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<!-- 都需要包裹在一个container固定容器中 -->
<div class="container" style=" padding-left: 200px;">
<!-- 第一行 --------------------------------------------------------------------- -->
<div class="row" style="margin-top:10px;">
<!-- nav导航... -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">欢迎来到我的图书世界</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">登录 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">注册</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
首页
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">购物车</a>
<a class="dropdown-item" href="#">分类</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">个人中心</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">退出</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="书籍名称或作者姓名" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>
</div>
</nav>
<!-- 第二行.3分类 --------------------------------------------------------------------- -->
<div class="row"style="margin-top:10px;">
<!-- 背景颜色 -->
<div class="col-md-3 col-12" style="background-color: wheat; width: 400px;">
分类
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
书籍分类
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
科幻
</div>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
搞得好呀
</button>
<button type="button" class="list-group-item list-group-item-action">真的C</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 class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
没有分类
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
婚礼
</div>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
搞得不好呢
</button>
<button type="button" class="list-group-item list-group-item-action">真的C</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 class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
<!-- 背景颜色 -->
<!-- 第二行.9，商城首页的书籍搜索页 -->
<div class="col-md-9 col-12"style="background-color: #005CBF; width: 400px;">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col"><input type="checkbox" name="" id="" value="" /></th>
<th scope="col">商品名称</th>
<th scope="col">商品图片</th>
<th scope="col">商品单价</th>
<th scope="col">商品数量</th>
<th scope="col">商品总价</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<!-- table-dark:给表格属性设置对应的颜色 -->
<!-- table-bordered:给表格属性设置有边框线 （带边框）-->
<tr style="text-align: center; line-height: 20px;">
<th scope="row" class="hidden-xs"><input type="checkbox" name="" id="" value="" /></th>
<td class="table-bordered">阿达</td>
<td><img src="img/tpsj/3.png" ></td>
<td >111</td>
<td class="table-dark">6</td>
<td class="table-active table-primary">666</td>
<td>
<button type="button" class="btn-outline-primary">删除</button>
<button type="button" class="btn-outline-secondary">修改</button>
</td>
</tr>
<tr>
<th scope="row"><input type="checkbox" name="" id="" value="" /></th>
<td>阿达</td>
<td><img src="img/tpsj/3.png" ></td>
<td>111</td>
<td>6</td>
<td>666</td>
<td>
<button type="button" class="btn-outline-primary">删除</button>
<button type="button" class="btn-outline-secondary">修改</button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- div class="text-center">
<button type="button" class="btn-outline-primary">清空购物车</button>
<button type="button" class="btn-outline-info">继续购物</button>
<button type="button" class="btn-outline-success">立即结算</button>
</div> -->
<!-- 分页 -->
<nav aria-label="Page navigation example" style="margin-left: 400px; margin-top: 20px;">
<div class="text-center" style="margin-bottom: 20px; margin-right: 400px;">
<button type="button" class="btn-outline-primary"style="border-radius: 5px;">清空购物车</button>
<button type="button" class="btn-outline-info" style="border-radius: 5px;">继续购物</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModalCenter">
立即结算
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">结算页</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>
</div>
<ul class="pagination">
<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>
<!-- 大的固定容器div -->
</div>
</body>
</html>案例四.图标的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<svg class="bi bi-wifi" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.858 11.858A1.991 1.991 0 0 1 8 11.5c.425 0 .818.132 1.142.358L8 13l-1.142-1.142z"/>
<path fill-rule="evenodd" d="M7.731 12.024l.269.269.269-.269a1.507 1.507 0 0 0-.538 0zm-1.159-.576A2.49 2.49 0 0 1 8 11c.53 0 1.023.165 1.428.448a.5.5 0 0 1 .068.763l-1.142 1.143a.5.5 0 0 1-.708 0L6.504 12.21a.5.5 0 0 1 .354-.853v.5l-.286-.41zM8 9.5a4.478 4.478 0 0 0-2.7.9.5.5 0 0 1-.6-.8c.919-.69 2.062-1.1 3.3-1.1s2.381.41 3.3 1.1a.5.5 0 0 1-.6.8A4.478 4.478 0 0 0 8 9.5zm0-3c-1.833 0-3.51.657-4.814 1.748a.5.5 0 0 1-.642-.766A8.468 8.468 0 0 1 8 5.5c2.076 0 3.98.745 5.456 1.982a.5.5 0 1 1-.642.766A7.468 7.468 0 0 0 8 6.5z"/>
<path fill-rule="evenodd" d="M8 3.5c-2.657 0-5.082.986-6.932 2.613a.5.5 0 1 1-.66-.75A11.458 11.458 0 0 1 8 2.5c2.91 0 5.567 1.081 7.592 2.862a.5.5 0 1 1-.66.751A10.458 10.458 0 0 0 8 3.5z"/>
</svg>
<svg class="bi bi-watch" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 14.333v-1.86A5.985 5.985 0 0 1 2 8c0-1.777.772-3.374 2-4.472V1.667C4 .747 4.746 0 5.667 0h4.666C11.253 0 12 .746 12 1.667v1.86A5.985 5.985 0 0 1 14 8a5.985 5.985 0 0 1-2 4.472v1.861c0 .92-.746 1.667-1.667 1.667H5.667C4.747 16 4 15.254 4 14.333zM13 8A5 5 0 1 0 3 8a5 5 0 0 0 10 0z"/>
<rect width="1" height="2" x="13.5" y="7" rx=".5"/>
<path fill-rule="evenodd" d="M8 4.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H6a.5.5 0 0 1 0-1h1.5V5a.5.5 0 0 1 .5-.5z"/>
</svg>
</body>
</html>
扫一扫
709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
