html - Bootstrap 4 webjar css 不适用于 Spring Boot + Thymeleaf

标签 html css spring-boot thymeleaf webjars

我正在使用 Thymeleaf 制作 Spring Boot Web 应用程序。我一直在尝试使用 Webjars 在我的网页上使用 JQuery 和 Bootstrap 之类的东西。使用 Spring Boot 2.2.6.RELEASE ，并尝试使用 Bootstrap Webjar 版本 4.1.1-1 .

我的 pom 中有几个不同的 webjar，但我意识到没有加载任何 css 文件。来自 webjar 的 Javascript 文件加载正常，但没有应用任何 css。在查看 Web 开发人员调试器工具时，我可以看到 Javascript 文件都在那里，但没有任何 css 文件存在。

目前，我专门尝试让 Bootstrap 选项卡正常工作，但显然，如果没有任何 Bootstrap 样式，所有 Bootstrap 功能都将无法工作。

这基本上就是我的 Controller 的样子:

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class MyController {

  @RequestMapping(value = "/stats", method = {RequestMethod.GET, RequestMethod.POST})
  public String stats(
      Model model) {

    // some code adding simple attributes to the model

    return "stats";
  }
}

我有这个网络配置类:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry
        .addResourceHandler("/webjars/**")
        .addResourceLocations("classpath:/META-INF/resources/webjars/")
        .resourceChain(false);
  }
}

我的 pom 示例:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.6.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <!-- artifact info... -->

  <properties>
    <java.version>1.8</java.version>
  </properties>

  <dependencies>

    <!-- some other dependencies -->

    <!-- Webjars -->
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap</artifactId>
      <version>4.4.1-1</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap-datepicker</artifactId>
      <version>1.7.1</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>jquery</artifactId>
      <version>3.5.0</version>
    </dependency>

    <dependency>
      <groupId>org.webjars.npm</groupId>
      <artifactId>popper.js</artifactId>
      <version>1.16.1</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>font-awesome</artifactId>
      <version>5.13.0</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>webjars-locator</artifactId>
      <version>0.40</version>
    </dependency>

    <!-- Spring -->

    <!-- some other Spring deps... -->

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-configuration-processor</artifactId>
      <optional>true</optional>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>
</project>

这是我的 html 页面 (stats.html) 的示例:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <title>My Web App</title>

  <link th:rel="stylesheet" th:href="@{webjars/bootstrap/css/bootstrap.min.css}" type="text.css"/>
  <!--<link th:rel="stylesheet" th:href="@{webjars/bootstrap-datepicker/css/bootstrap-datepicker.min.css}" type="text/css"/>-->
  <link th:rel="stylesheet" th:href="@{webjars/bootstrap-datepicker/css/bootstrap-datepicker.standalone.css}" type="text/css"/>
  <link th:rel="stylesheet" th:href="@{webjars/font-awesome/css/all.css} " type="text/css"/>
  <link href="../static/css/custom-styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
  <script th:src="@{webjars/jquery/jquery.min.js}" type="text/javascript"></script>
  <script th:src="@{webjars/popper.js/1.14.3/umd/popper.min.js}" type="text/javascript"></script>
  <script th:src="@{webjars/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
  <script th:src="@{webjars/bootstrap-datepicker/js/bootstrap-datepicker.min.js}" type="text/javascript"></script>

  <!-- Other simple web content... -->

  <!-- Example straight from Bootstrap 4 documentation https://getbootstrap.com/docs/4.4/components/navs/#tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
  </ul>

  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
  </div>

</body>

选项卡标题(或导航项)仅显示为普通的无序列表，所有实际选项卡的内容都显示在其下方。

正如我所说，据我所知，脚本文件正在正确加载。我设置了 Bootstrap 日期选择器并在同一页面上工作，但没有 Bootstrap 样式。我需要使用bootstrap-datepicker.standalone.css文件，因为 bootstrap-datepicker.min.css不起作用。

我尝试过的事情不起作用:

  • 删除 WebConfig类
  • 将 CSS 链接移至 HTML 文档正文
  • 在 @{webjars/...} 前面添加“/”在链接标签中。从技术上来说，这确实适用于 Javascript 内容，但对于 css 链接来说没有什么区别。此外，我需要保留前导“/”，以便应用程序将使用页面相关链接，否则应用程序在部署到我们的暂存环境时将无法工作
  • 指定th:href内的版本像这样:@{/webjars/bootstrap/4.1.1-1/css/bootstrap.min.css}
  • 从 HTML 主页面中删除其他内容，直到它几乎只测试 Bootstrap 选项卡(即仅导入 Bootstrap css 和 Javascript 文件)
  • 删除 th:来自链接元素

我所做的一件有效的事情是使用 BootstrapCDN，如 https://getbootstrap.com/ 所示。 :<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

如果我使用它而不是上面 HTML 中实际拥有的链接，则会应用样式并且一切正常(据我所知)。但是，我想知道为什么我无法让 webjar 工作，以及其他人是否遇到过这个问题。或者也许我正在做一些明显错误的事情，而我离得太近而看不到？

最佳答案

刚刚使用 Bootstrap 4.5.0 遇到了相同(或非常相似)的问题以下内容对我有用:

在 pom 中我有:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.40</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.5.0</version>
</dependency>

我没有 @Configuration 类 - 当我删除它时它实际上开始工作。

我的 html 开头为:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" type="text/css"/>
    <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
</head>

希望这有帮助。

编辑:刚刚再次查看了您的代码。您有 type="text.css" 而不是 type="text/css"

B.

关于html - Bootstrap 4 webjar css 不适用于 Spring Boot + Thymeleaf，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61535276/

上一篇：testing - Cypress 中的 .click() 命令未执行其功能

下一篇：apache-spark - Spark Streaming Kafka - 如何在处理所有现有消息后停止流式传输(优雅地)

相关文章：

javascript - 如何在 <div> 标签之间切换？

javascript - 如何根据通过 JavaScript 添加的类更改元素的::before 内容？

spring-boot - 无法从 spring-boot 应用程序中调出 swagger-ui

java - 重定向到接收 Controller 后传递 modelAndView 对象

mysql - 使用 Spring Data 在简约数据库中写入时出错

javascript - 使用 Vue 添加/删除动态 DOM 元素

PHP - 加载静态类发送 header

html - 防止 Logo 的链接悬停效果

css - 如何在两个不同的相交 div 上保留 Logo ？

遍历 DOM 的 jquery 方法

©2024 IT工具网  联系我们