BootStrap.页面优化

最新推荐文章于 2025-04-23 22:33:09 发布

原创

最新推荐文章于 2025-04-23 22:33:09 发布

· 735 阅读

10 ·

版权

文章标签：

#html #前端 #BootStrap

本文将BootStrap的页面元素整合到一个主页面上，包括导航栏、商品增加、登录和购物车功能，并实现了点击不同商品类型刷新显示新商品的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：上一篇文章写了一个简单的商城页面和商品增加页面，这一篇文章我会把功能写在一个页面上，除此之外我还写了一点其他的功能，代码不多嘿嘿( •̀ ω •́ )。

主页面代码（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 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 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 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>
			<button class="carousel-control-prev" type="button"
				data-bs-target="#goodsCarousel" data-bs-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Previous</span>
			</button>
			<button class="carousel-control-next" type="button"
				data-bs-target="#goodsCarousel" data-bs-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Next</span>
			</button>
		</div>
		<div class="row">
			<div class="col-md-2">
				<div class="list-group">
					<a href="#" class="list-group-item list-group-item-action active">
						The current link item </a> 
						<a href="#"
						class="list-group-item list-group-item-action">A second link
						item</a> 
						<a href="#" class="list-group-item list-group-item-action">A
						third link item</a> 
						<a href="#"
						class="list-group-item list-group-item-action">A fourth link
						item</a>
				</div>
			</div>
			<div class="row col-md-10">
				<ul class="nav nav-tabs mb-3" id="myTab">
					<li class="nav-item">
						<button class="nav-link active" id="home-tab" data-bs-toggle="tab"
							data-bs-target="#home" type="button">秒杀商品</button>
					</li>
					<li class="nav-item">
						<button class="nav-link" id="profile-tab" data-bs-toggle="tab"
							data-bs-target="#profile" type="button">热销商品</button>
					</li>
					<li class="nav-item">
						<b

最低0.47元/天解锁文章