一. 响应式网站结构搭建 jsp + bootstrap4
注意点：
1.<!DOCTYPE html>
2.<html lang="zh-cn"> ---en
3.<meta charset="UTF-8">
4.<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
5.引入bootstrap.css
6.引入要用到jquery-3.3.1.js" ；popover.js；bootstrap.js；
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>首页</title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/bootstrap4/dist/css/bootstrap.css">
<link rel='shortcut icon' type='image/x-icon' href='<%=request.getContextPath()%>/zivi/assets/img/favicon.ico' />
</head>
<body>
<div class="container">
<!-- 页头-begin -->
<header id="lk-header">页头菜单</header>
<!-- 页头-end -->
<!-- 图片切换-begin -->
<section id="lk-img">图片切换</section>
<!-- 图片切换-end -->
<!-- 热门课程-begin -->
<section id="lk-hot">热门课程</section>
<!-- 热门课程-end -->
<!-- 产品中心-begin -->
<section id="lk-product">产品中心</section>
<!-- 产品中心-end -->
<!-- 关于我们-begin -->
<section id="lk-about">关于我们</section>
<!-- 关于我们-end -->
<!-- 友情链接-begin -->
<section id="lk-link">友情链接</section>
<!-- 友情链接-end -->
<!-- 页底-begin -->
<footer id="lk-footer">页底</footer>
<!-- 页底-end -->
</div>
<!-- bootstrap 依赖于JQ-js -->
<script src="<%=request.getContextPath()%>/bootstrap4/jquery3/jquery-3.3.1.js"></script>
<!-- 提示，弹窗，下拉菜单要用到js -->
<script src="<%=request.getContextPath()%>/bootstrap4/js/dist/tooltip.js"></script>
<script src="<%=request.getContextPath()%>/bootstrap4/js/dist/popover.js"></script>
<!-- 提示，弹窗，下拉菜单要用到js -->
<script src="<%=request.getContextPath()%>/bootstrap4/dist/js/bootstrap.js"></script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~