SpringBoot不读取自定义CSS文件

时间:2018-07-15 08:40:52

标签: css spring-boot

我创建了一个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>

1 个答案:

答案 0 :(得分:0)

使用这种方式<link rel="stylesheet" type="text/css" href="css/style.css" />