个人中心
gpt4 book ai didi

spring-mvc - Spring Boot 2 + Webjars + Bootstrap + Thymeleaf = 未应用主题

转载 作者：行者123 更新时间：2023-12-02 02:57:51 25 4
gpt4 key购买 nike

我正在探索一些 Spring Boot，我正在看一些前端库——我承认我几乎从未见过 :)

我可能犯了一些愚蠢的错误，导致 Bootstrap 无法正常工作。我正在尝试设置标题页。因为我讨厌做简单的事情，所以我正在使用 Spring Boot、Webjars 和 Thymeleaf。都是第一次。但似乎一切都很好，我不明白哪里出了问题。

首先，这是 Gradle 依赖项。我正在使用 Spring 2.0.0.M7。我削减了应用的插件存储库和组/版本

buildscript {
    ext {
        springBootVersion = '2.0.0.M7'
    }
    repositories {
        mavenCentral()
        maven { url "https://repo.spring.io/snapshot" }
        maven { url "https://repo.spring.io/milestone" }
    }
    dependencies {
        classpath group: 'org.springframework.boot', name: 'spring-boot-gradle-plugin', version: "${springBootVersion}"
    }
}


// ##### COMPILE DEPENDENCIES
// DATABASE
compile     group: 'mysql',                     name: 'mysql-connector-java'

// SPRING
compile     group: 'org.springframework.boot',  name: 'spring-boot-devtools'
compile     group: 'org.springframework.boot',  name: 'spring-boot-starter-data-jpa'
compile     group: 'org.springframework.boot',  name: 'spring-boot-starter-json'
compile     group: 'org.springframework.boot',  name: 'spring-boot-starter-thymeleaf'
compile     group: 'org.springframework.boot',  name: 'spring-boot-starter-web'

// THYMELEAF
compile     group: 'nz.net.ultraq.thymeleaf',   name: 'thymeleaf-layout-dialect',  version: '2.2.2'

// WEB JAVASCRIPT LIBS
compile     group: 'org.webjars',               name: 'webjars-locator',  version: '0.32-1'
compile     group: 'org.webjars',               name: 'bootstrap',        version: '4.0.0-beta.3'

我正在使用 webjars 定位器。我喜欢这种方法，因为我在这里可以完全控制我的库，而且我不必在应用程序上输入版本号。

然后我设置了资源处理程序来检索 webjars 和 spring 布局方言...

@Bean
WebMvcConfigurer configurer() {
   return new WebMvcConfigurer() {
      @Override
      public void addResourceHandlers(ResourceHandlerRegistry registry) {
          registry
                .addResourceHandler("/webjars/**")
                .addResourceLocations("/webjars/")
                 .resourceChain(false);
      }
   };
}

@Bean
LayoutDialect layoutDialect() {
   return new LayoutDialect();
}

... Spring 应用程序...

@SpringBootApplication(scanBasePackages = { "it.aegidea.wolf" })
public class Application {
   public static void main(String[] args) {
      SpringApplication.run(Application.class, args);
   }
}

... Controller ...

@Controller
public class HomepageController {

   @RequestMapping(value = "/", method = RequestMethod.GET)
   public String getHomepage() {
      return "homepage";
   }

}

……整体布局……

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <!--/*  Each token will be replaced by their respective titles in the resulting page. */-->
    <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Task List</title>

    <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css" />


</head>
<body>

    <div th:include="commons/header :: page-header"></div>

    <div class="container">
        <div layout:fragment="content">

        </div>
    </div>

    <!-- Injected -->
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/popper.js/dist/umd/popper.js"></script>
    <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>

</body>

...标题...

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <body>
        <nav class="navbar navbar-default navbar-fixed-top" th:fragment="page-header">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#title-collapse" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="title-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </body>
</html>

...最后是主页。

<!DOCTYPE html>

<html
        lang="en"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{commons/layout}">
    <head>
        <meta charset="UTF-8" />
        <title>Wolf</title>
    </head>
    <body>
        <div layout:fragment="content">
            <p th:text="'Hello World!'" >Hello World!</p>

            <div class="btn-group">
                <button type="button" class="btn btn-success">This is a success button</button>
                <button type="button" class="btn btn-warning">This is a warning button</button>
                <button type="button" class="btn btn-danger">This is a danger button</button>
            </div>
        </div>
    </body>
</html>

(奇怪的)效果是样式正确应用于主页中的按钮，但未应用于导航栏。

我尝试做的是

  • 尝试通过直接链接包含 bootstrap、popper 和 jquery(取自 Bootstrap 主页)
    • 试图直接将页眉包含在首页中，就在
      • 之后

我 100% 确定我犯了一些非常愚蠢的错误，但我可能已经看过代码太多次了，以至于我看不出我做错了什么。

感谢大家的帮助:)

洛伦佐

最佳答案

不出所料，答案总是比预期的简单。我将 bootstrap 3 css 类 (navbar-fixed-top) 与 bootstrap 4 一起使用，这改变了类。

bootstrap 4 的示例 header :

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

示例菜单项:

<li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</li>

这是 bootstrap 4 的指南

https://getbootstrap.com/docs/4.0/components/navbar/

关于spring-mvc - Spring Boot 2 + Webjars + Bootstrap + Thymeleaf = 未应用主题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48188697/

25 4 0
文章推荐： azure-active-directory - Azure Active Directory 的自定义登录页面是否可行？
文章推荐： java - 来自 bouncycaSTLe RSAKeyParameters 的公钥
文章推荐： java - 测量 HTTP、HTTPS、SOCKS 代理的运行状况
文章推荐： excel - 循环不打开 PDF...所以复制/粘贴到 Excel 失败(我认为)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com