「Spring Boot 2.7」Thymeleaf3にBootstrap 5.1.3を追加するサンプル

2022年6月23日

環境

Eclipse  2022-06 M2 (4.24.0 M2)
Spring　Boot 2.7.0
JavaSE 17
Gradle 7.4.1
Tomcat 9.0.63
Thymeleaf3

操作方法
1.build.gradleににBootstrapのライブラリを追記します

dependencies {
      implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
      implementation 'org.springframework.boot:spring-boot-starter-web'
      compileOnly 'org.projectlombok:lombok'
      developmentOnly 'org.springframework.boot:spring-boot-devtools'
      annotationProcessor 'org.projectlombok:lombok'
      testImplementation 'org.springframework.boot:spring-boot-starter-test'
      // https://mvnrepository.com/artifact/org.webjars/bootstrap
    implementation group: 'org.webjars', name: 'bootstrap', version: '5.1.3'
}

2.Bootstrapからコードを追加します。
場所　src/main/resources/templates/show.html
以下の内容を編集します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>check</title>
<!-- bootstrapのCSSを指定 -->
<link th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}"
      rel="stylesheet">
</head>
<body>
      <span class="badge bg-primary">Primary</span>
      <span class="badge bg-secondary">Secondary</span>
      <span class="badge bg-success">Success</span>
      <span class="badge bg-danger">Danger</span>
      <span class="badge bg-warning text-dark">Warning</span>
      <span class="badge bg-info text-dark">Info</span>
      <span class="badge bg-light text-dark">Light</span>
      <span class="badge bg-dark">Dark</span>
<!-- bootstrapのjsを指定 -->
      <script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.min.js}"></script>
</body>
</html>

3.ポート番号の変更
場所　src/main/resources/application.properties

#ポート番号
server.port=8768

4.動作確認
http://127.0.0.1:8768/cftにアクセスします。
BootstrapのBadgeが表示されます。

Spring Boot CLI

Posted by arkgame

Related posts: