bootstrap网页排版的优化

最新推荐文章于 2024-08-11 17:16:49 发布

筱☆

最新推荐文章于 2024-08-11 17:16:49 发布

阅读量727

点赞数 2

分类专栏： bootstrap 文章标签： bootstrap javascript html

本文链接：https://blog.csdn.net/weixin_67235801/article/details/124692947

版权

今天是针对于上一次的网页排版进行优化，在界面上增加了一些组件，这些组件都是可以在bootstrap中找到的。不知道上期写了什么的话，可以点击下面的链接看上期的内容。

使用bootstrap排版_筱X的博客-CSDN博客bootstrap的使用以及主界面和增加界面的制作https://blog.csdn.net/weixin_67235801/article/details/124639348?spm=1001.2014.3001.5501

一、优化的部分

1.点击商品增加直接弹出增加界面，页面不进行跳转

2.点击登录从左侧弹出菜单

3.点击购物车从左侧弹出购物车，可直接在首页查看购物车的物品

二、目录展示

三、代码展示

主页面：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;
	height: 350px;
	background: no-repeat center/cover;
}

.carousel-caption {
	color: white !important;
}
</style>
</head>
<body>
	<!-- 导航栏 -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
		<div class="container-fluid">
			<a class="navbar-brand" href="index.html"> 天天商城 </a>
			<div class="collapse navbar-collapse" id="navbarNav">
				<ul class="navbar-nav">
					<li class="nav-item">
						<button class="nav-link btn btn-primary" data-bs-toggle="modal"
							data-bs-target="#exampleModal">商品添加</button>
					</li>
					<li class="nav-item dropdown">
						<button class="nav-link dropdown-toggle btn btn-primary"
							id="navbarDropdown" data-bs-toggle="dropdown">我的</button>
						<ul class="dropdown-menu">
							<li><a class="dropdown-item" data-bs-toggle="offcanvas"
								href="#loginCanvas">登录</a></li>
							<li><a class="dropdown-item" data-bs-toggle="offcanvas"
								href="#carCanvas">购物车</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<button class="navbar-toggler" type="button"
				data-bs-toggle="collapse" data-bs-target="#navbarNav">
				<span class="navbar-toggler-icon"></span>
			</button>
		</div>
	</nav>
	<%--容器--%>
	<div class="container">
		<%--轮播图--%>
		<div id="goodsCarousel" class="carousel carousel-dark slide mb-5"
			data-bs-ride="carousel" data-bs-interval="1500">
			<div class="carousel-indicators">
				<button type="button" data-bs-target="#goodsCarousel"
					data-bs-slide-to="0" class="active"></button>
				<button type="button" data-bs-target="#goodsCarousel"
					data-bs-slide-to="1"></button>
				<button type="button" data-bs-target="#goodsCarousel"
					data-bs-slide-to="2"></button>
			</div>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="images/1.jpg" class="d-block w-100">
					<div class="carousel-caption d-none d-md-block">
						<h1>欲购从速</h1>
						<p>Some representative placeholder content for the third
							slide.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="images/2.jpg" class="d-block w-100">
					<div class="carousel-caption d-none d-md-block">
						<h1>欲购从速</h1>
						<p>Some representative placeholder content for the third
							slide.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="images/3.jpg" class="d-block w-100">
					<div class="carousel-caption d-none d-md-block">
						<h1>欲购从速</h1>
						<p>Some representative pl