JavaWeb Bootstrap02主页搭建

時宜

已于 2022-05-04 22:16:14 修改

阅读量595

点赞数 4

文章标签： html web bootstrap eclipse

于 2022-05-04 22:05:38 首次发布

本文链接：https://blog.csdn.net/weixin_62270300/article/details/124563995

版权

上期回顾Bootstrap01基本使用https://blog.csdn.net/weixin_62270300/article/details/124547772?spm=1001.2014.3001.5501目录一、顶部页面top.jsp(顶部代码) 二、首页index.jsp(主页界面)三、增加商品界面insert.jsp(增加界面)一、顶部页面点击右边图标下拉出来的效果如下👇 点击哪个跳哪个界面top.jsp(顶部代码)<%@...

摘要由CSDN通过智能技术生成

上期回顾

Bootstrap01基本使用https://blog.csdn.net/weixin_62270300/article/details/124547772?spm=1001.2014.3001.5501

一、顶部页面

点击右边图标下拉出来的效果如下👇 点击哪个跳哪个界面

top.jsp(顶部代码)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%--导航栏--%>
<nav class="navbar navbar-dark bg-dark 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>

二、首页

首页样式是来自Bootstrap5官网顶部下面是轮播图可以自动切换图片再下面商品展示采用的是卡片样式

主页界面如下：

index.jsp(主页界面)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<!-- 引入jquery的库 必须在Bootstrap库之前 -->
<script src="jquery/jquery-3.3.1.js"></script>
<!-- Bootstrap CSS -->
<link href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css"
	rel="stylesheet">
<!-- Bootstrap JS -->
<script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>

<style>
.carousel-item img {
	height: 500px;
}
</style>
</head>
<body>
	<jsp:include page="top.jsp">
		<jsp:param value="index&

最低0.47元/天解锁文章

時宜

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb Bootstrap02主页搭建

上期回顾Bootstrap01基本使用https://blog.csdn.net/weixin_62270300/article/details/124547772?spm=1001.2014.3001.5501目录一、顶部页面top.jsp(顶部代码) 二、首页index.jsp(主页界面)三、增加商品界面insert.jsp(增加界面)一、顶部页面点击右边图标下拉出来的效果如下👇 点击哪个跳哪个界面top.jsp(顶部代码)<%@...
复制链接

扫一扫