boorstrap v5轮播图

<!doctype html>
<html lang="zh-CN">
	<head>
		<!-- 必须的 meta 标签 -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- Bootstrap 的 CSS 文件 -->
		<link href="./css/bootstrap.min.css" rel="stylesheet"">

    <title>京东超市</title>
  </head>
  <body>
	
<nav class=" navbar navbar-expand-lg navbar-light " style=" background-color: #e3f2fd;">
		<div class="container-fluid">
			<a class="navbar-brand" href="demo.html">京东超市</a>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
				data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
					<li class="nav-item">
						<a class="nav-link active" aria-current="page" href="index.html">我的订单</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="document.html">我的京东</a>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="download.html" id="navbarDropdown" role="button"
							data-bs-toggle="dropdown" aria-expanded="false">
							网站导航
						</a>
						<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
							<li><a class="dropdown-item" href="#">Action</a></li>
							<li><a class="dropdown-item" href="#">Another action</a></li>
							<li>
								<hr class="dropdown-divider">
							</li>
							<li><a class="dropdown-item" href="#">Something else here</a></li>
						</ul>
					</li>
					<form class="d-flex" role="search">
						<input class="me-2" type="search" placeholder="搜索您的商品" aria-label="search">
						<button class="btn btn-outline-success" type="submit">搜索</button>
					</form>
				</ul>
				<a href="" class=" stye-black">你好,请登录</a>&nbsp;&nbsp;<a href="" class=" style-red">免费注册</a>
			</div>
		</div>
		</nav>



		<div class="container-fluid">
			<div class="row">

				<div class="col-md-2 ">

					<div class="accordion" id="accordionPanelsStayOpenExample">
						<div class="accordion-item">
							<h2 class="accordion-header" id="panelsStayOpen-headingOne">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
									data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false"
									aria-controls="panelsStayOpen-collapseOne">
									食品饮料
								</button>
							</h2>
							<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse "
								aria-labelledby="panelsStayOpen-headingOne">
								<div class="accordion-body">
									<strong>进口食品</strong>休闲零食/饼干/蛋糕/橄榄油/坚果/蜜饯/糖果/巧克力进口牛奶方便食品饮料冲调<br>
									<strong>茗茶</strong>铁观音/乌龙茶/龙井/普洱/红茶/绿茶/白茶/黑茶/养生茶/花果茶/花草茶<br>
									<strong>饮料/水</strong>饮用水/碳酸水/中草药饮料/功能类运动类/茶饮/蛋白质类/果蔬类/果味类<br>
								</div>
							</div>
						</div>
						<div class="accordion-item">
							<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
									data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
									aria-controls="panelsStayOpen-collapseTwo">
									粮油副食
								</button>
							</h2>
							<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
								aria-labelledby="panelsStayOpen-headingTwo">
								<div class="accordion-body">
									<strong>食用油</strong>花生油/调和油/玉米油/葵花籽油/大豆油/菜籽油<br>
									<strong>方便速食</strong>方便面/方便米饭/火腿肠/罐头/八宝粥/速食汤粥<br>
									<strong>健康杂粮</strong>小米/红小豆/黄豆/薏仁米/绿豆/黑米/糯米/黑芝麻<br>

								</div>
							</div>
						</div>
						<div class="accordion-item">
							<h2 class="accordion-header" id="panelsStayOpen-headingThree">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
									data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
									aria-controls="panelsStayOpen-collapseThree">
									个人护理
								</button>
							</h2>
							<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
								aria-labelledby="panelsStayOpen-headingThree">
								<div class="accordion-body">
									<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
									<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
									<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
								</div>
							</div>
						</div>
						<div class="accordion-item">
							<h2 class="accordion-header" id="panelsStayOpen-headingFour">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
									data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="false"
									aria-controls="panelsStayOpen-collapseFour">
									护肤美妆
								</button>
							</h2>
							<div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse"
								aria-labelledby="panelsStayOpen-headingFour">
								<div class="accordion-body">
									<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
									<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
									<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
								</div>
							</div>
						</div>
						<div class="accordion-item">
							<h2 class="accordion-header" id="panelsStayOpen-headingFive">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
									data-bs-target="#panelsStayOpen-collapseFive" aria-expanded="false"
									aria-controls="panelsStayOpen-collapseFive">
									家居清洁
								</button>
							</h2>
							<div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse"
								aria-labelledby="panelsStayOpen-headingFive">
								<div class="accordion-body">
									<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
									<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
									<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
								</div>
							</div>
						</div>
						<div class="accordion-item">
							<h2 class="accordion-header" id="panelsStayOpen-headingSix">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
									data-bs-target="#panelsStayOpen-collapseSix" aria-expanded="false"
									aria-controls="panelsStayOpen-collapseSix">
									母婴用品
								</button>
							</h2>
							<div id="panelsStayOpen-collapseSix" class="accordion-collapse collapse"
								aria-labelledby="panelsStayOpen-headingSix">
								<div class="accordion-body">
									<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
									<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
									<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
								</div>
							</div>
						</div>
						<div class="accordion-item">
							<h2 class="accordion-header" id="panelsStayOpen-headingSeven">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
									data-bs-target="#panelsStayOpen-collapseSeven" aria-expanded="false"
									aria-controls="panelsStayOpen-collapseSeven">
									中外名酒
								</button>
							</h2>
							<div id="panelsStayOpen-collapseSeven" class="accordion-collapse collapse"
								aria-labelledby="panelsStayOpen-headingSeven">
								<div class="accordion-body">
									<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
									<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
									<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
								</div>
							</div>
						</div>
						<div class="accordion-item">
							<h2 class="accordion-header" id="panelsStayOpen-headingEight">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
									data-bs-target="#panelsStayOpen-collapseEight" aria-expanded="false"
									aria-controls="panelsStayOpen-collapseEight">
									京东生鲜
								</button>
							</h2>
							<div id="panelsStayOpen-collapseEight" class="accordion-collapse collapse"
								aria-labelledby="panelsStayOpen-headingEight">
								<div class="accordion-body">
									<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
									<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
									<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
								</div>
							</div>
						</div>
						<div class="accordion-item">
							<h2 class="accordion-header" id="panelsStayOpen-headingNine">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
									data-bs-target="#panelsStayOpen-collapseNine" aria-expanded="false"
									aria-controls="panelsStayOpen-collapseNine">
									居家生活
								</button>
							</h2>
							<div id="panelsStayOpen-collapseNine" class="accordion-collapse collapse"
								aria-labelledby="panelsStayOpen-headingNine">
								<div class="accordion-body">
									<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
									<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
									<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
								</div>
							</div>
						</div>
					</div>

				</div>


				<div class="col-md-7">
					<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
						<div class="carousel-indicators">
							<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
								class="active" aria-current="true" aria-label="Slide 1"></button>
							<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
								aria-label="Slide 2"></button>
							<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
								aria-label="Slide 3"></button>
							<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
								aria-label="Slide 4"></button>
							<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
								aria-label="Slide 5"></button>
						</div>
						<div class="carousel-inner">
							<div class="carousel-item active">
								<img src="img/111.jpg" class="d-block w-100" alt="...">
							</div>
							<div class="carousel-item">
								<img src="img/222.jpg" class="d-block w-100" alt="...">
							</div>
							<div class="carousel-item">
								<img src="img/333.jpg" class="d-block w-100" alt="...">
							</div>
							<div class="carousel-item">
								<img src="img/444.jpg" class="d-block w-100" alt="...">
							</div>
							<div class="carousel-item">
								<img src="img/555.jpg" class="d-block w-100" alt="...">
							</div>
						</div>
						<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
							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="#carouselExampleIndicators"
							data-bs-slide="next">
							<span class="carousel-control-next-icon" aria-hidden="true"></span>
							<span class="visually-hidden">Next</span>
						</button>
					</div>
				</div>


				<div class="col-md-3 ">
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="list-group">
								<a href="#" class="list-group-item ">
									品类齐全,轻松购物
								</a>
								<a href="#" class="list-group-item">多仓直发,极速配送</a>
								<a href="#" class="list-group-item">正品行货,精致服务</a>
								<a href="#" class="list-group-item">天天低价,畅选无忧</a>
								<a href="#" class="list-group-item">京东旗下网站: 京东钱包| 京东云</a>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
		
		
	
		




		<!-- 选项 1:包含 Popper 的 Bootstrap 集成包 -->
		<script src="./js/bootstrap.bundle.min.js"></script>


		</body>
</html>

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值