媒体对象的使用
官网文档样式
案例：制作一个书籍显示简单类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>书籍商城首页</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<!-- css -->
<style type="text/css">
.navbar-collapse {
flex-grow: 0;
}
.form-group {
width: 320px;
margin: 0 auto;
}
.jumbotron {
margin-top: 15px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon,
.carousel-indicators li{
background-color: blue;
}
</style>
</head>
<body>
<!-- 导航条 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 栅格系统 -->
<div class="container">
<!-- 第一行 搜索区域 -->
<div class="row">
<div class="col">
<!-- 巨幕 -->
<div class="jumbotron">
<!-- 表单组件 -->
<form>
<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>
<!-- 第二行 -->
<div class="row">
<!-- 书籍分类 -->
<div class="col-md-3">
<!-- 折叠 -->
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
书籍分类
</button>
</h5>
</div>
<div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
data-parent="#accordionExample">
<!-- 列表组 -->
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 通过媒体对象实现书籍搜索 -->
<div class="col-md-9">
<!-- 媒体对象 -->
<!-- list-unstyled 去除列表符号 style = "list-style:none" -->
<ul class="list-unstyled">
<li class="media" >
<img class="mr-3 align-self-center" src="img/书籍图片/1.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">阿勇的风流史</h5>
<p>作者：杨帆</p>
<p>价格：9909</p>
<p>出版社：清华出版社</p>
<p> 书籍简介:好看真的好看,不可能买的</p>
<p>
<button style="width: 120px;" class="btn btn-success">加入购物车</button>
<button style="width: 120px;" class="btn btn-danger">去结算</button>
</p>
</div>
</li>
<hr>
<li class="media">
<img class="mr-3 align-self-center" src="img/书籍图片/1.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">阿勇的风流史</h5>
<p>作者：杨帆</p>
<p>价格：9909</p>
<p>出版社：清华出版社</p>
<p> 书籍简介:好看真的好看,不可能买的</p>
<p>
<button style="width: 120px;" class="btn btn-success">加入购物车</button>
<button style="width: 120px;" class="btn btn-danger">去结算</button>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
制作效果
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.css" />
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jqPaginator.min.js"></script>
<style>
/* 把导航栏 移动到右边 */
.navbar-collapse {
flex-grow: 0;
}
/* 设置图片大小 轮播图*/
.carousel-inner img {
width: 100%;
height: 250px;
}
/* 修改一下轮播图小空间 切换按钮 的背景 */
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: blue;
}
/* 小空间 轮播图 下方的切换效果 设置背景 */
.carousel-indicators li {
background-color: blue;
}
#btnn button{
width: 100px;
margin-top: 15px;
}
/* 表格数据垂直居中显示 */
.table tr td,.table tr th{
vertical-align: middle;
}
#but_wa button{
width: 120px;
}
</style>
<script>
function loadData(num) {
console.log(num)
}
</script>
</head>
<body>
<!-- 导航栏 -->
<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="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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">
<a class="nav-link" href="#">注册</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">我的购物车</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!-- 栅格系统 加巨幕设置搜索样式 -->
<div class="row">
<div class="col-12">
<!--jumbotron 巨幕 -->
<div class="jumbotron bg-info mx-3" style="margin-top: 10px; height: 150px; ">
<div class="container">
<div class="form-group" style="width: 350px; margin: 0 auto ;">
<div class="input-group mb-3 ">
<input type="text" class="form-control" placeholder="Recipient's username"
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>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- 折叠效果 -->
<button class="btn btn-primary" style="width: 100%;" type="button" data-toggle="collapse"
data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
书籍分类
</button>
<!-- 默认展示collapse show 默认不显示collapse -->
<div class="collapse show" id="collapseExample">
<!--列表组 显示 -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">文艺</a>
<a href="#" class="list-group-item list-group-item-action">小说</a>
<a href="#" class="list-group-item list-group-item-action">青春</a>
<a href="#" class="list-group-item list-group-item-action">童书</a>
<a href="#" class="list-group-item list-group-item-action">励志</a>
<a href="#" class="list-group-item list-group-item-action">生活</a>
<a href="#" class="list-group-item list-group-item-action">人文社科</a>
<a href="#" class="list-group-item list-group-item-action">经营</a>
<a href="#" class="list-group-item list-group-item-action">科技</a>
<a href="#" class="list-group-item list-group-item-action">青春</a>
<a href="#" class="list-group-item list-group-item-action">爱情</a>
<a href="#" class="list-group-item list-group-item-action">教育</a>
</div>
</div>
</div>
<div class="col-md-9" style="margin: 0 auto; width: 100%;">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col">
<table class="table table-hover">
<thead>
<tr class="bg-primary">
<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>
<tr>
<th scope="row"><input type="checkbox" name="" id="" value="" /></th>
<td>小明数据</td>
<td>
<img src="img/书籍图片/2.png" />
</td>
<td><label>￥</label><label>100</label></td>
<td>
<div class="input-group mb-12 col-sm-12 col-4">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">+</button>
</div>
<input style="width: 40px; height: 40px;" value="1" type="text" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">-</button>
</div>
</div>
</td>
<td><label>￥</label><label>100</label></td>
<td>
<button type="button" class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<th scope="row"><input type="checkbox" name="" id="" value="" /></th>
<td>小明数据</td>
<td>
<img src="img/书籍图片/2.png" />
</td>
<td><label>￥</label><label>100</label></td>
<td>
<div class="input-group mb-12 col-sm-12 col-4">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">+</button>
</div>
<input style="width: 40px; height: 40px;" value="1" type="text" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">-</button>
</div>
</div>
</td>
<td><label>￥</label><label>100</label></td>
<td>
<button type="button" class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<th scope="row"><input type="checkbox" name="" id="" value="" /></th>
<td>小明数据</td>
<td>
<img src="img/书籍图片/2.png" />
</td>
<td><label>￥</label><label>100</label></td>
<td>
<div class="input-group mb-12 col-sm-12 col-4">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">+</button>
</div>
<input style="width: 40px; height: 40px;" value="1" type="text" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">-</button>
</div>
</div>
</td>
<td><label>￥</label><label>100</label></td>
<td>
<button type="button" class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center; margin-top: 10px;" id="but_wa">
<button type="button" class="btn btn-warning">清空购物车</button>
<button type="button" class="btn btn-success">继续购物</button>
<-- data-toggle="modal" data-target="#exampleModalCenter" data-toggle 控制的是模态框 data-target="#exampleModalCenter" 表明模态框 根据id -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalCenter">去结算</button>
</p>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div id="col-12" style="margin: 0 auto; ">
<ul class="pagination" id="pagination" style="margin: 0 auto;">
</ul>
<input type="hidden" id="PageCount" runat="server" value="100"/>
<input type="hidden" id="PageSize" runat="server" value="4" />
<input type="hidden" id="countindex" runat="server" value="10"/>
<!--设置最多显示的页码数 可以手动设置 默认为7-->
<input type="hidden" id="visiblePages" runat="server" value="4" />
</div>
</div>
<!-- 第三行 -->
<!-- 作用：版权信息 -->
<div class="row" style="background-color: khaki; margin-top: 10px;">
<div class="col-12">
©所有版权归zking所有
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<!-- bd-example-modal-lg modal-dialog modal-lg 调节模态框大小 xl最大-->
<div class="modal fade bd-example-modal-lg" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog 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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">确认订单</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#but_wa").children().eq(2).click(function(){
$("#exampleModalCenter").modal({
//指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
backdrop:'static',
// 当按下 esc 键时关闭模态框，设置为 false 时则按键无效。
keyboard:true
//remote:'demo.html'
});
});
});
</script>
<!-- 引入分页 js -->
<script src="js/myPage.js" type="text/javascript"></script>
</body>
</html>
购物车样式演示
模态框样式
分页插件 请跳转
扫一扫
967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
