我创建了一个JSP页面,我想在其中使用在SpringBoot项目的自定义CSS文件中编写的CSS属性。但是不幸的是,SpringBoot没有读取自定义CSS文件。同样,它也不读取Bootstrap的CSS文件,因此我不得不链接到其CDN。
我在这里已经阅读了与我的问题类似的解决方案,但是没有一个解决方案对我有用。不确定这些解决方案是否适用于特定情况。
目录结构
- src
- main
- java
- resources
- static
- css
- style.css
- webapp
- WEB-INF
- views
- addCountry.jsp
addCountry.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<title>Add Country</title>
</head>
<body>
<!-- Navbar Code Starts Here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="http://localhost:8080/WorldAtlas/">World Atlas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="http://localhost:8080/WorldAtlas/addCountry">Add Country</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar Code Ends Here -->
<!-- Add Country Form Code Starts Here -->
<div class="container wrapper">
<form action="saveCountryData" method="POST">
<div>
<input type="text" name = "country" class="form-control" placeholder="Country">
<input type="text" name = "capital" class="form-control" placeholder="Capital City">
<input type="text" name = "isocode" class="form-control" placeholder="ISO Code">
<input type="text" name = "area" class="form-control" placeholder="Area">
<select name = "continent" class="form-control">
<option value="Africa">Africa</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
</select>
<input type="text" name = "currency" class="form-control" placeholder="Currency">
<input type="text" name = "extension" class="form-control" placeholder="Extension">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Add Country Form Code Ends Here -->
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous">
</body>
</html>
答案 0 :(得分:0)
使用这种方式<link rel="stylesheet" type="text/css" href="css/style.css" />