上期讲了什么是Bootstrap，可以回顾一下哦(*╹▽╹*)
Web开发之【Ajax】【Bootsrtap】省市联动与无刷新分页_小阿飞_的博客-CSDN博客你会做省市联动和无刷新分页功能吗😊/yifei_345678/article/details/124521110?spm=1001..3001.5501
今天使用Bootstrap做了一个网页的主界面和增加界面
老规矩
先导入Bootstrap的js与css
并且在项目中编写导入语句
这是这次web项目所用到的文件
* 图片可以自己选择一些复制进去
对应的代码
top.jsp代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head><title>Title</title></head><body><%--导航栏--%><nav class="navbar navbar-dark bg-primary mb-2"><div class="container-fluid"><a class="navbar-brand" href="#">天天商城</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#linkText"aria-controls="navbarText" aria-expanded="false"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="linkText"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link" href="index.jsp" id="index">首页</a></li><li class="nav-item"><a class="nav-link" href="insert.jsp" id="insert">增加商品</a></li></ul><script>$("#<%=request.getParameter("type")%>").addClass("active")</script></div></div></nav></body></html>
index.jsp网页主界面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><script src="js/jquery-3.3.1.js"></script><link rel="stylesheet" href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css"><script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script><style>.carousel-item img{height: 350px;}</style></head><body><jsp:include page="component/top.jsp"><jsp:param name="type" value="index"/></jsp:include><%--容器--%><div class="container"><%--轮播图--%><div id="myCarousel" class="carousel slide mb-3" data-bs-ride="carousel" data-bs-interval="1000"><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/t1.jpg" class="d-block w-100" alt="..."><div class="carousel-caption d-none d-md-block"><h5>First slide label</h5><p>Some representative placeholder content for the first slide.</p></div></div><div class="carousel-item"><img src="images/t2.jpg" class="d-block w-100" alt="..."><div class="carousel-caption d-none d-md-block"><h5>First slide label</h5><p>Some representative placeholder content for the first slide.</p></div></div><div class="carousel-item"><img src="images/t3.jpg" class="d-block w-100" alt="..."><div class="carousel-caption d-none d-md-block"><h5>First slide label</h5><p>Some representative placeholder content for the first slide.</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><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><div class="col-3"><div class="input-group mb-3"><label class="input-group-text" for="rows">搜索商品</label><input placeholder="请输入商品信息" type="text" class="form-control"></div></div></div><%--商品网格显示--%><div class="row"><%--一行显示4个商品 每个card占用三格--%><div class="card col-md-3 mb-2"><img src="images/23.jpeg" 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/23.jpeg" 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/23.jpeg" 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/23.jpeg" 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/23.jpeg" 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/23.jpeg" 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/23.jpeg" 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/23.jpeg" 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>
index.jsp网页主界面效果图：
蓝色导航栏下面的是轮播图，可以自动切换图片
点击蓝色导航栏右侧的三条杠可以打开菜单
点击增加商品就可以跳到增加界面
insert.jsp网页增加界面展示
insert.jsp网页增加代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><script src="js/jquery-3.3.1.js"></script><link rel="stylesheet" href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css"><script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script></head><body><jsp:include page="component/top.jsp"><jsp:param name="type" value="insert"/></jsp:include><form action="" class="container"><div class="mb-3"><label for="name" class="form-label">商品名称</label><input type="text" class="form-control" id="name" placeholder="请输入商品的名称"></div><div class="mb-3"><label for="topic" class="form-label">商品类别</label><select id="topic" class="form-select"><option value="1">服装</option><option value="2">家具</option><option value="3">家电</option></select></div><div class="mb-3"><label for="price" class="form-label">商品价格: $<span>500</span></label><input type="range" value="500" min="1" max="1000" class="form-range" id="price"></div><div class="mb-3"><label for="stock" class="form-label">商品库存: <span>250</span>件</label><input type="range" value="250" min="1" max="500" class="form-range" id="stock"></div><div class="mb-3"><label for="cover" class="form-label">商品封面</label><input type="file" class="form-control" id="cover" placeholder="请输入商品的名称"></div><div class="mb-3"><label for="describe" class="form-label">商品描述</label><textarea placeholder="请输入商品描述" class="form-control" id="describe" rows="3"></textarea></div><div class="form-check form-switch mb-3"><input class="form-check-input" type="checkbox" role="switch" id="disabled"><label class="form-check-label" for="disabled">当前商品是否上架</label></div><div class="mb-3"><button type="submit" class="btn btn-primary">增加</button><button type="reset" class="btn btn-danger">重置</button></div></form><script>$("#price,#stock").mousemove(function () {$(this) //标签自己.parent() //父元素.find("span") //找span.text($(this).val())})</script></body></html>
🗨总结：这里面的很多样式和排盘都是来自Bootstrap第五代官网，但是对于排界面来说，还得要学会自己在Bootstrap中的代码基础上进行整改，这样才能排出令人满意的web界面，今天的内容就到这里了，感兴趣的就动起手来，去排一个属于自己的web界面叭😊
感 谢 阅 读
