【Java踩坑】Tomcat中JSP页面上的Boostrap不生效

最新推荐文章于 2022-08-17 23:17:00 发布

ReQuestss

最新推荐文章于 2022-08-17 23:17:00 发布

阅读量646

点赞数 3

分类专栏： Java踩坑日记文章标签： java css web jsp html

本文链接：https://blog.csdn.net/weixin_39629757/article/details/116133238

版权

Java踩坑日记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

错误情况

使用IDEA开启使用Boostrap进行页面美化的项目出现样式内容丢失的情况，但是js文件都正常加载成功了，唯独页面上的内容没有展示相应的样式

页面代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap模板</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <h3 style="text-align: center">显示所有联系人</h3>
    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>籍贯</th>
            <th>QQ</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${list}" var="linkman">
            <tr>
                <td>${linkman.id}</td>
                <td>${linkman.name}</td>
                <td>${linkman.sex}</td>
                <td>${linkman.age}</td>
                <td>${linkman.address}</td>
                <td>${linkman.qq}</td>
                <td>${linkman.email}</td>
                <td><a class="btn btn-default btn-sm" href="修改联系人.html">修改</a>&nbsp;<a class="btn btn-default btn-sm" href="javascript:void(0)" onclick="deleteById(${linkman.id})">删除</a></td>
            </tr>
        </c:forEach>
        <tr>
            <td colspan="8" align="center"><a class="btn btn-primary" href="${pageContext.request.contextPath }/add.jsp">添加联系人</a></td>
        </tr>
    </table>

<script>
    function deleteById(id) {
        var flag = confirm("您确定要删除吗？");
        console.log(flag);
        if (flag){
            location.href="linkManServlet?method=delete&id="+id;
        }
    }
</script>
</div>
</body>
</html>

错误显示情况：
在这里插入图片描述
正常应该显示的情况：

解决过程：

首先使用控制页面查看js文件加载情况发现Boostrap的js文件都正常加载了
因此可以判定不是路径错误导致的问题，那么问题就出在了页面代码上。
查了大量资料发现了一个关于jsp页面Boostrap不加载的解决方法是将jsp文件中的<!DOCTYPE html>头部标识删除，达到解决问题。通过测试，将<!DOCTYPE html>删除之后，再将编译好的缓存删除，重新编译页面文件，运行第一次时确实样式恢复了正常。
正当我以为问题解决的时候，重新尝试展示给同学看时，这个问题又出现了，无论我如何删除页面上的<!DOCTYPE html>，并删除缓存，都会出现样式丢失的情况，我怀疑人生了。
正当以为这只是个玄学问题，只能认命时，我打开了out目录下artifacts目录里的项目编译文件
里面正好有list.jsp文件，我打开查看发现这个头部标签居然还是存在，然而我项目中的jsp文件里这个头部文件已经删除并且缓存内容重复删除了多次并重新编译了多次，因此这只能是IDEA或者Tomcat的编译问题了。
我将这个头部标签删除后，重启项目，发现居然解决了！！真不知该怪谁了。

ReQuestss

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【Java踩坑】Tomcat中JSP页面上的Boostrap不生效

错误情况使用IDEA开启使用Boostrap进行页面美化的项目出现样式内容丢失的情况，但是js文件都正常加载成功了，唯独页面上的内容没有展示相应的样式页面代码如下：<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html><!
复制链接

扫一扫

专栏目录