<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstap css -->
<link rel="stylesheet" href="bootstrap-5.0.0-beta3-dist/css/">
<!-- Bootstap js -->
<script src="bootstrap-5.0.0-beta3-dist/js/"></script>
<title>首页</title>
<script src="js/jquery-3.3."></script>
</head>
<body>
<!-- 首页 -->
<!-- 包含一个页面中的东西 -->
<jsp:include page="">
<jsp:param value="index" name="type"/>
</jsp:include>
<!-- 轮播图 -->
<!-- 容器 container让我们在界面的东西都离边框有距离，不会完全贴着边框，更加美观好看-->
<!-- data-bs-target 操作对象 data-bs-interval 设置移动时间-->
<div class="container">
<div id="myCarousel" class="carousel slide mb-3" data-bs-ride="carousel" data-bs-interval="2000">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/" class="d-block w-100" >
<div class="carousel-caption d-none d-md-block">
<h5>520来袭</h5>
<p>带上心爱的人去看日落</p>
</div>
</div>
<div class="carousel-item">
<img src="images/" class="d-block w-100" >
<div class="carousel-caption d-none d-md-block">
<h5>商品大促销</h5>
<p>为庆祝51全场5折起</p>
</div>
</div>
<div class="carousel-item">
<img src="images/" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h5>u先试用</h5>
<p>新品上新等你来试用</p>
</div>
</div>
</div>
<!-- 左右按钮 -->
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- 根据相对应的查询商品 -->
<!-- class属性放一个row是让他们在一行，如果没有row那么显示个数在排序规则上面，会分成两行 -->
<div class="row">
<div class="col-3">
<div class="input-group mb-3">
<label class="input-group-text" for="rows">显示个数</label>
<select class="form-select" id="rows">
<option value="4">4</option>
<option value="8">8</option>
<option value="12">12</option>
</select>
</div>
</div>
<div class="col-3">
<div class="input-group mb-3">
<label class="input-group-text" for="rows">排序规则</label>
<select class="form-select" >
<option value="4">根据商品价格</option>
<option value="8">根据商品库存</option>
<option value="12">根据商品销量</option>
</select>
</div>
</div>
<!-- 商品展示 -->
<!-- col-md-3 一行被分为12格，该图片占3格 -->
<div class="col-3">
<div class="input-group mb-3">
<label class="input-group-text" for="rows">搜索商品</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<%--商品网格显示--%>
<div class="row">
<%--一行显示4个商品 每个card占用三格--%>
<div class="card col-md-3 mb-2">
<img src="images/" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">珍珠奶茶</h5>
<p class="card-text">羊屎奶茶</p>
<!-- 下面的按钮 -->
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">????</button>
<button type="button" class="btn btn-warning">????</button>
<button type="button" class="btn btn-danger">????</button>
</div>
</div>
</div>
<div class="card col-md-3 mb-2">
<img src="images/" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">珍珠奶茶</h5>
<p class="card-text">羊屎奶茶</p>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">????</button>
<button type="button" class="btn btn-warning">????</button>
<button type="button" class="btn btn-danger">????</button>
</div>
</div>
</div>
<div class="card col-md-3 mb-2">
<img src="images/" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">珍珠奶茶</h5>
<p class="card-text">羊屎奶茶</p>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">????</button>
<button type="button" class="btn btn-warning">????</button>
<button type="button" class="btn btn-danger">????</button>
</div>
</div>
</div>
<div class="card col-md-3 mb-2">
<img src="images/" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">珍珠奶茶</h5>
<p class="card-text">羊屎奶茶</p>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">????</button>
<button type="button" class="btn btn-warning">????</button>
<button type="button" class="btn btn-danger">????</button>
</div>
</div>
</div>
<div class="card col-md-3 mb-2">
<img src="images/" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">珍珠奶茶</h5>
<p class="card-text">羊屎奶茶</p>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">????</button>
<button type="button" class="btn btn-warning">????</button>
<button type="button" class="btn btn-danger">????</button>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</div>
</body>
</html>