我正在探索一些 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 的指南
关于spring-mvc - Spring Boot 2 + Webjars + Bootstrap + Thymeleaf = 未应用主题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48188697/