一. 响应式网站结构搭建 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>
