bootstrap媒体对象表格模态框图标分页

2024-03-13 09:20

本文主要是介绍bootstrap媒体对象表格模态框图标分页,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 案例介绍

案例一.搜索书籍页面

<!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">&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><!-- 第三行  版权信息 start<div class="row" style="margin: 0 auto; padding: 200px; margin-top: 10px;"><div class="col"><br><br><br><div class="text-center" >&copy;所有版权信息归卓京教育所有</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">&copy;所有版权信息归卓京教育所有</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">&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><!-- 大的固定容器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">&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></div><ul class="pagination"><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><!-- 大的固定容器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>

这篇关于bootstrap媒体对象表格模态框图标分页的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/804376

相关文章

在java中如何将inputStream对象转换为File对象(不生成本地文件)

《在java中如何将inputStream对象转换为File对象(不生成本地文件)》:本文主要介绍在java中如何将inputStream对象转换为File对象(不生成本地文件),具有很好的参考价... 目录需求说明问题解决总结需求说明在后端中通过POI生成Excel文件流,将输出流(outputStre

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

Mysql中深分页的五种常用方法整理

《Mysql中深分页的五种常用方法整理》在数据量非常大的情况下,深分页查询则变得很常见,这篇文章为大家整理了5个常用的方法,文中的示例代码讲解详细,大家可以根据自己的需求进行选择... 目录方案一:延迟关联 (Deferred Join)方案二:有序唯一键分页 (Cursor-based Paginatio

Java利用poi实现word表格转excel

《Java利用poi实现word表格转excel》这篇文章主要为大家详细介绍了Java如何利用poi实现word表格转excel,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、每行对象类需要针对不同的表格进行对应的创建。package org.example.wordToEx

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》:本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis

mybatis-plus分页无效问题解决

《mybatis-plus分页无效问题解决》本文主要介绍了mybatis-plus分页无效问题解决,原因是配置分页插件的版本问题,旧版本和新版本的MyBatis-Plus需要不同的分页配置,感兴趣的可... 昨天在做一www.chinasem.cn个新项目使用myBATis-plus分页一直失败,后来经过多方

C#原型模式之如何通过克隆对象来优化创建过程

《C#原型模式之如何通过克隆对象来优化创建过程》原型模式是一种创建型设计模式,通过克隆现有对象来创建新对象,避免重复的创建成本和复杂的初始化过程,它适用于对象创建过程复杂、需要大量相似对象或避免重复初... 目录什么是原型模式?原型模式的工作原理C#中如何实现原型模式?1. 定义原型接口2. 实现原型接口3

Java实现将byte[]转换为File对象

《Java实现将byte[]转换为File对象》这篇文章将通过一个简单的例子为大家演示Java如何实现byte[]转换为File对象,并将其上传到外部服务器,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言1. 问题背景2. 环境准备3. 实现步骤3.1 从 URL 获取图片字节数据3.2 将字节数组

Javascript访问Promise对象返回值的操作方法

《Javascript访问Promise对象返回值的操作方法》这篇文章介绍了如何在JavaScript中使用Promise对象来处理异步操作,通过使用fetch()方法和Promise对象,我们可以从... 目录在Javascript中,什么是Promise1- then() 链式操作2- 在之后的代码中使

MyBatis的配置对象Configuration作用及说明

《MyBatis的配置对象Configuration作用及说明》MyBatis的Configuration对象是MyBatis的核心配置对象,它包含了MyBatis运行时所需的几乎所有配置信息,这个对... 目录MyBATis配置对象Configuration作用Configuration 对象的主要作用C